Question

I have the following HTML to center images and links within a layer:

edit: a better example

<style> body  {  background-color:#000;   color: #FFF;   }  a  { font-family: 'Broadway', Broadway,monospace;  font-size: 14px; color:  #FFF; }  #images a {   width: 24.99%;  display: block;  float: left;  text-align: center;  }  #container; { top: 30%; left: 15%; } #main { position: absolute; width: 800px; height: 600px; } #logo { float:left; background-image:url('1.jpeg');  width: 104; height: 100; }    </style> <div id='main'>  <div id='logo'> </div> <div id='container'>  <div id='images'> <a href='1.html' >     <img src='1.gif' alt='x' width='181' height='173' border='0' /><br />     One </a> <a href='2.html' >     <img src='2.gif' alt='x' width='181' height='173' border='0' /><br />     Two </a> <a href='3.html' >     <img src='3.gif' alt='x' width='181' height='173' border='0' /><br />     Three </a> <a href='4.html' >     <img src='4.gif' alt='x' width='181' height='173' border='0' /><br />     Four </a> </div></div></div> 

Answer 1

1. The main div has a width of 800px, so the floated logo div (104px) + the 4 images (25% each) is too large for one line, so the final image wraps to the line below. Unfloating the logo div will start the images on a new line at the far left.

2. Position is static by default – so left and top have no effect.

3. Set position:relative; on the container div – be careful with IE6 though, because position:relative is a bit funny if I remember correctly.