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

redarrow

redarrow

Expert Member
Joined
Dec 30, 2005
Messages
2,411
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. :)
 
T

texo

Expert Member
Joined
Jun 14, 2006
Messages
1,586
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;
}
 
T

texo

Expert Member
Joined
Jun 14, 2006
Messages
1,586
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;
}
 
redarrow

redarrow

Expert Member
Joined
Dec 30, 2005
Messages
2,411
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?
 
redarrow

redarrow

Expert Member
Joined
Dec 30, 2005
Messages
2,411
texo said:
See my post above...
Click to expand...
Sorry missed that one..

Without the floats it is perfect..
I'm just not sure if I can work that into my code - my actual application is obviously somewhat more complex than this example..

But maybe I need to rework something.. :crying:
 
M

murraybiscuit

Executive Member
Joined
Oct 10, 2008
Messages
6,483
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.
 
redarrow

redarrow

Expert Member
Joined
Dec 30, 2005
Messages
2,411
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%.. :eek:
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.
Top