Question

I want to get the following layout

 aaaaaaaaa  |  bbbb
 aaaaaaaaa  |  bbbb
  cc | dd   |  bbbb
  cc | dd   |  bbbb
  cc | dd   |  bbbb

the area for the “b”‘s should have a fixed width.
the area for the “a”‘s should take the rest of the available space.
“c”‘s and “d”‘s get 50% of the width of a each.

I can do this with tables without any problem.

I guess one of you guys can guide me on how to do this with DIVs and CSS.

http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
has what looks like the basis for a Div based solution.

but I also need to be convinced that this is the right thing to do.
because it does come with a price…
both in code size and in development time….

I want this to work on IE 7 and recent versions of chrome and FF.

(I just read this discussion: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_21694743.html which I started about 5 years ago, I still dont like CSS Floating divs…)

also – does anybody know how supported is this: http://www.w3.org/TR/css3-multicol/ ?

current code but its not stable in any way, i keep playing with it.. but nothing seems to do what I need:

<div id="_home_container_div" style="background-color:red;">
    <div style="float:right;background-color:violet;width:155px;margin-top:55px;margin-right:55px;marginleft:55px;">
        <div class="slideshow" style="width:100%;padding:0px auth;background-color:green;">
                       some images go here
        </div>
    <div id='caption' style="width:100%;padding:0px auth;font-size:14px; font-weight:bold; ">
        initial caption for first image
    </div>
    </div>
    <div style="float:right;margin-top:55px;background-color:blue;">
        <div class="h1text" style="float:left;">
            <h1 class="_home_main_caption">${Home.main__header}</h1>
            <p class="h1text">${Home.main1__para}</p>
            <p class="h1text">${Home.main2__para}</p>
        </div>
        <div class="h2text" style="float:left;clear:left;">
            <h2>${Home.subA__header}</h2>
            <p>${Home.subA1__para}</p>
            <p>${Home.subA2__para}</p>
        </div>
        <div class="h2text" style="float:left;clear:left;">
            <h2>${Home.subB__header}</h2>
            <p>${Home.subB1__para}</p>
            <p>${Home.subB2__para}</p>
        </div>
    </div>
</div>

Answer 1

See if this jsfiddle helps you out.

Code:

<div id="cont">
    <div id="left">
        aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa
        <div id="subLeft">
            cc cc cc cc cc cc cc
        </div>
        <div id="subRight">
            dd dd dd dd dd dd dd
        </div>
    </div>
    <div id="right">
        bbbb bbbb bbbb bbbb bbbb bbbb bbbb bbbb bbbb bbbb
    </div>
</div>

css:

#cont
{
    width: 300px;
    background: yellow;
    overflow: auto;
}
#left
{
    float: left;
    width: 64%;
    background: lightblue;
}
#right
{
    width: 36%;
    background: red;
    float: right;
}

#subLeft
{
    width: 50%;
    float: left;
    background: cyan;
}
#subRight
{
    width: 50%;
    float: right;
    background: green;
}