Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8

Thread: HTML & CSS

  1. #1
    Junior Member
    Join Date
    Feb 2010
    Posts
    18
    Member #
    21141
    Hello guys. I have a doubt about some html and css issues. I want to make a div that have no height.that can grow in height along with the divs that are inside this first div. I cant do this because when I put the divs that are inside, to be side by side I had in the CSS "float left" and "clear left". doing this, the main div don't grow with the divs inside. It's hard to explain, so I made a little graphic to explain it.

    Attachment 4446

    I hope someone can help me on this. Thanks and Cheers
    http://www.webdevforums.com/proweb/misc/progress.gif
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Give us the URL to your actual web page so we can play around with it.

    I know this sounds like blasphemy, but you might want to enclose the
    <div> in a <table> ... maybe a sneaky way to make it work. But, let us see
    what you have now.


  4. #3
    Junior Member
    Join Date
    Feb 2010
    Posts
    18
    Member #
    21141
    I could give it if I had the page online. I building the page yet but i can do a fast example and post here so you can see the problem.
    for example:
    CSS
    Code:
    #div01 {
        height: 100%;
        width: 950px;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
        background-color: #cccccc;
    }
    
    #div02 {
        height: 250px;
        width: 310px;
        background-color: #000;
        clear: left;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    #div03 {
        height: 250px;
        width: 630px;
        background-color: #000;
        clear: none;
        float: left;
        margin-bottom: 10px;
    }
    
    #div04 {
        height: 250px;
        width: 310px;
        background-color: #000;
        clear: none;
        float: left;
        margin-right: 10px;
    }
    #div05 {
        height: 250px;
        width: 310px;
        background-color: #000;
        clear: none;
        float: left;
        margin-right: 10px;
    }
    #div06 {
        height: 250px;
        width: 310px;
        background-color: #000;
        clear: none;
        float: left;
    }
    HTML
    Code:
    <body>
    <div id="div01">
    <div id="div02"></div>
    <div id="div03"></div>
    <div id="div04"></div>
    <div id="div05"></div>
    <div id="div06"></div>
    </div>
    </body>
    I want the first div (div01) to grow, if, for example, I add in the last div's (like div04, div05 or div06) a text which I don't know the height. For that I left the height at 100% but by adding the floats and clear, to make the divs go side by side, I lose the connection with the first div ( div01)
    Thanks

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Add a div with clear both just before the div01 closing bracket.


    #div01 {

    width: 950px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    background-color: #cccccc;
    }

    #div02 {
    height: 250px;
    width: 310px;
    background-color: #000;
    clear: left;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }

    #div03 {
    height: 250px;
    width: 630px;
    background-color: #000;
    clear: none;
    float: left;
    margin-bottom: 10px;
    }

    #div04 {
    height: 250px;
    width: 310px;
    background-color: #000;
    clear: none;
    float: left;
    margin-right: 10px;
    }
    #div05 {
    height: 250px;
    width: 310px;
    background-color: #000;
    clear: none;
    float: left;
    margin-right: 10px;
    }
    #div06 {
    height: 250px;
    width: 310px;
    background-color: #000;
    clear: none;
    float: left;
    }
    #clear {
    clear: both;
    }





    <div id="div01">
    <div id="div02"></div>
    <div id="div03"></div>
    <div id="div04"></div>
    <div id="div05"></div>
    <div id="div06"></div>

    <div id="clear"></div>
    </div>

  6. #5
    Junior Member
    Join Date
    Feb 2010
    Posts
    18
    Member #
    21141
    Thank you very much You were very helpful. I not actually very good yet with the css and the float's can be very tricky sometimes. problem solved

  7. #6
    Junior Member
    Join Date
    Feb 2010
    Posts
    18
    Member #
    21141
    One thing...Image that I want to make the second div ( already inside the main div ) to ignore the left padding ( 30px) but only this div ( div02) only the left padding, respecting the top padding?

    Attachment 3244

    i image that this can be a little bit difficult, isn't it? thanks
    Attached Images Attached Images

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    add margin-left: -30px; to div02. You will have to adjust the widths of div02 and div03 to line up properly.

  9. #8
    Junior Member
    Join Date
    Feb 2010
    Posts
    18
    Member #
    21141
    cool:-D you're the best!!

    thanks


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:53 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com