HTML/CSS preventing floated elements from breaking out of parents?

redarrow

redarrow

Expert Member
Joined
Dec 30, 2005
Messages
2,411
Reaction score
57
Location
Port Elizabeth, South Africa
This is really giving me a headache, basically viewing the code below, I cannot understand why div2 breaks out of div1? :confused:
Code: 
<html>
<head>
<title>Bla bla bla</title>
<style type="text/css">
.div1 {
	float: left;
	width: 100%;
	padding: 10px;
	border: 1px solid red;
}

.div2 {
	float: left;
	width: 100%;
	padding: 10px;
	border: 1px solid blue;
}
</style>
</head>
<body>

<div class="div1">
Some stuff, bla bla bla
<div class="div2">
More stuff
</div>
</div>

</body>
</html>
Div2 not only breaks out of div 1, but it also expands beyond the end of browsers window.
I've tried using "width: auto;" for either one or the other, but cannot get the desired result that way either.

What I want: div1 should expand to the maximum window width and div2 should expand to the maximum width it can without breaking out of div1. In other words it should have a spacing of 10px all around as specified in div1's padding..


My understanding was that a floated element will not break out of a parent element which is also floated - am I wrong?

Any ideas on what I'm doing incorrectly or how to get the result I'm looking for?

Thanks. :)
 
The problem is that padding gets added to the size of the div, so what you're doing is adding 22px (10px either side from the padding, and 1px either side for the border) to the width of a div which is already 100% wide... that's never going to work.
If you did something like this (specifying a width for the containing element) then it will work:

Code: 
.div1 {
	float: left;
	width: 960px;
	padding: 10px;
	border: 1px solid red;
}

.div2 {
	float: left;
	width: 100%;
	border: 1px solid blue;
}
 
Look what happens when you remove the floats and widths:

Code: 
.div1 {
	padding: 10px;
	border: 1px solid red;
}

.div2 {
	padding: 10px;
	border: 1px solid blue;
}

or when you leave the first float:

Code: 
.div1 {
float:left;
width:100%;
	padding: 10px;
	border: 1px solid red;
}

.div2 {
	padding: 10px;
	border: 1px solid blue;
}
 
Hey texo :)

Thanks :)
I see your example works, except if I add a padding value to the inner div then it creates the same problem again..

Thing is, I really don't want to hardcode a width in ... there must surely be some way I can get it to expand the maximum width available?
 
i presume you have a valid doctype...

i don't really see why you need to set a div to 100% width when it displays block by default?
or why you're needing to float the parent?
perhaps we need to see your full page markup.
 
I've managed to get it working now :)
I'm not quite sure how .. I think as I was falling asleep my head rolled around on the
keyboard and something good came of it.. :erm: :D

Roughly what I did was something like this:
Code: 
<html>
<head>
<title>Bla bla bla</title>
<style type="text/css">

.div1 {
	float: left;
	width: 100%;
	border: 1px solid red;
}

.div2 {
	float: left;
	width: auto;
	margin: 10px;
	padding: 10px;
	border: 1px solid blue;
}

</style>
</head>
<body>

<div class="div1">
Some stuff, bla bla bla
<div class="div2">
More stuff
</div>
</div>

</body>
</html>
Except that in this example the inner div doesn't expand to the available width, however this does not appear to be a problem as in my application the inner div really only contains text.. and so I think all along I did not need to try and expand it to 100%.. :o
It is behaving correctly in that if I fill the inner div with content it will expand to the available space within the parent.

In my application, the parent div is not the first div in my code, it's already in an ocean of floating divs :wtf: which is why I was floating it .. :erm:
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X