CODEWITHSUNDEEP
csshtml
Erdinç Özdemir
Erdinç Özdemir

Reputation: 1381

A div between 2 divs width 100%

On my page I have div structure like this.

-On body there are 2 divs. First 20% width, second 80% width. -In first div there are 3 divs alongside. First floats left: 11px width, Third floats right: 22px width. I wanna place 2nd div between 1st and 3rd divs covers 100% of the remaining width.

I cannot make the 2nd div like this. How can I do it?

Upvotes: 3

Views: 1271

Answers (1)

sandeep
sandeep

Reputation: 92793

Write like this:

HTML

<div class="firstdiv">
    <div class="first">1</div>
    <div class="third">3</div>
    <div class="second">2</div>
</div>
<div class="secdiv">80%</div>

CSS

.firstdiv{
    width:20%;
    float:left;
    background:red;
    }
    .secdiv{
     overflow:hidden;
     background:green;
    }

.first{
    float:left;
    width:11px;
    background:yellow;
}
.third{
    float:right;
    width:22px;
    background:pink;
}
.second{
    overflow:hidden;
    background:blue;
}

Check this fiddle

Upvotes: 5

Related Questions