SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS div parent child relationship?

    Hi All,

    Having troubles with div tag parent/child relationship I assume this is legal? (I'm referring to tag relationship )

    I wanted to implement 2 column layout using CSS instead of tables.
    something like this

    --------- ---------
    ! div 1  ! div 2  !
    --------- ---------
    Tht part was easy. The problem was centering both divs on the page. I've tried to put both divs into one parent div and center them there, but I guess i am missing something.

    Overall the code was something like this:

    div (parent one)

    div1 (float left, width 30% etc..) /div1
    div2(float left, width 30% etc..) /div2

    /div

    Didn't help. Out of curiosity I've set borders on all divs and the parent, or whatever I've assumed to be the parrent div was rendered above both div1, div2?
    The same thing happened when I've tried to replace parent object from div to p.
    Schematically I ended up with this:

    --------------------
    !    parent div        !
    --------------------
    --------- ---------
    ! div 1  ! div 2  !
    --------- ---------

    What am I missing here? If I include div inside another div, isn't it the child object for the surrounding one?
    Have Fun,
    Gator
    zknives.com

  2. #2
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd need to see your css as to how your positioning and centering your div before I could offer any more advice, but I can offer an explanation why your parent div's border seemed wrong.

    When you float an element it is removed from the normal flow of the document, so although you parent div does 'contain' the other two divs they have no bearing on its height. Th parent div simply assumes an arbitrary height, which is what you see when you apply the border.

    Try adding a <br style="clear:both" > to your parent div after you two child divs, I *think* that should expand the div to fit.

    post up your code or a link and I'll take a look.

    cheers

    alastair

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look here:
    http://www.bluerobot.com

    It discusses in detail doing what yo uare trying to accomplish.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the test page is here:
    http://zvis.com/knives/custom/ctest.shtml

    I've added <BR style="CLEAR: both">, but didn't seem to help, however oddily enough after adding <hr> the parent div got expanded...

    here's the style for floating children divs:
    .divLefty {width:30%;float:left;position:relative;margin:1em;border:#f00 solid 1px;"}

    and here's the parent div:
    <div style="text-align:center; align:center;border:#fff solid 1px;">

    Just added borders for testing.
    If I remove float then those 2 divs go in 1 column...
    I don't want to use hardcoded positions. Isnt' ther an easy way to make that thing center?
    Have Fun,
    Gator
    zknives.com

  5. #5
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your center commands aren't working because the floats are oputside the normal flow of the document. A float will try to move as far left(or right) and high as possible, regardless of the alignment settings

    OK this might get you closer...

    change your style to:

    <style type=text/css>
    <!--
    .divLeftyone {
    width:30%;
    position:absolute;
    margin:0 0 0 15%;
    border:#f00 solid 1px;}

    .divLeftytwo {
    width:30%;
    position:relative;
    left:50%;
    top:0;
    border:#f00 solid 1px;}
    -->
    </style>

    and change your parent div's style to:

    style="border:#00f solid 1px;width:100%;"

    and then assign classes .divleftyone and .divleftytwo to each of your divs.

    It's not perfect but it's nearly there.

    Remove the <center> tag while you at it and you might want to try running your code through the w3c validator before you go much further.

    cheers

    alastair

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, it worked

    After centering 2 children divs in the paren div it was all ok, except when the window was small the child divs were ovelapping. I've decided to set the fixed width on the parent div. Once I did it, the div moved to the left because it wasn't 100% anymore.

    http://www.zvis.com/knives/custom/ctest2.shtml
    In the end the structure was like this:

    <center>

    <div style="border:#fff solid 1px;width:800px;text-align:left;top:0px;position:relative;">

    <div class=divLeftyone></div>
    <div class=divLeftytwo></div>

    </div>
    </center>

    Is there any other way to prevent overlapping?
    Have Fun,
    Gator
    zknives.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •