SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    b
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    So I have 3 DIVS....

    Hi,

    Hopefully someone may be able to help me out of this hole

    I have a left column. In this column I have 3 DIVs.

    Each DIV needs to be expandable by height only.

    Each DIV needs to shunt down as the one above gets bigger.

    How do I do this please ?

    *banging head on table*

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Aug 2003
    Location
    b
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou for your reply

    Sorry but I must be missing the point but I don't see how that helps my situation ?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    x.js (the javascript code used in that thread) can help you by setting all 3 columns to an equal height. Once implemented, your columns will stay an equal height in any browser that supports modern Javascript. However, I must ask the question, do you really need a 3-column layout? They're rather tricky to implement using CSS and tableless layout and oftentimes people really don't need them after analyzing their requirements. Just make sure it's the right fit for your site.

  5. #5
    SitePoint Member
    Join Date
    Aug 2003
    Location
    b
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    My 3-columnar layout is not the problem I'm having mate.

    My problem is 3 DIVs inside 1 of the columns (sorry if I didn't explain that properly).

    Each of these 3DIVS fit fine in the column in question.

    My problem is that each of the DIVs needs to expand by height.

    And when the above DIV increases in size (dynamically cos of MySQL query) the other DIVs need to move down with it.

    Does that explain better ?

  6. #6
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    demo_user, you mean something like the boxes in the left column of my web site, I think. You don't need to do anything for that, that is the default behaviour. The divs will expand with their content and push anything that follows below them.

    Have you tried something that doesn't work? Please provide an example (link or code)!

  7. #7
    SitePoint Member
    Join Date
    Aug 2003
    Location
    b
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks yngwin

    This is what I have:

    #sidebar {
    position:absolute;
    top: 340px;
    left: 0px;
    background-color: #72B0B6;
    padding: 6px;
    width: 230px;
    height: 100%;
    z-index: 3
    }

    #community {
    position:absolute;
    top: 10px;
    left:10px;
    right:10px;
    width:210px;
    background-color: #FFFFFF;
    height: auto;
    z-index: 2
    }

    #sublfttblhd {
    position:absolute;
    top: 0px;
    left: 20px;
    background-color: #CCCCCC;
    width: 190px;
    height: 20px;
    border-left: 0px;
    border-right: 1px;
    border-top: 1px;
    border-bottom: 0px;
    border-color: #FFFFFF;
    border-style: solid;
    z-index: 1
    }

    #tutorials {
    position:absolute;
    top: 120px;
    left:10px;
    right:10px;
    width:210px;
    background-color: #FFFFFF;
    height: auto;
    z-index: 2
    }



    Then in my html:

    <div id="sidebar">

    <div id="community">
    <img src="i/bul18.gif" alt="Computer Help Community" width="19" height="20" />
    <div id="sublfttblhd"></div>
    a<br />a<br />a<br />a<br />a<br />
    </div>

    <div id="tutorials">
    <img src="i/bul18.gif" alt="Computer Help Tutorials" width="19" height="20" />
    <div id="sublfttblhd"></div>
    a<br />a<br />a<br />a<br />a<br />
    </div>

    </div>

    What happens is the Community DIV extends behind the tutorials table as the Community table expands.

    Any ideas ?

  8. #8
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Short answer: loose the position:absolute because that takes elements outside of the "document flow" - this is what is causing your problems.

    Do you need a long answer? Or can you figure it out from here?

  9. #9
    SitePoint Member
    Join Date
    Aug 2003
    Location
    b
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    I now have 2 issues

    #community {
    top: 10px;
    left:10px;
    right:10px;
    width:210px;
    background-color: #FFFFFF;
    height: auto;
    z-index: 2
    }

    #sublfttblhd {
    position: relative;
    top: 0px;
    left:20px;
    background-color: #CCCCCC;
    width: 190px;
    height: 20px;
    border-left: 0px;
    border-right: 1px;
    border-top: 1px;
    border-bottom: 0px;
    border-color: #FFFFFF;
    border-style: solid;
    z-index: 1
    }


    #tutorials {
    top: 10px;
    left:10px;
    right:10px;
    width:210px;
    background-color: #FFFFFF;
    height: auto;
    z-index: 2
    }

    Firstly, how do I dictate the gap between the 2 DIVs ?

    Secondly, I can't seem to line "sublfttblhd" with the top of "community" for some reason

  10. #10
    SitePoint Member
    Join Date
    Aug 2003
    Location
    b
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div id="community">
    <img src="i/bul18.gif" alt="Computer Help Community" width="19" height="20" />
    <div id="sublfttblhd"></div>
    a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
    </div>

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Firstly, how do I dictate the gap between the 2 DIVs ?
    use margin-top:10px instead of top:10px etc. Top,left and right only apply to positioned elements otherwise use margin-right margin left etc to move an element from where it is.

    Secondly, I can't seem to line "sublfttblhd" with the top of "community" for some reason
    Try floating your image left which will remove it from the flow and allow your grey border to move to the top of the div. You may need to play around with the margins of the div (e.g. margin-top:0px.)

    Paul

  12. #12
    SitePoint Member
    Join Date
    Aug 2003
    Location
    b
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are great !

    Thanks


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
  •