CODEWITHSUNDEEP
htmlcssalignment
Christopher Masser
Christopher Masser

Reputation: 829

How can I align 3 adjacent divs with two of them filling the available space?

enter image description here

div1: width = wrap_content, maximum 50px

div2, div3: fill half the remaining space each

Upvotes: 0

Views: 140

Answers (1)

Moshtaf
Moshtaf

Reputation: 4903

Try this:

<div class="div1"></div>
<div class="div2">
    <div class="div21"></div>
    <div class="div22"></div>
</div>

And CSS: 

.div1{
    float:left;
    width:50px;
    background-color:Red;
}

.div2{
    overflow:hidden;
}

.div21{
    width:50%;
    float:left;
    background-color:green;
}

.div22{
    width:50%;
    float:left;
    background-color:blue;
}

div2 is something like a container and div21 and div22 equal div2 and div3 in your question.

Check JSFiddle Demo

Upvotes: 1

Related Questions