CODEWITHSUNDEEP
htmlcss
bernte
bernte

Reputation: 1184

multiple div position on bottom with floating

i want to set .span4(image) and .span8(green box) to the bottom of .row (grey box)

.row should get the size automatic because .span8 has a random height.

what i want is this result:

enter image description here

what i get is this:

example 1

here is .span8 not on bottom of .row but .row has a automatic height

http://jsfiddle.net/39znd/

example 2

here is .span8 on bottom of .row but .span8 is not inside of .row as you can see on post 2 and 3

http://jsfiddle.net/HZu82/


on example 2 i added to .span8 blockquote -> position:absolute;


does anyone have a hint for me?

Upvotes: 0

Views: 69

Answers (2)

web-tiki
web-tiki

Reputation: 103790

You can use display:table;on the wrapper and display:table-cell;, vertical-align:bottom; for your issue see this demo :

FIDDLE

HTML :

<div id="container">
    <div class="table">
        <div class="row clearfix">
            <div class="span4">
                <img src="http://lorempixel.com/290/270/people/9/" />
            </div>
            <div class="span8_wrap">
                <div class="span8">
                    <blockquote class="bubble1-left">
                        <p>This is a blockquote</p>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

CSS :

#container{
width:900px; /* TOTAL WIDTH */
margin:0 auto;
padding:0 40px;
position:relative
}
.table{
    display:table;
}
.row{
display:table-row;
margin:0 0 20px 0;
min-height:270px;
background:grey;
}
.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both}
.clearfix{zoom:1}

.span4{
    display:table-cell;
    vertical-align:bottom;
    width:300px; /* IMG BOX */
    background:grey;
}
.span4 img{
    display:block;
}

.span8_wrap{
     display:table-cell;
    vertical-align:bottom;
}
.span8{
padding-bottom:30px;
width:600px; /* TEXT BOX */
background:green;
}
blockquote{margin:0 0 30px 0}
blockquote p{margin:0;font-size:1.25em}
.bubble1-left{
    position:relative;
    padding:20px;
    border:3px solid #000;
    text-align:center;
    color:#000;
    background:#fff;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}

Upvotes: 1

paraselena
paraselena

Reputation: 261

To have empty space above the green div try next things:

  • Insert some div to this empty place and let the green div have something like 100px height, and the div above 100% height.
  • Use next styles for green div: position: absolute; left: 0px; bottom: 0px; right: 0px;

Upvotes: 0

Related Questions