• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

Float Right

User avatar
Mark
VIP - Donator
Posts: 370

Float Right

Thu Feb 26, 2015 4: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.

User avatar
CodenStuff
Site Admin
Posts: 4387

Re: Float Right

Sat Feb 28, 2015 12:38 am

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
Posts: 370

Re: Float Right

Sat Feb 28, 2015 6:29 pm

This is what happens?
You do not have the required permissions to view the files attached to this post.

User avatar
Codex
Coding God
Posts: 2026

Re: Float Right

Sat Feb 28, 2015 9: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*
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

Post Reply

Return to “Help & Support”