6

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

4 Answers 4

5

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.

2
  • hey there, this is working but why does it matter about the order in which the divs are placed?
    – Aiden
    Aug 26, 2013 at 3:28
  • In normal flow, block elements stack the next element under it. So in your original code, div.fluid basically tells div.left to go to the next line where it floats to the right. this article can probably explain it better. Read under "how floats behave".
    – ragnika
    Aug 26, 2013 at 3:49
1

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;
}
0
0

Apply margin: 0 auto; to your .fluid

0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.