Little bit of css help needed

[edmarriner]

Hey,

I need a bit of css help. Ive got a basic layout for my new website but i cant seem to get the white box which everything is held in to fully strech arounf everything.

Its working in IE but not in firefox or opera.

heres the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #6990D3;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
#wrap {
background-color:#fff;
width: 550px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
padding: 0px;
position: relative;
}
#topbar {
background-color:#0066CC;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
border-bottom-color: #003399;
clear: both;
}
#banner {
background-color:#0066CC;
height: 50px;
margin: 7px;
}
#nav {
background-color:#0066CC;
height: 20px;
margin-top: 7px;
margin-right: 7px;
margin-left: 7px;
text-align: center;
word-spacing: 35px;
}
#welcome {
background-color:#0066CC;
width: 175px;
float: left;
height: 200px;
margin-top: 7px;
margin-left: 7px;
}
#content {
background-color:#0066CC;
float: right;
width: 353px;
height: 250px;
margin: 7px;
}
#blog {
background-color:#0066CC;
float: left;
width: 175px;
height: 43px;
text-align: center;
font-size: 24px;
margin-bottom: 7px;
margin-left: 7px;
margin-top: 7px;
}
#left {
float: left;
}
#right {
float: right;
}
-->
</style>
</head>

<body>
<div id="wrap">
<div id="topbar">Blog RSS Sitemap</div>

<div id="banner">banner</div>
<div id="nav">Home Blog Articals Portfolio Services Contact </div>
<div id="welcome">welcome</div>
<div id="content">content</div>
<div id="blog">blog!</div>
</div>
</body>
</html>

any ideas?

cheers,
-ed

 

[lee101]

try adding

clear:both;

to #wrap
it sometimes works, but not always

 

[Jim_]

The problem is being caused by your use of floats. The container stretches to fit the banner and nav because they are not floated.

One easy fix would be to a add empty <div> layer after the 'blog' layer and give it these properties: clear:both; height: 0px; overflow: hidden;

If you don't want to add the extra clearing div, you could give this method a try as well.

 

[hairat angaiz]

hi

#content {
background-color:#0066CC;
float: right;
width: 353px;
height: 250px;
margin: 7px;
padding: 0 2px;
}


try it !!