CODEWITHSUNDEEP
htmlcss
Aiden
Aiden

Reputation: 399

3 Divs, 2 Fixed width and 1 Fluid

I have a problem, where i am floating the first div(30px width) to the left, the third div(30px width) to the right and havin the second div take up the remaining space from the entire window width

Example:

http://jsfiddle.net/AScBN/188/

.right
{
   height:40px;
   width:40px;
   float:left;
   background:green;
}

.left
{
   height:40px;
   width:40px;
   float:right;
   background:green;
}

.fluid
{
   margin-right: 50px;
   height:40px;
   background:red;
}

div
{
   border:1px solid yellow;
}

Problem:

I cant get them to sit beside each other, the last div gets pushed under obviously because of the fluid second div

Thanks

Aiden

Upvotes: 6

Views: 2588

Answers (4)

Pixel Rubble
Pixel Rubble

Reputation: 1101

Here's another incredibly easy way to do this using Flex - updated jsFiddle

HTML

<div class="wrapper">
    <div class="fixed">1. Fixed Right</div>
    <div class="fluid">2. Fluid</div>
    <div class="fixed">3. Fixed Left</div>
</div>

CSS

.wrapper {
    height:40px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.wrapper div {
    margin: auto;
    border:1px solid yellow;
    height: 40px;
    text-align: center;
}
.fixed {
    width:40px;
    background:green;
}
.fluid {
    flex: 1;
    background:red;
}

Upvotes: 1

Thanos
Thanos

Reputation: 3059

Put your "green" divs inside the "red" one. Set the overflow on the "red" one as block. Done.

EXAMPLE

<div class="fluid">2
    <div class="left">3</div>
    <div class="right">1</div>
</div>

.right {
    height:40px;
    width:40px;
    float:left;
    background:green;
}
.left {
    height:40px;
    width:40px;
    float:right;
    background:green;
}
.fluid {
    overflow:block;
    height:40px;
    background:red;
    border:1px solid yellow;
}

Upvotes: 0

ragnika
ragnika

Reputation: 166

you got the orders wrong

<div class="right">1</div>
<div class="left">3</div>
<div class="fluid">3</div>

the non-floating div should be the last one.

Upvotes: 5

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Apply margin: 0 auto; to your .fluid

Upvotes: 0

Related Questions