Page 1 of 1

float problem

Posted: Wed Jul 04, 2007 12:47 pm
by vchris
The problem I am facing is how can I use float:left; and not have the outer container ignore my inner container? I know the float is the problem but is there a solution to this. I need to keep the float.

This is just testing code.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container {
	border: 1px solid red;
}
#container #content {
	border: 1px solid green;
	float: left;
}
</style>
</head>

<body>
<div id="container">
	<div id="content">
		<p>asadffaohselfh es fsaf efas efsef safe f sef sfs fsa f
		eas fsef saf sa fsaf saf saef sa fas fa fsa f sa
		asef saf sa ff saf sa fa fas fas sf as fesa</p>
		<p>asadffaohselfh es fsaf efas efsef safe f sef sfs fsa f
		eas fsef saf sa fsaf saf saef sa fas fa fsa f sa
		asef saf sa ff saf sa fa fas fas sf as fesa</p>
		<p>asadffaohselfh es fsaf efas efsef safe f sef sfs fsa f
		eas fsef saf sa fsaf saf saef sa fas fa fsa f sa
		asef saf sa ff saf sa fa fas fas sf as fesa</p>
		<p>asadffaohselfh es fsaf efas efsef safe f sef sfs fsa f
		eas fsef saf sa fsaf saf saef sa fas fa fsa f sa
		asef saf sa ff saf sa fa fas fas sf as fesa</p>
		<p>asadffaohselfh es fsaf efas efsef safe f sef sfs fsa f
		eas fsef saf sa fsaf saf saef sa fas fa fsa f sa
		asef saf sa ff saf sa fa fas fas sf as fesa</p>
		<p>asadffaohselfh es fsaf efas efsef safe f sef sfs fsa f
		eas fsef saf sa fsaf saf saef sa fas fa fsa f sa
		asef saf sa ff saf sa fa fas fas sf as fesa</p>
		<p>asadffaohselfh es fsaf efas efsef safe f sef sfs fsa f
		eas fsef saf sa fsaf saf saef sa fas fa fsa f sa
		asef saf sa ff saf sa fa fas fas sf as fesa</p>
		<p>asadffaohselfh es fsaf efas efsef safe f sef sfs fsa f
		eas fsef saf sa fsaf saf saef sa fas fa fsa f sa
		asef saf sa ff saf sa fa fas fas sf as fesa</p>
	</div>
</div>
</body>
</html>

Posted: Wed Jul 04, 2007 1:21 pm
by superdezign
Ignore it? What? What do you mean?

Posted: Wed Jul 04, 2007 1:48 pm
by vchris
collapses

Posted: Wed Jul 04, 2007 1:54 pm
by superdezign
I think I know what you mean.

Stretching elements to fit floated elements.

Posted: Thu Jul 05, 2007 2:11 am
by Gente

Code: Select all

overflow:hidden;
for Firefox and

Code: Select all

width:XX px;
for IE

Posted: Thu Jul 05, 2007 4:05 am
by matthijs
Or float the parent container as well.

Or use a clearing element below the #content.

Posted: Thu Jul 05, 2007 8:44 am
by vchris
Great response thank you guys. That's exactly what I meant.

Posted: Thu Jul 05, 2007 10:40 am
by superdezign
Heh. I have all three of those solutions in the link. :P

However, for the overflow:hidden, you should give it a height:100% for IE.