Try this code, hope this will help you
<!--- Html ->
<div id="container">
<div id="header">Header</div>
<div id="content">
<div id="post01" class="post">Post 01</div>
<div id="post02" class="post">Post 01</div>
</div>
<div id="navigation">
<div id="menu">Menu</div>
</div>
<div id="footer">Footer</div>
</div>
<!--- CSS ->
html, body, body *{margin:0; padding:0;}
body{font:normal 12px/16px Arial, Helvetica, sans-serif;}
#container {
width: 960px;
margin: 15px auto;
overflow:hidden;
}
#header {
color: white;
height: 40px;
margin-bottom: 10px;
padding: 5px;
background:blue;
width:950px
}
#content {
padding: 10px;
width: 700px;
float:left;
background:red;
overflow-x:hidden;
}
#navigation {
float: left;
width: 220px;
padding: 10px;
background:#090;
overflow-x:hidden;
}
#footer {
font-size: 13px;
color: white;
padding: 5px;
float:left;
clear: both;
text-align:center;
width:950px;
background:#0C6;
}
.post {
float:left;
clear:both;
text-align: left;
padding: 12px;
color: black;
margin-bottom: 20px;
width:96%;
background:#999;
}
#menu {
background-color: white;
padding: 15px;
margin: 0px auto 15px;
width:87%;
float:left;
color: black;
text-align: right;
background:#33C;
}
Remove background color as per your requirement.
Thanks & Regards
Jaison James
On Thu, Jun 23, 2011 at 3:52 PM, Antonello D'Ippolito <
[email protected]> wrote:
> Hi all,
>
> I'd like to make a simple two column layout for a website, with CSS and
> DIVs, like the following:
>
> <http://www.adworld.it/varie/css-chrome.png>
>
>
> It works fine in Chrome, Firefox and Safari (update versions) but in
> Opera11 and IE9 it makes something like the following:
>
> <http://www.adworld.it/varie/css-opera.png>
>
>
> HTML code:
> <body>
> <div id="container">
> <div id="header"></div>
> <div id="navigation">
> <div id="menu"></div>
> </div>
> <div id="content">
> <div id="post"></div>
> </div>
> <div id="footer"></div>
> </div>
> </body>
>
>
> CSS code:
> div#container {
> width: 960px;
> margin: 15px auto;
> }
>
> div#header {
> color: white;
> height: 40px;
> margin-bottom: 10px;
> padding: 5px;
> }
>
> div#content {
> padding: 10px;
> width: 700px;
> }
>
> div#navigation {
> float: right;
> width: 260px;
> padding: 10px;
> }
>
> div#footer {
> font-size: 13px;
> color: white;
> padding: 5px;
> clear: both;
> text-align:center;
> }
>
> div#post {
> text-align: left;
> padding: 12px;
> color: black;
> width: 90%;
> margin-bottom: 20px;
> }
>
> div#menu {
> background-color: white;
> padding: 15px;
> margin: 0px auto 15px;
> width: 90%;
> color: black;
> text-align: right;
> }
>
> What's the problem?
>
> Thanks,
> Antonello
>
> --
> --
> You received this because you are subscribed to the "Design the Web with
> CSS" at Google groups.
> To post: [email protected]
> To unsubscribe: [email protected]
--
Regards,
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
