CODEWITHSUNDEEP
csscss-float
HardCode
HardCode

Reputation: 1633

Move DIV to Right form Bottom with relative to Top DIV

I have following Scenario

http://jsfiddle.net/EYGhf/63/

<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>    
</div>

I want third div to be next to first div, first and second would be in same column, if right space is not available, i.e. on mobile, third div would float to bottom.

Current CSS that is applied goes as

.wrapper{
widht:250px;
}
#first_div {
background: yellow;
height: 200px; /* Just Example, Actual is Dynamic*/
width:100px;
float:left;
}

#second_div {
background: cyan;
height: 300px;/* Just Example, Actual is Dynamic*/
width:100px;
clear:left;    
}
#third_div{
width:100px;
float:left;
background:blue;
}

Upvotes: 0

Views: 516

Answers (1)

Stickers
Stickers

Reputation: 78736

You could set position:absolute on 3rd item, and use media queries set it back to static for mobile.

JSFiddle Demo: http://jsfiddle.net/ytr1j3r7/ (resize the output frame and see)

body {
    margin: 0;
}
.wrapper {
    position: relative;
    max-width: 400px;
}
.wrapper > div {
    height: 100px;
    width: 200px;
}
#first_div {
    background: yellow;
}
#second_div {
    background: cyan;
}
#third_div {
    background: teal;
    position: absolute;
    top: 0;
    right: 0;
}
@media (max-width: 399px) {
    #third_div {
        position: static;
    }
}
<div class="wrapper">
    <div id="first_div">first div</div>
    <div id="second_div">second div</div>
    <div id="third_div">third div</div>
</div>

Upvotes: 2

Related Questions