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:


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

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

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

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



 <div id="wrapper">

  <div id="box1">


  <div id="box2">


  <div id="box3">




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 solve placeholder CSS difference across different browsers?

    How to remove the blue halo glow from jQuery Mobile input elements that receive focus

    How to show a node in a block in drupal 7

    How can I make a DIV background change color on hover if the DIV has a class of “disabled”? [closed]


    How to achieve layout goal - Two Column

    CSS: How to center texts with transitioning position?

    How to make an element with opacity 0 unclickable

    CSS / Javascript: hidden div does not take full width after being shown

    How to change the Menu colour when selected?

    How to fit the content of the site in any resolution CSS

    How to use background css for an image not in the Content or Resource folder

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    How to concatenate XHTML files in Java resolving any possible CSS conflicts?

    How to target a CSS ID to a specific HTML tag [closed]

    How to prevent page jump when using # href to swap gallery images using a div ID?

    How do i make this form same on all browsers?

    W3.CSS how to make container centered inside another container

    How to have a video take up the viewport height and width?

    How to make comment shape using css

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    How to adjust progress bar with Jquery?

    How do I control the spacing between my child links in my CSS driven menu dropdown?

    how to make a div transparent without affecting the child in CSS 3?

    How do I keep a horizontal column of divs in the same row when it is extends past the screen?

    how create triangle using css [duplicate]

    how to display php search engine execution time and number of results before the results

    How to make display:flex work for responsiveness - Bootstrap?

    How to achieve this bevel button in CSS?

    How to centre my CSS menu?