ansaurus

Question

CSS: two colums (fixed/fluid) - same height

Answer 1

+4 A:

powtac 2009-11-23 18:01:40

Answer 2

+1 A:

I usually have two divs: the outer one would contain the sidebar content that I want to have the same height as the main column, and the inner div would be the main column.

-----------------------------
|      -------------------- |
|      |                  | |
|      |                  | |
|      |                  | |
|      -------------------- |
-----------------------------

This way, the inner/main div forces the outer/sidebar div to be the same height as the inner/main. Just float:right the inner/main div, set the outer/sidebar div to be width:100%, and specify that the inner/main div has a left margin, to allow for the sidebar, e.g. margin-left:20%.

<div class="outer">
  <div class="inner">
    --main content--
  </div>
  --sidebar content--
</div>

Update: sorry, I had the sidebar content shown in the wrong place. It should be below the inner/main div so that the inner/main div shows up alongside it to the right when it is floated. Example CSS:

div.outer {
  width: 100%;
}

div.inner {
  margin-left: 20%; /* width of sidebar */
  float: right;
}

Sarah Vessels 2009-11-23 18:08:54

Can't get this to show what I need, can you provide an example of the style sheet?

kemp 2009-11-23 18:53:12

I think that you'd want to add: height:100%;To div.inner as well.

Tchalvak 2009-11-23 20:30:17

I doubt this works. The width=100% will punch the outer div below inner. You'll need more than this.

dland 2009-11-24 17:12:05

You're right, dland: the sidebar/outer content does show up to the left of the inner/main content, but it's also shoved below it.

Sarah Vessels 2009-11-24 20:14:38

Answer 3

A:

Here's a QUICK mockup. The main column fills up horizontally as you use it. You could set the main column width if you know the left column width already.

<html>
<head>
<style>
#leftCol
{
width:350px;
height:100%;
float:left;
background-color:#FFFF33;
}
#mainCol
{
width:53%;
height:100%;
float:left;
background-color:#CC0033;
}
#wrapper
{
width:100%;
}
.clearFix
{
clear:both;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="leftCol">tfgsrrtgrt

</div>
<div id="mainCol">gtrgdrtgthdyhtyhtyhydthtr

</div>
<div class="clearFix"></div>
</div>
</body>
</html>

Hope this works for you.

tahdhaze09 2009-11-23 20:23:40

note that if the browser width is restricted, mainCol will wrap underneath leftCol, which may be undesirable

dland 2009-11-24 17:03:47

Correct. Forgot about that. Then we'll need a min-width in there somewhere...Perhaps in the #wrapper or #mainCol?

tahdhaze09 2009-11-24 20:47:58

Answer 4

A:

So basically the answer to the question "can this be done without tricks" is: No.

kemp 2009-12-04 11:48:36

ansaurus

tags:

views:

answers:

CSS: two colums (fixed/fluid) - same height

related questions