Page 1 of 1

Two columns-- float: left and right

Posted: Mon Apr 27, 2009 3:40 pm
by alex.barylski
I have a two column design where I want the text in the left column to visually appear first and to come first in markup as well.

I am currently using float: left with a width of 50% and float right with the same -- this appears to be the only way to make both play side by side without resorting to moving the left column into the second most spot in XHTML.

While this works they both now overlap the container element -- which ruins the existing design.

I have tried applying clear: both to the container as well as adding a <div> to the end of the columns and clearing that, such as:

Code: Select all

<div class="col1">  Left column trext</div><div class="col2">  Right column trext</div><div style="clear: both"></div>
This does not work either...can someone explain how clear should be used in this situation?

Cheers,
Alex

Re: Two columns-- float: left and right

Posted: Mon Apr 27, 2009 3:58 pm
by Eran
Float them both to the left with width:50%. Make sure not to add any padding, margin or borders to the sides

Re: Two columns-- float: left and right

Posted: Mon Apr 27, 2009 5:05 pm
by alex.barylski
Didn't even think of that, thank you I will try it :D

Re: Two columns-- float: left and right

Posted: Mon Apr 27, 2009 7:18 pm
by Christopher
You technically only need a width on the left column.

Code: Select all

<html>
<head>
<style>
.col1 {
    width: 200px;
    float:left;
}
.col2 {
    float:left;
}
</style>
</head>
<body>
<div class="col1">
  Left column trext
</div>
<div class="col2">
  Right column trext
</div>
<div style="clear: both"></div>
</body>
</html>

Re: Two columns-- float: left and right

Posted: Mon Apr 27, 2009 10:10 pm
by alex.barylski
arborint: Your right -- that worked nicely

pytrin: That didn't work...the floats are still both bleeding over the container :(

Any ideas?

Re: Two columns-- float: left and right

Posted: Tue Apr 28, 2009 12:03 am
by Christopher
I'm not clear what's not working since there is no "container" in what you posted. You can either float one and add margin on that side to the other, or float both. The advantage to floating one is that you don't need the extra clear:both div. The advantage to floating all is that you can have as many columns as you want.

Re: Two columns-- float: left and right

Posted: Tue Apr 28, 2009 2:33 am
by Eran
pytrin: That didn't work...the floats are still both bleeding over the container
you'd have to be more specific to what you mean by that..
did you give the container a specific width?

Re: Two columns-- float: left and right

Posted: Tue Apr 28, 2009 7:52 am
by alex.barylski
EDIT | Nevermind. It wasn't a floating issue at all but rather a container DIV whose height was set to 100% would not expand beyond the visible screen height.

Removing the height: 100% from the offending elements seems to have done the trick in this case -- but will probably cause issues later on.

EDIT 2 | Thanks again, both of you for helping me with this :)