CODEWITHSUNDEEP
css
pufAmuf
pufAmuf

Reputation: 7795

Weird Div Positioning

I created three DIVs that I wanted to appear from left to right.

<div id="middle">
     <div id="middleleft"></div>
     <div id="middleleftopenclose"></div>
     <div id="middleright"></div>
</div>

However, DIV middleleftopenclose appears all the way on the left and not after middleleft. Why is that?

#middle {
    position: relative;
    height: 100%;
}
#middleleft {
    width: 445px;
    float: left;
}
#middleleftopenclose {
    background-color:#2a2729;
    position: absolute;
    height: 100%;
    width: 15px;
    float: left;
}
#middleright {
    height: 100%;
    margin-left: 460px;
}

Thanks!

Upvotes: 0

Views: 61

Answers (5)

Jesse
Jesse

Reputation: 799

Try this

#middle { width: 100% }
#middle div { display: inline-block; width: 33%; }

You don't need float or position relative or position absolute :)

Upvotes: 0

Matheus Azevedo
Matheus Azevedo

Reputation: 898

Float doesn't work with position: absolute. Try changing it to position: relative;

#middleleft {
    width: 445px;
    float: left;
    position: relative;
}
#middleleftopenclose {
    background-color:#2a2729;
    position: relative;
    height: 100%;
    width: 15px;
    float: left;
}

Upvotes: 3

Maehler
Maehler

Reputation: 6331

As mentioned in a comment, you can't use position: absolute together with float. Changing it to position: relative should fix most of it. I created a fiddle to visualize it. I added some colours to make it more obvious, and I also set the #middleleft to height: 100%, otherwise they wouldn't float correctly. I don't know if this applies to your site out of the box.

Upvotes: 1

Sidharth Mudgal
Sidharth Mudgal

Reputation: 4264

This happens because the browser is not able to accommodate all the divs horizontally, i.e., the sum of widths of the divs is more the page width. Try changing the div widths.

Upvotes: 1

James McDonnell
James McDonnell

Reputation: 3710

Remove the floats and use display: inline-block;

Upvotes: 1

Related Questions