Float Right
4 posts
Page 1 of 1
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.
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.
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.
This is what happens?
You do not have the required permissions to view the files attached to this post.
You need to add up the width so it matches the parent container's width.
For example,
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*
For example,
Code: Select all
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%.<div id="container">
<section class="left-col">..</section>
<section class="right-col">..</section>
</div>
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
Copyright Information
Copyright © Codenstuff.com 2020 - 2023