Layout problems (learning css) [Archive]

KurveMedia

10-02-2006, 05:55 AM

I have a layout that im doing in css and im having a problem with the wrapper div in my layout working correctly in firefox. below is what it looks like in fire fox and in IE.
Firefox
http://i32.photobucket.com/albums/d22/OH10/imagestorage/firefox.jpg

IE
http://i32.photobucket.com/albums/d22/OH10/imagestorage/IE.jpg

My css
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
background-color:#003366;
}
#wrapper {
width: 770px;
margin: 0px auto 0px auto;
background-color:#FFFFFF;
border-left:1px solid #666666;
border-right:1px solid #666666;
height:100%;
}
#header {
border: 1px solid #ccc;
margin: 5px 5px 5px 5px;
height: 70px;
padding: 10px;
background-color: #C9C9BE;
}
#navbar {
border: 1px solid #ccc;
margin: 0px 5px 5px 5px;
padding: 4px;
background-color: #A3A38F;
}
#centercolumn {
margin: 0 5px 5px 5px;
display: inline; /* IE Hack */
padding: 0px;
width: 98.4%;
float: left;
min-height: 300px;
}
* html #centercolumn {height:300px} /* IE Min-Height Hack */

#footer {
background-color: #A3A38F;
margin: 0 5px 5px 5px;
display: inline; /* IE Hack */
padding: 4px;
float: left;
width: 97.7%;
}

#google{
background-color:#006699;
height:62px;
}

#welcome{
background-color:#999999;
padding-left:.5em;
padding-right: .5em;
padding-bottom:.5em;
}

#latestnews{
background-color:#333333;
padding-left:.5em;
padding-right: .5em;
padding-bottom:.5em;
}

#pointsstanding{
background-color:#00CCFF;
padding-left:.5em;
padding-right:.5em;
padding-bottom:.5em;
}

#raceresults{
background-color:#3399FF;
padding-left:.5em;
padding-right:.5em;
padding-bottom:.5em;
}

my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Layouts - 1 Column Layout - 34</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="wrapper">

<div id="header">
navigation</div>

<div id="navbar">Flash Section </div>

<div id="centercolumn">
<div class="style1" id="google">Google Adsense Here</div>
<div id="welcome">Welcome Text Here</div>
<div id="latestnews">Latest News Here</div>
<div id="pointsstanding">Points Standing Here</div>
<div id="raceresults">Race Resilts Here</div>
</div>
<div id="footer">Footer</div>
</div>

</body>
</html>

Any help would be great, im tryin to learn this css layout deal, not as easy as i thought it would be. but i know its really powerful.

Thanks in advance
KurveMedia

_Aerospace_Eng_

10-02-2006, 06:08 AM

Why were you floating everything? That was your main problem in Firefox.
Try this
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
background-color:#036;
}
#wrapper {
width: 770px;
margin: auto;
background-color:#FFF;
border-left:1px solid #666666;
border-right:1px solid #666666;
}
#header {
border: 1px solid #ccc;
margin: 5px;
height: 70px;
padding: 10px;
background-color: #C9C9BE;
}
#navbar {
border: 1px solid #ccc;
margin: 0 5px 5px 5px;
padding: 4px;
background-color: #A3A38F;
}
#centercolumn {
margin: 0 5px 5px 5px;
padding: 0px;
min-height:300px;
}
* html #centercolumn {height:300px} /* IE Min-Height Hack */

#footer {
background-color: #A3A38F;
margin: 0 5px 5px 5px;
padding: 4px;
}

#google{
background-color:#069;
height:62px;
}

#welcome{
background-color:#999;
padding:0 0.5em 0.5em 0.5em;
}

#latestnews{
background-color:#333;
padding:0 0.5em 0.5em 0.5em;
}

#pointsstanding{
background-color:#0CF;
padding:0 0.5em 0.5em 0.5em;
}

#raceresults{
background-color:#39F;
padding:0 0.5em 0.5em 0.5em;
}
A div will expand to fit its containing elements width.