two column layout

lucidtech · Aug 16, 2007

I have a div that is nested quite deep in div tags. I want to divide this div into a left and right column.. sounds easy, but so far I'm pulling out my hair to get it to work.

Since the div is nested within several others, I run into these problems.
1. If I set it to float:left and float:right, the parent layer no longer has a height.. and so the background image disappears
2. If I set them to relative positions, then the right column begins where the left ends, rather than them being side by side.

Hers are links to temporary pages.. all CSS is contained in the head tag, and I have added simple background colors and text to help identify div's.

(setup with floating.. left and right columns work, but no parent height)

http://www.alucidweb.com/setup.cfm

(setup without floating.. parent has a height and the footer works correcntly, but right column appears underneath the left column)

http://www.alucidweb.com/setup2.cfm

I don't want to have to set the height of the div that contains the columns manually.. this is the setup I've been working with and it works until the user changes the text size in their browser options. I would like to use this style for many pages, all with content of different lengths in the left and right columns, and have the parent div adjust height accofdingly.
Thank you in advance for your help.

kaht · Aug 16, 2007

If I set it to float:left and float:right, the parent layer no longer has a height.. and so the background image disappears

Put a 100% width item after the floats that clears the floats. It's extra markup, but I've yet to find a better way to do it.

Code:

<style type="text/css">

div.floatBreaker {
   clear:both;
}

div#container {
   background-color:pink;
   border:1px solid red;
}

div#left {
   float:left;
   border:1px solid yellow;
}

div#right {
   float:right;
   border:1px solid green;
}

</style>
<body>
   <div id="container">
      <div id="left">
         blahblah
         <br />
         <br />
         <br />
         <br />
         <br />
         <br />
         <br />
         blahblah
      </div>
      <div id="right">
         <br />
         <br />
         <br />
         some more blahblah
      </div>
      [!]<div class="floatBreaker"></div>[/!]
   </div>
</body>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

lucidtech · Aug 16, 2007

Khat, thank you so much. The extra div is not an issue at all. Tried it and it works... you just saved me so much javascript code to resize the height of the parent div!!!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

two column layout

lucidtech

IS-IT--Management

kaht

Programmer

lucidtech

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor