CODEWITHSUNDEEP
htmlcss
Hellodan
Hellodan

Reputation: 1208

Why isnt my right div floating inline with the rest?

I have 3 divs on my page for a gallery page im building, I need to center the 'center' div so that its central on any screen with a div floating left and one right either side of it. The left and center divs seems to work fine and are inline with each other but my right floating div is positioned lower down then the other 2.

Why is this happening?

HTML

<div id="left">
IM ON THE LEFT  
</div>


<div id="middle">
I AM IN THE MIDDLE
</div>

<div id="right">
THIS IS ON THE RIGHT
</div>

CSS

#left{
float:left;
position:relative;
width: 150px;

}

#middle{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
position: relative;

}


#right{
float:right;
width: 150px;
position: relative;
}

Upvotes: 0

Views: 1136

Answers (6)

David Laberge
David Laberge

Reputation: 16051

In your CSS .left add 

display:inline-block;

Same for .right

EDIT:

Here a jsFiddle that works : http://jsfiddle.net/LwUqF/

Upvotes: 1

coder
coder

Reputation: 11

You only asked for the reason.

The reason was explained well by anothershrubery.

Still a solution:

You want the 'middle' div in the center position, so I'llassume you have an idea of the total page width and widths of the three div's.

Keep the 'left' and 'middle' div's under a div, float it to left.

'right ' div will remain as it is.

Upvotes: 0

anothershrubery
anothershrubery

Reputation: 21003

It is because you have specified #middle as display:block this means that this div will fill the rest of the container, and therefore pushing the #right div below it. Change #middle to display:inline-block and you get the desired result.

See http://jsfiddle.net/xm33e/

EDIT: Or what PatrikAkerstrand said...

Upvotes: 0

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

It happens because #middle is a block level element and does not float. This creates a new line, and your float right will start on the next line. If you float your middle block to the left it should work just fine, provided that there is enough space. Alternatively, you could place your #right-div at the top of the HTML. This way it will be floated right, then #left will be floated left, and #middle will stay in the normal document flow, i.e. in the middle if there is room.

Upvotes: 2

mre666
mre666

Reputation: 336

maybe there is no space for the last div to float where it is supposed to float.

maybe you can reorder your html, so the right column comes before the center column.

maybe you can do this:

#left {
    float: left;
    width: 10%;
}
#center {
    float: left;
    width: 80%;
}
#right {
    float: left;
    width: 10%;
}

Upvotes: 1

Stefano
Stefano

Reputation: 4031

Here a possible corection

#left{
float:left;
position:relative;
width: 150px;
display: inline-block;
}

#middle{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
position: relative;

}


#right{
float:right;
width: 150px;
position: relative;
display: inline-block;
}

try to see if it orks for you...

Upvotes: 0

Related Questions