Question

I’m having trouble defining the CSS styles necessary in order to achieve the following layout:

Ideally, I’d like to have the left two divs be of width 200px. div#image will always have a height of 100px. However, I would like div#sidebar and div#mainContent to have lower borders which lie on the same horizontal level. Their sizes should be large enough to contain their respective content, which is determined when the page is being served. Hence, the one with more content will cause the other div to extend down to the same distance.

The problem is that with absolute positioning, the div#sidebar and div#mainContent elements don’t seem to acknowledge the flow of their child elements. Perhaps I don’t fully understand absolute positioning. Also, it seems like bad form to use Javascript in order to set the inline style of elements on the page. Is there a way of accomplishing this solely with CSS?

I’ve also tried floating the div#image and div#sidebar, and setting a margin-left property on div#mainContent, but wasn’t able to get it to work…

Any help will be much appreciated!

Andrew

Answer 1

Note: This has been abandoned as “unsolvable”, a reasonable answer is given below, but the original problem question remains without a definite solution.

---

JS Fiddle: http://jsfiddle.net/steve/gHrce/

Does almost everything, may help put you on the right track.

CSS:

#img {
  background:green;
  float:left;
  height:100px;
  width:200px;
}

#sidebar {
  background:red;
  clear:both;
  float:left;
  width:200px;
}

#mainContent {
  background:yellow;
  margin-left:200px;
}

HTML:

<div id='img'>
  IMG
</div>    

<div id='sidebar'>
  SIDEBAR
  <br />
  <br />
  <br />
</div>   

<div id='mainContent'>
  MAIN CONTENT
  <br style='clear:both' />
</div>

That extra <br /> at the bottom forces the height of the main content to whatever the sidebar height is.

The <br /> tags in the sidebar are just to provide some extra height for demonstration purposes.

---

Of course, you can add Javascript pretty easily to expand the sidebar’s height, but it smells strongly of hack:

if($('mainContent').offsetHeight > $('sidebar').offsetHeight + 100) {        
  $('sidebar').style.height = $('mainContent').offsetHeight - 100 + 'px';
}