SkillShare Forum - CSS Beauty - Div into a Div

Div into a Div

2006-02-04T18:42:02-05:00

maybe a begginer problem for me but help me...

i have a Div=MASTER with example 600px of width! i dont put the height beacuse i want that the Div=A and Div=B inside the Div=MASTER force the height of Div=MASTER.... but dont works! The Div=A and Div=B works the height but the Div=MASTER dont have any change in height!

what value or propeity i need!!!!

see the example please: http://www.asdivinegrace.com/div_problem/

thanks any solution?

Div into a Div

2006-02-04T19:39:34-05:00

Floated elements aren't calculated in the normal flow of the page and thus won't add any height to the container div. You should be using the body as the container anyways.

Div into a Div

2006-02-04T22:13:42-05:00

if you are working with floats it is best that you give a display:table to your containing div, yet like nick pointed out, if the main div is the one positioning elements on your page you should (could) swap it for styling the body in the css file

body {
width:600px;
margin:0 auto; /* for centering on the page*/
}

Div into a Div

2006-02-04T22:43:54-05:00

well iam dont use floats... maybe if put works, but i think that its a simple beginner fact of css, a div that respect the sizes.. of divs inside... i think that i need a simple value but i dont know what is...

thanks so!

Div into a Div

2006-02-05T01:44:52-05:00

as the people said above the only way you get that result is if you are using floats. the way to get around this is to use a footer or some element like and hr to clear the floats.

Div into a Div

2006-02-05T10:44:44-05:00

nice idea climaxdesigns, it does work, yet for my current experience using the display:table on the container and the display:block on the floats has worked just as fine, no extra elements required.

if nowhere_beginer isn't using floats he is probably using position:absolute. In this case I don't think a containing div can be stretched to fit the height. A code view rather than an image would be more helpful in determining (and fixing) your problem

Div into a Div

2006-02-05T17:07:24-05:00

display: table doesn't work for IE (or even IE7) so you could try using the ::after clear method although I don't know why you would need a container.

Div into a Div

2006-02-05T20:16:32-05:00

display: table

precisely why i said use a clear element ;)

but i think tsk is right about nowhere using absolute positioning so now of this would work.

Hey nowhere send us a url to the actual page so we can look at the code and not the jpgs.

Div into a Div

2006-02-06T02:05:52-05:00

Had the same problem with the current layout that I'm working on and only using:

hr{
visibility:hidden;
clear:both;
}
solved my big pain in the (..), thanks climaxdesigns :)

Div into a Div

2006-02-06T13:02:42-05:00

@ nick1presta

It works just fine on IE and FireFox as well.
I usualy go by heart with some issues, but sometimes when I like to make a statement I give a conclusive example.

have a look http://tsk.xhost.ro/test/

Div into a Div

2006-02-06T20:09:12-05:00

thanks guys, but i send the example in html y css, i cant fixed, somebody can resolve????

http://asdivinegrace.com/div_problem/div_in_div.html

thanks a lot i wait for some answer! :)

Div into a Div

2006-02-06T22:19:43-05:00

My opinion is to trash the position:absolute
It's cleaner and safer to use floats.

have a look at the example I previously posted and adapt it for your needs.
It is quite easy to understand and it doesn't make use of position:absolute (which I presonally don't recommend)

To my knowledge you can't use that method and hope to have a content extend as its contents spawn.

Div into a Div

2006-02-07T00:15:59-05:00

thanks tsk, the only problem with you example its in Safari in mac they dont works appear the 2 boxes down, one in the top of the other.

so with floats its no necessary positions? absolute ect...?

Div into a Div

2006-02-07T01:53:51-05:00

i haven't had access on a mac nor did I try that method on Safari.
I am sorry but beyond this point I can't help you.

Div into a Div

2006-02-07T03:23:37-05:00

Tsk,
display â€” Only none, block, inline, table-header-group, and table-footer-group are supported by Trident.

Div into a Div

2006-02-07T14:19:01-05:00

http://www.climaxdesigns.com/pmms/test.php

to add to nick1presta's comment tsk example will not grow with the content because he has set heights...

Div into a Div

2006-02-07T19:23:35-05:00

ahem...
I gave it heights only out of comodity.
My mistake, I should have included content rather than give it a precise size for better illustration. have a look

@ nick: what is Trident ?

Div into a Div

2006-02-07T19:43:22-05:00

ahaha tuche tsk. i dont eventhink you need display block in that exampleas the height will be determined by the content. ... ok i'm sold, new way of using floats ;)

I will say this thought, if you are using your divisions correctly, the use of the

makes for a nice phisycal break in the content if the user is looking at it text only or css off;)

Div into a Div

2006-02-07T23:56:59-05:00

Trident is the rendering engine for Internet Explorder (also called MSHTML).

Div into a Div

2006-02-08T01:48:31-05:00

It's nice to know but having the example workin (at least under Windows) it prooves a point for me.

I don't always go by other articles or posts. I try to find out for myself (if possible).