Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts

    simple layout help, please.

    Okay so it's overflowing, and I don't want to use overflow auto or hidden, or it will hide the footer.
    want the #box , container all the way up to where two columns are going..

    http://jsfiddle.net/h123er2/db9L9/1/


    <div id="box">

    <div class="colum1"> </div>

    <div class="colum2"> </div>
    <div class="footer"> </div>

    </div>
    *{padding:0;
    margin:0;}

    #box {width:600px;
    height:600px;
    background-color:grey;}

    .colum1{width:300px;
    height:100%;
    background-color:red;
    float:left;}

    .colum2{width:200px;
    height:100%;
    background-color:green;
    float:left;}

    .footer{width:500px;
    height:50px;
    background-color:cyan;
    clear:both;}

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Good evening,

    You want the #box (gray) div to be the same width as the 2 columns?

    Sorry your question doesn't make sense.

    Regards,

    LC.

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    You want the #box (gray) div to be the same width as the 2 columns?



    LC.
    You want the #box (gray) div to be the same height as the 2 columns?
    Same height, man..

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,095
    Thanks
    23
    Thanked 594 Times in 593 Posts
    It is the same height as the two columns.
    If you want the footer in there also just remove the #box height.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by h123er2 View Post
    You want the #box (gray) div to be the same height as the 2 columns?
    Same height, man..
    Well if you ask a question which makes sense, you'll get a decent answer.

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Good afternoon sunfighter,

    You can't remove the height because the columns are floated, unless he sets his heights on the columns with pixels.

    Failing that he could display the columns as inline-block but text editors seem to count a new line as space so it will create a space by default meaning you have to put all on the same line, which is bad for readability.

    Maybe someone can clarify a little more, I'm sure I learnt that here a couple years ago.

    Kind regards,

    LC.

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,916
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Code:
    <div id="box">
    
    <div class="colum1"> </div>
    
    <div class="colum2"> </div>
    <div class="footer"> </div>
    
    </div>
    *{padding:0;
    margin:0;}
    
    #box {width:500px;
    height:650px;
    background-color:grey;}
    
    .colum1{width:300px;
    height:600px;
    background-color:red;
    float:left;}
    
    .colum2{width:200px;
    height:600px;
    background-color:green;
    float:left;}
    
    .footer{width:500px;
    height:50px;
    background-color:cyan;
    float:left;}
    Any padding or border will add to the height and width of the element.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,095
    Thanks
    23
    Thanked 594 Times in 593 Posts
    @LearningCoder, I said remove the height on the #box; that's the containing div, not the columns. It does the same thing DrDOS did above by make the #box height:650px;
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #9
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts
    Found the answer, it's coming out because I'd given height 100% to those floated elements..

  • #10
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by h123er2 View Post
    Found the answer, it's coming out because I'd given height 100% to those floated elements..
    Cool that's what I was saying. You had to set them with a pixel height on floated elements.

    Regards,

    Lc.


  •  

    Posting Permissions

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