Two columns-- float: left and right

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Two columns-- float: left and right

Post 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
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Two columns-- float: left and right

Post by Eran »

Float them both to the left with width:50%. Make sure not to add any padding, margin or borders to the sides
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Two columns-- float: left and right

Post by alex.barylski »

Didn't even think of that, thank you I will try it :D
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Two columns-- float: left and right

Post 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>
(#10850)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Two columns-- float: left and right

Post 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?
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Two columns-- float: left and right

Post 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.
(#10850)
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Two columns-- float: left and right

Post 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?
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Two columns-- float: left and right

Post 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 :)
Post Reply