Hi all - I cant seem to get this 2 col setup working inside a parent "content" div, it works in ie but not FF or Safari. Should I approach in a completely different way or does it just need a tweak. Thanks I have tried eliminating and adding various properties and elements including margins and padding and also using firebug but to no avail.
Further - What im trying to say is that the 2 divs with content "contentmain" and "contentright" are not "opening up" filling vertically the main content div that they are children of. Only in IE does it work. Not in FF where the content DIV collapses. I do not want to use a table for this which im sure would work, rather I'd like to use divs in a float arrangement. I tried absolute postioning but the main content div sollapsed again.
Hope you can help and hope I have put this code in tags properly as its my first time posting code.
CSS
====
#topnavbg {
position:absolute;
left:0px;
top:0px;
width:100%;
height:34px;
z-index:100;
background-image: url(images/bg-topnav.gif);
margin-top: 0px;
margin-bottom: 0px;
border: 0
}
#topnav {
position:relative;
left:0px;
top:0px;
width:990px;
height:34px;
z-index:1000;
margin-top: 0px;
margin-bottom: 0px;
border: 0;
}
#header {
position:relative;
left:0px;
width:990px;
height:178px;
z-index:1;
background-image: url(images/bg-head-content-main.jpg);
margin-top: -1px;
margin-bottom: 0px;
border: 0;
}
body {
font-family:Helvetica,Arial,sans-serif;
text-align: center;
background-image:url(images/bg-head-content.gif);
background-repeat:repeat-x;
margin-top: 0px;
}
html {
font-family:Helvetica,Arial,sans-serif;
}
p {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
line-height:16px;
text-align: left;
color:#838383;
margin-top: 0px;
margin-bottom: 0px;
}
#container {
padding: 0px;
width: 990px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
border: 0;
}
#logo {
position:absolute;
left:76px;
top:57px;
width:198px;
height:116px;
z-index:101;
}
#content-top-img {
position:relative;
left:0px;
width:990px;
height:68px;
z-index:101;
padding: 0px;
border: 0px;
margin-top: 0px;
}
#content {
position:relative;
left:0px;
width:990px;
height:auto;
z-index:1;
background-image: url(images/bg-content.png);
margin-top: 0px;
}
#contentmain {
float: left;
width: 625px;
height:auto;
margin-left: 50px;
}
#contentright {
float:right;
margin-right: 50px;
width: 225px;
height:auto;
}
#content-bot-img {
position:relative;
left:0px;
width:990px;
height:38px;
z-index:101;
margin: 0px;
border: 0px;
background-image: url(images/content-bot.gif);
}
#footer {
position:relative;
left:0px;
width:990px;
height:auto;
z-index:1;
clear: both;
}HTML
=======
<!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=utf-8" />
<title>Firefuel</title>
</head>
<body>
<div id="topnavbg"><img src="images/bg2-topnav.gif" /></div>
<div id="container">
<div id="logo"><img src="images/logo.gif" alt="" width="198" height="116" /></div>
<div id="topnav"></div>
<div id="header"></div>
<div id="content-top-img"><img src="images/content-top.gif" width="990" height="68" /></div>
<div id="content">
<div id="contentmain">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at eros ac felis lacinia varius eu venenatis nisl. Praesent turpis libero, mollis et sodales id, pretium vel ipsum. Pellentesque pharetra mi nec urna fringilla sed tempus lacus eleifend.</p>
<p>Proin semper mi sit amet elit faucibus nec mattis libero vulputate. Donec lacus nisl, pharetra non ultricies a, dignissim et mauris. Integer ac interdum ante. Proin et elit nulla. Pellentesque quis mi enim, eu mollis ligula. Proin id magna sed ligula accumsan euismod. Integer urna orci, fermentum sed bibendum et, tincidunt condimentum purus.
</p>
</div>
<div id="contentright">
<ul>
<li>Lorem ipsum
<li>Lorem ipsum
<li>Lorem ipsum
<li>Lorem ipsum
<li>Lorem ipsum
</ul>
</div>
</div>
<div id="content-bot-img"></div>
<div id="footer"><p>This is where the FOOTER will be</p></div>
</div>
</body>
</html>