CSS Layout Question

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

demo: http://jsfiddle.net/TRa35/

html

<div id="wrapper">
    <div id="div-image">div image</div>
    <div id="div-maincontent">
        <div id="div-sidebar">
            div sidebar
        </div>
        div maincontent
        <button>click to add content</button>
        <br />
        <span></span>
    </div>
</div>

css

html, body {
    margin:0;
    padding:0; 
}

#wrapper {
    position:relative;
}

#div-image {
    position:absolute;
    left:0;
    top:0;
    width:200px;
    height:100px;
    background-color:#cef;
}

#div-sidebar {
    position:absolute;
    left:-200px;
    top:100px;
    bottom:0;
    width:200px;
    background-color:#efc;
}

#div-maincontent {
    position:absolute;
    left:200px;
    right:0;
    top:0;
    background-color:#fce;
    min-height:300px;
}

Answer 2

This almost solves the problem. In fact, to be more precise, it does solve the problem in Google Chrome and Firefox, but IE 9 seems to have problems recognizing the height of cells and/or rows. I can't really mark it as an answer because of this, but I'm just posting it in case anyone can use something from it. It uses an html table element.

CSS:

#mainContentCell
{
    background-color: Blue;
}

#imageCell
{
    width: 200px;
    height: 100px;
    background-color: Yellow;
}

#sidebarCell
{
    background-color: Red;
}

HTML:

<table id="layoutTable" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td id="imageCell">
            Image
        </td>
        <td id="mainContentCell" rowspan="2">
            Main Content
        </td>
    </tr>
    <tr>
        <td id="sidebarCell">
            Sidebar
        </td>
    </tr>
</table>

Also, if anyone can make this work in IE 9, I'll gladly mark their response as the answer.

Answer 3

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

Answer 4

@Andrew for my suggestion, you should use 960 grid system CSS. pls check on this link http://960.gs/ I think you may more easier to develop and maintain.

Answer 5

Whew! After searching tons of articles. I hope this could help you.

<style type="text/css">
    #wrapper{
    background:blue;
    position:relative;
    min-height:400px;
}

#img{
    background:green;
    position:absolute;
    left:0;
    height:100px;
    width:200px;
}

#some-panel{
    background:orange;
    position:absolute;
    width:200px;
    top:100px;
    left:0;
    bottom:0;
}

#main-content{
    background:yellow;
    margin-left:200px;
}
</style>

<div id="wrapper">

        <div id="img">img img</div>
        <div id="some-panel">some panel</div>

    <div id="main-content">
         main content main
    </div>
</div>