float problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

float problem

Post 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>
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Ignore it? What? What do you mean?
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

collapses
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

I think I know what you mean.

Stretching elements to fit floated elements.
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post by Gente »

Code: Select all

overflow:hidden;
for Firefox and

Code: Select all

width:XX px;
for IE
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Or float the parent container as well.

Or use a clearing element below the #content.
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

Great response thank you guys. That's exactly what I meant.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
Post Reply