Div Trouble, left div overlaps main div...

Mk.9

03-18-2005, 08:31 PM

Hi!

I've just started using css (I know it's a bit late) And i ran into trouble fairly quickly... Thats why I thought you guys could help me. The site looks good in Internet Explorer, but in Firefox the left div seems to overlap the main div and it just looks weird...

That's how it's supposed to look like:
http://www.ckolon.no/explorer.gif

And this is just wrong:
http://www.ckolon.no/firefox.gif

HTML:
<body>
<div id="main">
<div id="left">
<hr style="clear: both; visibility: hidden;"></div>
</div><div id="footer"></div>
</body>
</html>

CSS:
* {
margin: 0;
padding: 0;
}

body {
background-color: #ECECEC;
color: #000000;
font-size: 8pt;
font-family: "Trebuchet MS", Verdana, arial, Tahoma, sans-serif;
text-align: center;
}

a {
color: #C7E813;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}

pre {
color: #564b47;
font-size: 11px;
background-color: #fefefe;
font-family: Courier, Monaco, Monospace;
}

p,h1, h3, pre {
padding: 5px 4px;
margin: 0px;
}

h3 {
font-size: 13px;
text-transform:uppercase;
color: #FFFFFF;
background-color: transparent;
}

#main {
width: 700px;
margin: 0px auto;
text-align: left;
padding: 20px;
background-color: #FFFFFF;
border-left: 5px solid #E4E4E4;
border-right: 5px solid #E4E4E4;
}

#footer {
width: 700px;
margin: 0px auto;
text-align: right;
padding: 20px;
height: 50px;
background-color: #FFFFFF;
border-left: 5px solid #E4E4E4;
border-right: 5px solid #E4E4E4;
}

#left {
width: 410px;
text-align: left;
background-color: #ffffff;
border-right: 1px #AFCB17 solid;
float: left;
height="100%"
}

_Aerospace_Eng_

03-18-2005, 09:10 PM

we need to see the html also

Mk.9

03-18-2005, 09:27 PM

Here's the html...

<body>
<div id="main">
<div id="left">
<hr style="clear: both; visibility: hidden;"></div>
</div><div id="footer"></div>
</body>
</html>

_Aerospace_Eng_

03-18-2005, 09:48 PM

try this for your css
* {
margin: 0;
padding: 0;
}

html,body {
background-color: #ECECEC;
color: #000000;
font-size: 8pt;
font-family: "Trebuchet MS", Verdana, arial, Tahoma, sans-serif;
text-align: center;
height:100%;
}

a {
color: #C7E813;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}

pre {
color: #564b47;
font-size: 11px;
background-color: #fefefe;
font-family: Courier, Monaco, Monospace;
}

p,h1, h3, pre {
padding: 5px 4px;
margin: 0px;
}

h3 {
font-size: 13px;
text-transform:uppercase;
color: #FFFFFF;
background-color: transparent;
}

#main {
width: 700px;
height:100%;
margin: 0px auto;
text-align: left;
padding: 20px;
background-color: #FFFFFF;
border-left: 5px solid #E4E4E4;
border-right: 5px solid #E4E4E4;
}

#footer {
width: 700px;
margin: 0px auto;
text-align: right;
padding: 20px;
height: 50px;
background-color: #FFFFFF;
border-left: 5px solid #E4E4E4;
border-right: 5px solid #E4E4E4;
}

#left {
width: 410px;
text-align: left;
background-color: #ffffff;
border-right: 1px #AFCB17 solid;
float: left;
height:100%;
}
your had height=100% in your #left css and for firefox in order to get percentages for heights to work you have to apply it to the html element also

Mk.9

03-18-2005, 10:36 PM

your had height=100% in your #left css and for firefox in order to get percentages for heights to work you have to apply it to the html element also

What am i putting in the HTML? - i'm pretty much a no0b in this area...

_Aerospace_Eng_

03-18-2005, 11:28 PM

u put nothing in your html almost every element can be defined in css, you just dont use = signs when you are coding css, the html was fine