13 replies [Last post]
MBIK
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

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
}

Div class a
Div class b

How could I make the red div to stretch vertically so that the green nested div fits in it?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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).

MBIK
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

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 Smile 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 Smile Anyway I think it's a bit easier to understand what I want this way than reading the HTML.

Thank you.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Don't guess at what we

Shock

Don't guess at what we need to help you.

Try floats.

Verschwindende wrote:
  • CSS doesn't make pies

MBIK
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

MBIK
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

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?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

http://j-cafe.com/floats.html

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Excellent explanation. Also

Excellent explanation.

Also have a Google for "easy float clearing" Wink

Verschwindende wrote:
  • CSS doesn't make pies

MBIK
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

http://www.positioniseverythi

http://www.positioniseverything.net/easyclearing.html
The '21st Century Style' workaround seems a bit nicer Smile 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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

like adding overflow:

like adding overflow: hidden; to the container?

MBIK
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

Exactly. Never thought

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 18 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Ed Seedhouse


What's with this guy signing my name? Wink

@ OP: See also Enclosing Float Elements.

cheers,

the real gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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?

Verschwindende wrote:
  • CSS doesn't make pies