5 replies [Last post]
earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 31 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

I've tried everything to get my 2 columns to float inside my parent DIV, but nothing working. I've tried floating them, but all that does it totally wreck my other DIVs. I've tried positioning the column DIV's inside the parent, but that isn't working either.

I always thought that an element could be positioned absolutely in reference to its parent. Odd.

I'm stucks guys.... I need help. I'd like to see if anyone could figure this out. Links are below.

http://www.expresiv.com/float-test.html
http://www.expresiv.com/float-test.css

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 48 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Float: Right Float: Left "CHALLENGE"

your links -

a) There is nothing in the html file
b) The css file does not contain any floated divs.

On your problem - Try adding position: relative; to your parent div.

Regards
Day

The only way to learn is to do it yourself

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 31 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Float: Right Float: Left "CHALLENGE"

Try taking a look at the HTML again... the path to the CSS was wrong, but it's fixed now.

I didn't have any floats set, but the "floatRight" and "floatLeft" are the ones that need to be floated.

If I set the position of my parent to relative it totally wrecks my entire natural flow of the page. So, that's not working either.

I've uploaded a new HTML file... you mind looking again?

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Try this code...

Simply, the widths for the float divs where too long. You need to take into account that any padding or margin will add to the overall width of the divs (i.e. a div with a width set to 230px plus a left & right margin of 10px will make the div 250px wide... this is known as the box model).

Also, you'll need to set a height for the content div (as I have below).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
/* CSS Document */
body {margin: 0;}

#top {
	margin: 6px;
	width: 500px;
	height: 200px;
	background-color: #666;
	}
	
#main {
	padding: 6px 0;
	margin: 0 6px;
	width: 500px;
	background-color: #666;
	}

#content {
	padding: 6px 0;
	margin: 0 6px;
	height: 100px;
	background-color: #eee;
	}
	
#blockLeft {
	float: left;
	margin: 0 0 0 6px;
	width: 235px; 
	height: 100px;
	background-color: #cccccc;
	}
	
#blockRight {
	float: right;
	margin: 0 6px 0 0;
	width: 235px;
	height: 100px;
	background-color: #999999;
	}
	
#footer {
	width: 500px;
	height: 20px;
	margin: 6px;
	background-color: #cc9900;
}
-->
</style>
</head>

<body>

<div id="top">..</div>
<div id="main">
	<div id="content">
		<div id="blockLeft">..</div>
		<div id="blockRight">..</div>
	</div>
</div>
<div id="footer">..</div>




</body>
</html>

The next sentence is true. The previous sentence is false. Discuss...

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 31 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Float: Right Float: Left &quot;CHALLENGE&quot;

Very Nice.... it shows up in Mozilla perfectly, but IE6 jacks it all up. IE6 puts to much margin on the right and left sides. When I decrease the margins on the floats, it fixes IE6, but then Mozilla gets jacked.

Any tips?

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 31 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Float: Right Float: Left &quot;CHALLENGE&quot;

Actually... I figured it out. Instead of putting a margin on the floats, I put a padding on the content container.

Thanks!!