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 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Can't stack divs..

    The desire output is as follows:

    [[left][right]]
    [ Footer ]

    Left and right will be different heights, so I have put the, in a container together.

    My HTML & CSS is here:
    http://jsfiddle.net/PE86y/2/

    Edit:
    If I manually specify the height to say, 20, I get the desired look. However the height will always be variable, so a fixed height is not ideal.
    Last edited by absoleet; 08-09-2012 at 12:55 AM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by absoleet View Post
    The desire output is as follows:

    [[left][right]]
    [ Footer ]
    Given your HTML code:

    Code:
    <!-- Holder -->
    <div id="holder">
    	<div id="left_column">Left Column</div>
    	<div id="right_column">Right Column</div>
    </div>
    <!-- Holder -->
    
    <!-- Footer -->  
    <div id="footer_bg">Footer should be stacked</div>
    <!-- Footer -->
    The following (simplified) CSS should do the trick:

    Code:
    /* Default Layout */
    * { margin: 0; }
    
    /* Basic Layout */
    #holder { width: 200px; margin: 0 auto; }
    #left_column { float: left; width: 100px; }
    #right_column { width: 100px; }
    #footer_bg { clear: left; min-height: 200px; }
    
    /* Color Scheme */
    #left_column { background-color: #390; color: black; }
    #right_column { background-color: #060; color: black; }
    #footer_bg { background-color: #1b1b1b; color: white; }
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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