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

StackOverflow https://stackoverflow.com/questions/1784841

  •  21-09-2019
  •  | 
  •  

Question

What's the best way to do this simple thing?

  • left column, fixed width, background say yellow
  • main column, rest of the screen

main column will contain text of indefinite length, and I want the left column to be as high as the main no matter what the contents are. No header, no footer, just the screen split in two but the left must fill up all the space the main takes. No javascript.

Thanks.

EDIT: can this (very basic layout) be done without tricks like background images or absurd margin values? I'm trying to move on from the despised table approach, but so far I'm seeing that CSS only layouts always require some trickery even to do the easiest things.

Was it helpful?

Solution 3

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

OTHER TIPS

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;
}

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top