Layout with bars and two columns

HTML & CSS
1

Hi everybody,

I have this layout:
http://img258.imageshack.us/img258/3413/layout3.gif

I have tried to do this on my own without success.
Only #box_3 has fixed width
only #box_1 has liquid height and width.
#box_2, #box_3 and #footer are fixed on the bottom of the browser.

Here is my html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <link rel="stylesheet" href="include/layout.css" type="text/css">
   <title></title>
   </head>
   <body>
      <div id="bar_1">
      </div>
      <div id="bar_2">
      </div>
      <div id="main">
         <div id="box_1">

         </div>
         <div id="box_2">

         </div>
         <div id='box_3'>

         </div>
      </div>
      <div id="footer">
      </div>
   </body>
</html>

and here the CSS code:

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

#bar_1 {
   background-color: blue;
   height: 29px;
   width: 100%;
}

#bar_2 {
   background-color: yellow;
   height: 25px;
   width: 100%;
}

#main {
   position: relative;
   background-color: brown;
   width:100%;
   float:left;
}

#box_1 {
   position: absolute;
   background-color: #FF6600;
   width: 100%;
   float: left;
}

#box_2 {
   position: fixed;
   background-color: red;
   height: 179px;
   float: left;
   bottom: 0;
   margin-bottom: 37px;
}

#box_3 {
   position: fixed;
   background-color: green;
   height: 179px;
   width: 352px;
   bottom: 0px;
   margin-bottom: 37px;
   float: right;
}

#footer {
   position: fixed;
   bottom: 0px;
   background-color: cyan;
   height: 37px;
   width: 100%;
}

Please can you help me?
Can you tell me any suggestions?

Many thanks really!

2

#box_2, #box_3 and #footer are fixed on the bottom of the browser.
Hi,
A couple of questions:

Are you wanting them fixed as in position:fixed ? (I assume so by looking at your code)
Are you supporting IE6 ? (It does not support fixed positioning)

You have a combined height of 216px for you fixed divs. That is really to tall for a fixed position area. It will overpower the layout at reduced viewport heights.

3

Whether or not the layout will be usable is doubtful but in it’s simplest form it would go something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
html, body {
    margin:0;
    padding:0;
    background:#FF6600;
}
#bar-1 {
    height:29px;
    background:blue;
}
#bar-2 {
    height:25px;
    background:yellow;
}
#box-1 {
    width:100%;
    background:#FF6600;
    padding-bottom:216px; /*preserve space fixed elements*/
}
#box-2 {
    position:fixed;
    left:0;
    right:352px;
    bottom:37px;
    height:179px;
    background:red;
}
#box-3 {
    position:fixed;
    right:0;
    bottom:37px;
    height:179px;
    width:352px;
    background: green;
}
#footer {
    position:fixed;
    bottom:0;
    background:cyan;
    height:37px;
    width:100%;
}
</style>

</head>
<body>

<div id="bar-1"></div>
<div id="bar-2"></div>
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="footer"></div>

</body>
</html>
4

Great. The code works perfectly!!! Many thanks!!!

Are you wanting them fixed as in position:fixed ? (I assume so by looking at your code)

I mean all that three divs must remain blocked on the bottom while page resizing. But the way you have done that it’s perfect however.

Are you supporting IE6 ? (It does not support fixed positioning)

No it’s not important. It’s important that the page goes correctly with last generation browsers.

You have a combined height of 216px for you fixed divs. That is really to tall for a fixed position area. It will overpower the layout at reduced viewport heights.

Yeah, you’re right, but, the page will be used in a resolution of at least 800x600 and I suppose the space will be enough.

5

No problem, your welcome!

Yeah, you’re right, but, the page will be used in a resolution of at least 800x600 and I suppose the space will be enough.
As long as the visitor keeps their viewport at full height it will work. Of course you never know what their full height is since they could have 10 toolbars stacked up on their browser head. That’s just how it goes with fixed positioning and the reason you try to keep fixed elements as small as possible…

I placed a 216px bottom-padding on #box-1 so that will keep the text/content out of the bottom fixed divs.

6

Ok. Thanks for all and for the suggestions you gave me!
In case of some other problems about this matter I will post them here again.