Question

I can’t make HTML layout described as in jsFiddle link below, using <div> and CSS float. With table tag I can solve this problem, but I need DIV+CSS solution. It’s possible? Anyone can help?

HTML:

<div class="container">

<div class="column">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

 <div>

Something on top

</div>

    <div id="bottom-content" style="background-color: #FA0">

Something with vertical align = bottom AND height == height of left column

</div>

</div>

CSS:

.container {
    overflow: hidden;
}
.column {
    float: left;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

Live demo: jsFiddle

Solution:

HTML:

<div class="container">

<div class="column">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

 <div style="float:left; height:82px">

Something on top

</div> 

    <div id="bottom-content" style="background-color: #FA0; float:left;">

Something with vertical align = bottom AND height == height of left column

</div>

</div>

CSS:

.container {
    overflow: hidden;
}
.column {
    float: left;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

Answer 1

as i m getting your question.You need to give float on your div

jsfiddle.net/tKnw9/12

check the fiddle