Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Div into a Div

Bottom of Page

1 to 20 of 20

  1.  
  1.  permalink
    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?
  2.  permalink
    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.
    •  
      CommentAuthortsk
    • CommentTimeFeb 4th 2006
     permalink
    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*/
    }
  4.  permalink
    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!
  5.  permalink
    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.

    <style>
    hr{
    visibility:hidden;
    clear:both;
    }
    </style>

    <div id=master>
    <div id=a></div>
    <div id=b></div>
    <hr />
    </div>
    •  
      CommentAuthortsk
    • CommentTimeFeb 5th 2006
     permalink
    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
  7.  permalink
    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.
  8.  permalink
    <blockquote>display: table</blockquote>

    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.
    •  
      CommentAuthorSam
    • CommentTimeFeb 6th 2006 edited
     permalink
    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 :)
    •  
      CommentAuthortsk
    • CommentTimeFeb 6th 2006
     permalink
    @ 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/
  11.  permalink
    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! :)
    •  
      CommentAuthortsk
    • CommentTimeFeb 6th 2006 edited
     permalink
    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.
  13.  permalink
    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...?
    •  
      CommentAuthortsk
    • CommentTimeFeb 7th 2006
     permalink
    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.
  15.  permalink
    Tsk,
    display — Only none, block, inline, table-header-group, and table-footer-group are supported by Trident.
  16.  permalink
    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...
    •  
      CommentAuthortsk
    • CommentTimeFeb 7th 2006
     permalink
    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 ?
  18.  permalink
    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 <hr /> makes for a nice phisycal break in the content if the user is looking at it text only or css off;)
  19.  permalink
    Trident is the rendering engine for Internet Explorder (also called MSHTML).
    •  
      CommentAuthortsk
    • CommentTimeFeb 8th 2006
     permalink
    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).

1 to 20 of 20

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page