...

View Full Version : problem nesting floated box inside absolute positioned box



snmt
02-24-2008, 12:22 PM
Hello everyone.

I'm having a small problem that's almost bringing me to the point of throwing my laptop out of the window :)

I have a div created for my main content, and inside it i'm trying to float a box to the right. It works perfectly unless i add text to my main content div, then it doesn't wrap around the div as expected, it makes the div jump down to the bottom...

here's the link: (content is the div for the main text, content2 is the div which should float left with the text wrapping around it.

http://www.talkingmakesnosense.com/test/test.html

effpeetee
02-24-2008, 12:42 PM
Try this, done in haste and may need cleaning up.:D

Frank


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>test</title>

<link href="distance.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
width: 800px;
margin: 0px;
margin-top: 20px;
background-image:url("http://img81.imageshack.us/img81/562/distrecbgse1.jpg");
background-repeat:repeat-x;
background-color: #3b3b3b;

}



#content
{display:block;
font-family: trebuchet ms;
font-size: 12px;
color: white; background-color: #FFFFFF ; text decoration: none; padding: 10px 10px; width: 740px; height:600px;
position: absolute; left: 50px; top: 55px;
background-image:url("http://img81.imageshack.us/img81/562/distrecbgse1.jpg");
background-repeat:repeat-x;
background-color: #3b3b3b;
overflow:none;


}
#content2
{margin:5px;padding:5px;
float:left;
font-family: trebuchet ms;
font-size: 12px;
color: red; background-color: #FFFFFF ; text decoration: none; width: 370px;
float:right;
}


</style>
</head>

<body>
<div id="content">
<div id="content2">
<p>
News<br>
<br>
Feb 2008<br>
<br>
What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size
</p>

</div>
<p>
What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size.
What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size
What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size
What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size
What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size
What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size.
</p>

</div>
</div>
</body>
</html>

abduraooft
02-24-2008, 12:46 PM
To apply float:right to an element, put this element before the other related elements in markup order. No need to give position:absolute to the other element.
(Your intention is not clear.)

snmt
02-24-2008, 12:52 PM
cheers for the fast responses folks!

effpeetee : what you did works perfect! so you just added that display:block; tag?

abduraooft : that's just a snippet of code from the full page, i thought my main content box would have to be absolute positioned to stop other elements such as my header div, and another div to the side of the content one making it move around.

snmt
02-24-2008, 12:58 PM
hmmm for some reason the text inside the float is now changed to red, even with a tag added specifying black, any ideas?

effpeetee
02-24-2008, 01:02 PM
I set it to red. Just change it in the div.

Frank


#content2
{margin:5px;padding:5px;
float:left;
font-family: trebuchet ms;
font-size: 12px;
color: red; background-color: #FFFFFF ; text decoration: none; width: 370px;
float:right;
}

snmt
02-24-2008, 01:06 PM
yeah I just realised! my stupidity :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum