Layout freaks out. (CSS - not much code)

csshelp

12-07-2006, 06:03 PM

Well in IE 6 everything shows up ok, but there is some whaitespace between elements I don't want... In Fire fox the #container seems to freak out and cut the page off.

I'm currently testing, so it's nothing great.

-Thanks.

Here is the CSS code.

#container {
/*margin-left:10%;
margin-right:10%;*/
width:800px;
border: 1px solid #000000;

}

#topleftlogo {
float:left;
height:98px;
width:291px;

}

#toprightbg {
float:right;
width:509px;
height:78px;
background-color:#FFFFFF;
}

#toprightnav {
float:right;
width:499px;
height:20px;
background-color:#C0C0C0;
padding-left:10px;

}

#banner {
width:800px;
height:183px;

}

#bannerbottom {
width:800px;
height:35px;
background-color:#000000;

}

#leftbar {
background-color:#CCCCCC;
width:291px;
float:left;
height:400px;

}

#rightbar {
background-color:#666666;
float:right;
width:509px;
height:400px;

}

#footer {
width:800px;
height:35px;
background-color:#000000;

}

html 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" />
<meta content="description" name=description>
<meta content="keywords" name=keywords>
<LINK href="css/rewrite.css" type=text/css rel=stylesheet>
<title>Title</title>
</head>

<body>

<div id="container">

<div id="topleftlogo"><img width="291" height="98" border="0"/></div>

<div id="toprightbg"><img width="509" height="78" border="0" /></div>


<div id="toprightnav"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> |
<a href="#">Link 6</a> | <a href="#">Link 6</a>
</div> 

<div id="banner"><img width="800" height="183" border="0" /></div>

<div id="bannerbottom">
</div>

<div id="leftbar">
</div>

<div id="rightbar">
</div>

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


</div>
</body>
</html>

_Aerospace_Eng_

12-07-2006, 06:10 PM

Firefox isn't freaking out. Its doing what its supposed to. Once you float elements they are taken out of flow. You need to clear them.
<!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" />
<meta content="description" name="Description" />
<meta content="keywords" name="Keywords" />
<title> </title>
<style type="text/css">
#container {
width:800px;
border:1px solid #000;
margin:auto;
}

#topleftlogo {
float:left;
height:98px;
width:291px;
}

#toprightbg {
float:right;
width:509px;
height:78px;
background-color:#FFF;
}

#toprightnav {
float:right;
width:499px;
height:20px;
background-color:silver;
padding-left:10px;
}

#banner {
height:183px;
}

#bannerbottom {
height:35px;
background-color:#000;
}

#leftbar {
background-color:#CCC;
width:291px;
float:left;
height:400px;
}

#rightbar {
background-color:#666666;
float:right;
width:509px;
height:400px;
}

#footer {
height:35px;
background-color:#000;
}

.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>
<title>Title</title>
</head>
<body>
<div id="container">

<div id="topleftlogo"><img src="img.gif" width="291" height="98" border="0" alt="" /></div>
<div id="toprightbg"><img src="img.gif" width="509" height="78" border="0" alt="" /></div>
<div class="clear"> </div>

<div id="toprightnav"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> | <a href="#">Link 6</a> | <a href="#">Link 6</a> </div>

<div id="banner"><img src="img.gif" width="800" height="183" border="0" alt="" /></div>
<div id="bannerbottom"></div>
<div id="leftbar"> </div>
<div id="rightbar"> </div>
<div class="clear"> </div>
<div id="footer"> </div>

</div>
</body>
</html>

csshelp

12-07-2006, 06:13 PM

Wow, thanks for the fast reply. Thanks, I've been reading, and overlooked, or the book neglected to mention this.

Again thanks! :)

VIPStephan

12-07-2006, 06:13 PM

By a short glimpse at your code it looks like you're just switching from table based website coding and haven't quite understood the purpose/advantage of CSS based layout (with the mandatory foundation of semantic HTML (http://simon.incutio.com/archive/2003/08/28/structuralVsSemantic)) yet. So read on semantics as this may remove some of your issues.

Plus make sure your HTML code is valid (http://validator.w3.org/) before you start styling with CSS.

Ah, dammit! Too slow by searching for good inspirational sources and words...