[Solved] Stretch the div

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;
}

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 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 need to help you.

Try floats.

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 else you need when using floats, namely containg them and clearing them

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 have a Google for "easy float clearing"

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: hidden; to the container?

Exactly. Never thought 'overflow: hidden;' would do something like that :? Thanks

@ OP: See also Enclosing Float Elements.

cheers,

the real gary

Can we mark this as solved, or does anybody else want to chime in with a float clearing website?