How to do such layout with html+css? - html

Question

Boxes are some objects(button, label, textarea). Green's size is dynamic. Especially I have a problem with the blue box stick to bottom.

Answer 1

Place a holder around it and it will take the height from the 'green' one, and give them only absolute and bottom 0, it won't matter what width you give your elements.
Edit: hopefully this works for you, with floating the elements, the green one to the right, and the rest left.
<div id="divHolder">
<label id="red">Label</label>
<button id="blue">Button</button>
<div id="green">
a
</div>
<br class="clearFloat" />
</div>
#divHolder {
width:300px;
position:relative;
}
#green {
height:300px;
background-color: green;
float:right;
}
#red {
background-color:red;
float:left;
position:absolute;
}
#blue {
background-color: blue;
bottom: 0;
position:absolute;
}
.clearFloat {
clear:both;
}
check it out here:
http://jsfiddle.net/YA9yD/32/

Answer 2

Here's my solution →
The main problem here is that the left-hand column doesn't know how tall the right-hand column is.
You can put them in a parent together (which will wrap both columns), but the left-hand column will not know the height of the parent because a child element can only expand to the height of a parent element if the parent element's height is explicitly set.
Also, there are two distinct columns here, so I wanted to try and group them as close to the way they appear as possible. Putting the left column inside the right column (the green box) doesn't accurately represent how this is structured.
HTML:
<div id="container">
<div id="labelDiv">
<label>I'm a label.</label>
<p>Text area, whatevs.</p>
</div>
<button>Hello</button>
<div id="greenBox">
<p>Green box text.</p>
</div>
</div>
CSS:
#container {
width: 610px;
overflow: hidden;
position: relative;
}
#labelDiv {
width: 300px;
float: left;
}
button {
position: absolute;
bottom: 0;
left: 0;
}
#greenBox {
width: 310px;
float: left;
}
So everything on the left (other than the button) is floated left, and the green box is also floated left. Great so far, but the the button needs to know how tall the entire box is so that it can attach itself to the bottom. So, we set overflow to hidden on the outer container so that it wraps around the floated elements, and absolutely positioning the button to the bottom of this aligns it exactly with the bottom of the tallest inner element (the green box).
I'd also recommend setting some margin-bottom on #labelDiv so that it doesn't cover up the button.

Answer 3

See example of the following →
As long as the blue and red widths are specified, you could use relative and absolute position as follows:
<div id="green">
<label id="red">Label</label>
<button id="blue">Button</button>
</div>
#green {
position:relative;
}
#red {
width:100px;
position:absolute; left:-110px; top:0px;
}
#blue {
width:100px;
position:absolute; left:-110px; bottom:0px;
}