Home/ Questions/Q 6686905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:13:33+00:00

I’m trying to have a site that has the basic structure: <1 div> <3

  • 0

I’m trying to have a site that has the basic structure: 

<1 div>  
<3 divs next to each other>  
<1 div>

The 3 divs are float:left in order to make be on the same level. However, they 5th div (at the bottom) sort of moves up to the top of the 3 divs in IE, and shown like that in Chrome, although the content is below the 3 divs.
I think I’ve just done some lazy coding here, but don’t really know any better.
I’ve currently got: 

<div id="results">
<!-- Ajax Content Here -->
</div>
<div id="leftpanel">
</div>
<div id="photo">
</div>
<div id="top3">
</div>
<div id="voting">
</div>

The results is the top one, leftpanel, photo and top3 are the middle 3, whilst voting is below the 3.
Basic CSS is :

#leftpanel {
float:left;
width:20%;
height: 600px;
}

#top3 {
float: left;
width:20%
}

#photo {
width: 60%;
float:left;
text-align: center;
}

#voting {
width: 500px;
height: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#results{
width: 300px;
height: 20px;
margin-left: auto;
margin-right:auto;
margin-bottom: 5px;
text-align: center;
}

I’m sure it’s something silly I’m doing, so any input is much appreciated, I could use to learn how to do this properly 🙂 I previously had a containing div on the 3 middle divs, but this didn’t work since the ones inside change size. Maybe I need to do this, but in a different way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Rather than working with floats, you might consider simply setting the display attribute of the middle divs to “inline-block”. Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically. I think this would make your code much cleaner than dealing with floats. Here’s a demo:

    http://jsfiddle.net/scMFC/

    • 0