Float Right

4 posts Page 1 of 1
Contributors
User avatar
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

Float Right
Mark
hello,

im trying to do a right column on my website http://www.mbappz.co.uk/register.php
I want to split it in to 2 so I can put info to the right of my register form.

I have this

<section class="left-col">

Register Form Here

</section>

then

<section class="right-col">

Other Information Goes Here

</section>

this is the css for the left-col

.left-col{
width: 100%;
float: left;
margin: -2% 1% 1% 1%;
}


how would I get the right column up beside it but on the right of the left column?

Thank you in advance.
http://www.mbappz.com
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Re: Float Right
CodenStuff
The issue could be that you've set the width to 100% on the left column so its taking up all available space. Try remove that and see what happens.
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
User avatar
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

Re: Float Right
Mark
This is what happens?
You do not have the required permissions to view the files attached to this post.
http://www.mbappz.com
User avatar
Codex
Coding God
Coding God
Posts: 2028
Joined: Wed Mar 31, 2010 5:50 pm

Re: Float Right
Codex
You need to add up the width so it matches the parent container's width.

For example,
Code: Select all
<div id="container">

<section class="left-col">..</section>
<section class="right-col">..</section>

</div>
Then if container's width is set at 900, you can set right-col 450 and left-col 450 = 900, however if they both equal a (width) value larger than the parent container or the actual window then it will be pushed on to a new line. By placing a fixed width for the parent container you force it to be showed at this size no matter the browser/window size. This can also be done in percentage where the parent container is 100% and left-col 50% and right-col 50%.

Note, by placing a margin, that subtracts from the width as well, so if u have margin: 1 then you would have right-col width 448 (since margin-left = 1 + margin-right = 1 thus equalling 2, we subtract this from the width) and left-col width 448.

*PS: Just making a short appearance*
We shall let the revolution begin.. the revolution for freedom, freedom against censorship. We shall fight in the fields and in the streets, we shall fight in the hills; we shall never surrender
4 posts Page 1 of 1
Return to “Help & Support”