{ Learn Code. Share Code. Teach Code. Love Code. }

  • Float Right

 #82939  by Mark
 Thu Feb 26, 2015 3:34 pm
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.
 #82943  by CodenStuff
 Fri Feb 27, 2015 11:38 pm
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.
 #82944  by Mark
 Sat Feb 28, 2015 5:29 pm
This is what happens?
You do not have the required permissions to view the files attached to this post.
 #82945  by Codex
 Sat Feb 28, 2015 8:29 pm
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*