Hello,
here is a simple code with two divs:
div.a
{
position: relative;
background-color: #880000;
width: 200px;
left: 20px;
top: 30px
}
div.b
{
position: relative;
background-color: #008800;
width: 100px;
left: 20px;
top: 15px
}
How could I make the red div to stretch vertically so that the green nested div fits in it?
if I understand you
if I understand you correctly, the first thing to do is lose the positioning and replace with margins. Then, to avoid margin collapsing, add a 1px padding (or border) to the outer element. And please, use a doctype.
div.a1 {
background-color: #880000;
width: 200px;
margin: 30px 0 0 20px;
padding: 1px;
}
div.b2 {
background-color: #008800;
width: 100px;
margin: 15px 0 0 20px;
}
Div class a
Div class b
edit// come to think of it, you need to change your class names as well. Don't use names that are html elements (both a and b are).
Thank you for your
Thank you for your response.
My page is a valid XHTML Strict and the class names are more meaningful and not tag names also I just didn't bother to make the code valid in this example, sorry.
It seems that your suggestion to use margins helped, thank you. But now I came up with another problem: how could I place a third div on the right side of the second one? It should look like this:
|-------------------------|
|.Div.A...................|
|.........................|
|.|-------|....|-------|..|
|.|.Div.B.|....|.Div.C.|..|
|.|-------|....|-------|..|
|-------------------------|
If I try to place Div C using margins, it goes to the bottom of Div B. I tried using other HTML elements instead of div (p, span) and various display and other CSS properties to force Div B not to make line break after it, but I couldn't find a way to do it.
P. S.: Sorry, I didn't bother to write any HTML this time, and I only need your response about CSS positioning Anyway I think it's a bit easier to understand what I want this way than reading the HTML.
Thank you.
Don't guess at what we
Don't guess at what we need to help you.
Try floats.
I tried it, but then the
I tried it, but then the first problem occurs: div A doesn't stretch and other divs appears out of it.
Okay, so go read up on what
Okay, so go read up on what else you need when using floats, namely containg them and clearing them
Ok, I solved the problem by
Ok, I solved the problem by adding to the end of div A. Isn't there a way to do it without such workaround?
http://j-cafe.com/floats.html
Excellent explanation. Also
Excellent explanation.
Also have a Google for "easy float clearing"
http://www.positioniseverythi
http://www.positioniseverything.net/easyclearing.html
The '21st Century Style' workaround seems a bit nicer But anyway, CSS needs some improvement (some new property or a new possible value to 'display' or some other property) to handle such layout needs, IMHO.
Thanks for your help, I think I'll get everything in place now.
like adding overflow:
like adding overflow: hidden; to the container?
Exactly. Never thought
Exactly. Never thought 'overflow: hidden;' would do something like that :? Thanks
Ed Seedhouse
http://j-cafe.com/floats.html
What's with this guy signing my name?

@ OP: See also Enclosing Float Elements.
cheers,
the real gary
Can we mark this as solved,
Can we mark this as solved, or does anybody else want to chime in with a float clearing website?