Question about layout and overall structure

**HarshaB** · 21-11-2009

Starting with CSS and I want to know what method is to pass this type of layout:
image 1

At this type:
image 2

How to just create 2 "block-container"?
image 3

**Katty** · 21-11-2009

I have an example for the 1st structure:

style.css

HTML Code:

body {
 background: #DDEEAA;
 margin: 0;
 padding: 0;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 text-align:center;
}
 
#container {
 background-color: #FFFFFF;
 margin: 10px auto;
 border: 1px solid;
 width: 970px; 
}
 
#top {
 height: 100px; 
 width: auto;
 display: block;
 background: #FFFF00;
 border: 1px solid; 
 margin: 2px;
 padding: 0;
}
 
#navbar{
 height: 50px; 
 width: auto;
 display: block;
 background: #FFFF00;
 border: 1px solid; 
 margin: 2px;
 padding: 0;
}
 
#main {
 width:970px;
 height: auto;
 display:block;
}
 
#left{
 width:200px;
 height: auto;
 float:left;
 background: #FFFF00;
 border: 1px solid; 
}

#center{
 width:560px;
 height: auto;
 float:left;
 background: #FFFF00;
 border: 1px solid; 
}

#right{
 width:200px;
 height: auto;
 float:right;
 background: #FFFF00;
 border: 1px solid; 
}
 
#footer{
 height: 50px; 
 width: auto;
 bottom: 0;
 background: #FFFF00;
 border: 1px solid; 
 margin: 2px;
 padding: 0;
}

index.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
@import url("script/style.css" );
</style>
</head>
<body>
<div id="container">

  <div id="top">  
   test top
  </div>
  
  <div id="navbar">  
   test navbar
  </div>
 
  <div id="main">

  <div id="left">  
    test left
   </div>
   
   <div id="center">  
    test center
   </div>
  
   <div id="right">  
    test right
   </div>
  
  </div>

 <div id="footer">  
   test footer
  </div>

 </div>

</body>
</html>

You could easily modify the code to test if the second structure works.

**HarshaB** · 21-11-2009

The hit of 2 containers seems the right solution. It's simple to set up. So to use your example you need to write a code like (imagining that 2 "containers" have the same CSS properties):

In the CSS:

HTML Code:

#container1 {
background-color: # C0C0C0; 
margin: auto; 
overflow: hidden; 
width: 975px; 
}
#container2 {
background-color: # C0C0C0; 
margin: auto; 
overflow: hidden; 
width: 975px; 
}

Then in the HTML:

Replace #container2 between #main and #footer
What is:

HTML Code:

<body> 
<div id="container1"> 
<div id="top"> </div> 
<div id="navbar"> </div> 
<div id="main"> 
<div id="left"> </div> 
<div id="center"> </div> 
<div id="right"> </div> 
</div> 
<div id="container2"> 
blablabla ... 
</div> <! - end # container2 -> 
<div id="footer"> 
</div> 
</div> <! - end # container1 -> 
</body>

**Katty** · 21-11-2009

The same thing contained in HTML can also be written as:

HTML Code:

<body> 
<div id=" container1"> 
<div id="top"> </ div> 
<div id="navbar"> </ div> 
<div id="main"> 
<div id="left"> </ div> 
<div id="center"> </ div> 
<div id="right"> </ div> 
</ div> 
</ div> <! - end # container1-> 
<div id=" container2"> 
blablabla ... 
</ div> <! - end # container2-> 
<div id=" footer "> 
</ div> 
</ body>