Push vertically resizable Div to bottom of wrapper. How?


Tags: css,html

Problem :

First of all, hello all. This problem is driving me to insanity so I hope for a simple solution

Here is an image of what I wanted originally.

But I didnt want to use hacks to get Box 1 and (Box 2+Box 3) to expand with each other. So I will just use a background color on the wrapper instead so its not noticeable that they have different heights.

This is what I have now:

CSS

#wrapper {
    background:         #000;
    width:              50%; 
    float:              left;
}

#box1 {
    background:         #FF0012;
    width:              65%;
    float:              left;
}

#box2 {
    background:         #141; 
    width:              35%;
    margin-left:        65%;    
}


#box3 {
    background:#AA1232;
    width:              35%;
    margin-left:        65%;
}

HTML

<body>

 <div id="wrapper">

  <div id="box1">

  </div>

  <div id="box2">

  </div>

  <div id="box3">

  </div>

 </div>

</body>

If you wonder why I dont use float: right; on Box 2 and 3 its because if Box 1 is lower than Box 2 then Box 3 will float under Box 1 instead of under Box 2.

Problem: 1. Fix Box 3 to the bottom of the wrapper 2. When rows are inserted in Box 3 and Box 2, they shouldn't overflow - expand the wrappers height instead (as it does with the code i posted)

If I use position: absolute; bottom: 0; on Box 3 then it will overflow Box 2 when rows are inserted and Box 3 gets too heigh.

Any ideas of how to solve this?



Solution :

I know why it drives you crazy - you are trying to solve table problem by un-table means. Why?

I tought myself to recognize table functionality: when I want independed pieces of content to share a common vertical and horizontal edge, it usually means I want a table.

Edit: to achieve that using table you need to 1) use rowspan to make box 1 span two rows and 2) vertically align contents of box 3 to make sure it is always at the bottom.

See, for example, the HTML that illustrates rowspan here. It is almost what you want, just get rid of table borders and add valign="bottom" to the third cell.


    CSS Howto..

    How to stop active effect occurring on all sub menu options from navbar

    How to create some elegant shadows in CSS [closed]

    How to override external css marked as !important? [closed]

    How to make this HTML change work? [closed]

    CSS - How to address only parents and not children

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    How can i edit font-size and font-family option in css file using sed?

    How to keep block elements inline and also correctly centered?

    parse JSON to HTML table: How do I format the css of the table?

    How to have background-image and gradient background-color work on one selector in CSS?

    How to change where a CSS transition starts from?

    CSS flipping animation in IE: Turned side shows mirror content

    CSS: How to align text to baseline of height-adjusted input element?

    How to change text (not font size) according to screen size in CSS?

    How to detect and deliver separate CSS files for mobile devices?

    .addClass - How to call CSS from linked css?

    How to label ABC in a HTML button and Click events

    CSS:How to properly remove border using CSS when border-radius is used?

    how to prevent form height increase on every click in Internet Explorer 9 in jqGrid

    How to add a picture to the top of my webpage?

    How to remove border in radial gradient so that it can mix well?

    How can I remove the border around an image without a source?

    CSS hover - How do I get it to change two nested divs

    How to specify the system’s default serif and sans-serif font-family?

    How to go from scrolling to fixed header [closed]

    Why does a div with background-color show fixed elements below?

    How do I obtain a floating element's left offset while it is outside the viewport?

    How to make CSS border-image work

    How to write css code in javascript? (Uncaught TypeError: Cannot set property “height” of undefined)

    How to assign CSS properties to aside tag