Member Avatar for spookies

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>
  • 2 Contributors
  • 3 Replies
  • 124 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by macneato
Member Avatar for macneato

Not exactly sure what you saying. But lets give this a bash. Replace the following IDs

#content {
	position:relative;
	left:0px;
	width:990px;
	height:auto;
	z-index:1;
	background-image: url(images/bg-content.png);
	margin-top: 0px;
	float:left;

}

#contentmain {
	float: left;
	width: 625px;
	height:auto;
	margin-left: 50px;
	
}
#contentright {
	position:relative;
	margin-left: 675px;
	width: 225px;
	height:auto;
}

By the way, none of you li's are closed

commented: Excellent! - Considering my poor explanation of the problem, macneato got it sorted first time. Many Thanks +0
Member Avatar for spookies

Macneato! Thanks very much for your extremely prompt help. You'll have to excuse my poor explanation of the problem I had, I'll try and be more descriptive for all next time.

I really got stuck and was trawling search engines, tutorials, vids for ages after trying myself. Glad I found your community, really am impressed with the speed that all your threads seem to get read and answered in.

Funnily enough I did find a vid tutorial late last night that used the method (or similar) that you supplied that is to just float one of the DIVS and give the other (the one on the right) enough margin to clear it. My baby daughter kinda stopped me watching it though!

Thanks for the heads up on the </li>

All the best to you. I will now look to see how I comment on you as a responder.

Thanks

Member Avatar for macneato

No problem Spookies :) glad to be of help.

The trick is, we floating the inital element left, then position the following element left of the first elements' width.

E.g.
#contentmain - width: 625px;
#contentright - margin-left: 675px *reason for the extra 50px is cause we have a margin left on the div

If we had to float #contentright, it would eventually wrap, when #contentmain ceased to continue

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.