1. Home
  2. Forums Index
  3. Browser Side / CSS 7:04 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

2 columns with same auto height

         

johnlutz

7:06 pm on Dec 29, 2007 (gmt 0)

10+ Year Member



Looking for help with this 2 column layout. I want left column and right column to look like the same height even if the content in each are different heights. If left is longer, then I want the right to go to bottom of left. If right is longer, I want the left to go to the bottom of right.

I have tried this layout a number of ways: just a left and right collumn that are floated, but I don't know how to relate the 2. I have put the left column inside the right column and viceversa. Basically that is kind of what I have now. 1 middle wrapper div with the background that I want for the left column. Then I have the left column content floated withe the right column content positioned on top of the middle wrapper. This just doesn't automatically fill to the bottom of each other though unless I have the middle wrapper set to an exact number of pixels. I don't want to set an exact number of pixels as this content will change on every page.

Please help. I will explain more if this doesn't make sense. Thanks in advance.

HTML :
----------------------------------
<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Header -->

<div id="header">

</div>
<!-- End Header -->

<div class="middlewrapper">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">

<div class="leftcolumn"><div id="leftpic"></div><p>content</p></div>

<div class="rightcolumn">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<p>content</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

<!-- Begin Footer -->
<div id="footer">

Footer

</div>
<!-- End Footer -->

</div>
<!-- End Wrapper -->

</body>

Relevant CSS:
----------------------------------
* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #EBFFE8;
}
#wrapper {
margin: 0 auto;
width: 953px;
}

#header {
color: #333;
width: 953px;
float: left;
padding: 0;
height: 194px;
margin: 5px 0px 5px 0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/NJT_headerback.png');
}

#footer {
width: 953px;
clear: both;
color: #000000;
margin: 5px 0px 5px 0px;
font-size:.7em;
text-align:right;
}

.middlewrapper {
background: transparent;
width:953px;
height:auto;
}
.middlewrapper .b1 {
display:block;
overflow:hidden;
height:1px;
margin:0 5px;
background:#666;
font-size:1px;
}
.middlewrapper .b2 {
display:block;
overflow:hidden;
height:1px;
margin:0 3px;
background:#C5F5FE;
border-left:2px solid #666;
border-right:2px solid #666;
font-size:1px;
}
.middlewrapper .b3 {
display:block;
overflow:hidden;
height:1px;
margin:0 2px;
background:#C5F5FE;
border-left:1px solid #666;
border-right:1px solid #666;
font-size:1px;
}
.middlewrapper .b4 {
display:block;
overflow:hidden;
height:2px;
margin:0 1px;
background:#C5F5FE;
border-left:1px solid #666;
border-right:1px solid #666;
font-size:1px;
}
.middlewrapper .boxcontent {
display:block;
background:#C5F5FE;
border:0 solid #666;
border-width:0 1px;
height:100%;
}

.leftcolumn {
float:left;
}

.rightcolumn {
background: transparent;
width:697px;
float:right;
height:100%;
position:relative;
margin-top:-5px;
margin-bottom:-5px;
}
.rightcolumn .b1 {
display:block;
overflow:hidden;
height:1px;
margin:0 5px 0 0;
background:#666;
font-size:1px;
}
.rightcolumn .b2 {
display:block;
overflow:hidden;
height:1px;
margin:0 3px 0 0;
background:#fff;
border-left:1px solid #666;
border-right:2px solid #666;
font-size:1px;
}
.rightcolumn .b3 {
display:block;
overflow:hidden;
height:1px;
margin:0 2px 0 0;
background:#fff;
border-left:1px solid #666;
border-right:1px solid #666;
font-size:1px;
}
.rightcolumn .b4 {
display:block;
overflow:hidden;
height:2px;
margin:0 1px 0 0;
background:#fff;
border-left:1px solid #666;
border-right:1px solid #666;
font-size:1px;
}
.rightcolumn .boxcontent {
display:block;
background:#fff;
border:0 solid #666;
border-width:0 1px;
height:100%;
padding-left:10px;
}

Xapti

5:27 am on Dec 31, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well you didn't specify if you desired a fluid width or fixed width for the columns.
For fixed width, I believe it's quite easy (unless I'm forgetting something). It uses faux columns, a term used meaning the columns aren't actually stretched to the bottom, but appear to be due to the background.
Float both divs and put them in a container. Set the container's property to overflow:auto, which should make the floats the div; IE needs haslayout for that to work. The other step is simply setting a background image to make the illusion of two continuous sections. Then match the widths of the divs to the width on the background image.

As far as I know, it's not easy, or even not possible to do it for fluid width cross browser with only CSS. The non-CSS way which will work would be to use a table. The CSS way which is easy but not cross-browser compatible (but it can be compatible with javascript) would be to use the display:table series of CSS display properties, and then correct it with javascript for those which don't support it correctly.

johnlutz

2:59 pm on Dec 31, 2007 (gmt 0)

10+ Year Member



Sorry for not explaining more. First off, it is a fixed layout. I thought of doing a faux column, but I don't think it will work with the look I want.

If you look at the code in IE, you will kind of see what I am looking for, but I want the right column to extend all the way to the bottom of the left column.

Basically the header and the main body columns have rounded corners, so not sure how I would accomplish this with a faux column.

Thanks again for any help.

Xapti

8:49 pm on Dec 31, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



For fixed width, you can still do rounded corners or whatever, they just need to be part of the background image for the faux columns. This is not a typical faux column where there's only 1 that's being made with the background... both are being made with the background. Just set up the background to appear exactly as you want visually, and fit the divs to it.
The one and only complicated thing about this for rounded corners, is you'll have to do some extra work for the bottom border. The container of the two divs will need to have another div absolutely positioned to the bottom of it (and behind the content), so that the rounded bottom always hugs the fake bottom.

Oh and lastly... I decided to view your posted code...
It only renders in IE. The whole page explodes horribly if I run it in Firefox, which is really bad, that means you're doing many quirky and/or incorrect coding practices (It probably has to do with the weird method of doing your rounded corners, which I find interesting nonetheless). You could maybe catch some of them with the W3C Validators:
[jigsaw.w3.org...]
[validator.w3.org...]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 7:04 am May 2, 2026