Centering 5 objects

[rsart]

Afternoon.

I'm trying to centre 5 objects for the header of my site. They take the form of featureboxes with some text in them and the site log, and are displayed as box, box, logo, box, box.

I'd like them to be centered or justified acros the page, but I'm not sure if can even do this in CSS.

I've also tried to padd each oject out, so that they would have space in between them and it would look like the they were entered (the site is a static width). That works fin in IE and NN, but not Opera. Opera thinks it will be a good idea to out a huge cap between the second featurebox and the logo.

The CSS:

#header
{
height:280 px;
background-image: url(../siteimages/back_lt_green.gif);
background-color: transparent;
text-align: center;
}

#featurebox
{
background-image: url(../siteimages/featurebox.gif);
background-color: transparent;
text-align:center;
float: left;
height: 170 px;
width: 110px;
}

#caption
{
font-size: 12px;
color: #ffffff;
font-weight: bold;
text-transform: capitalize;
background-color: transparent;
margin-bottom:5px;
}

#blurb
{
margin-top: 10px;
font-size: 10px;
}

#fimage
{
}

#logo
{
margin:0px;
padding:0px;
float: left;
}

And the current CSS:

<div id="header"> <!-- called from an include file -->

<p><!--#include file="topmenu.asp" --></p>
<p><!--#include file="advert.shtml" --></p>

<div id="featurebox">
<div id="caption">caption 1</div>
<div id="fimage"><a href="#" ><img src="/skindom/siteimages/featuretest.gif" alt="featuretest" width="100" height="85" /></a></div>
<div id="blurb">a small blurb</div>
</div>

<div id="featurebox">
<div id="caption">UC and UT2003</div>
<div id="fimage"><a href="#" ><img src="/skindom/siteimages/featuretest.gif" alt="featuretest" width="100" height="85" /></a></div>
<div id="blurb">a larger blurb goes here</div>
</div>

<div id="logo">
<img src="/skindom/siteimages/logo.gif" alt="logo" width="220" height="173" />
</div>

<div id="featurebox">
<div id="caption">Strange!</div>
<div id="fimage"><a href="#" ><img src="/skindom/siteimages/featuretest.gif" alt="featuretest" width="100" height="85" /></a></div>
<div id="blurb">Strangefate talks about his amazing escape</div>
</div>

<div id="featurebox">
<div id="caption">John Muller</div>
<div id="fimage"><a href="#" ><img src="/skindom/siteimages/featuretest.gif" alt="featuretest" width="100" height="85" /></a></div>
<div id="blurb">Interview: John Muller talks about his life in games and comics</div>
</div>

<br clear="all" />

<!--#include virtual="/skindom/includefiles/middlemenu.shtml" -->

</div> <!-- end of the header -->

[Birdman]

If you use "id" to name a div or other element, you can only use it once per page. You used <div id="featurebox"> and others twice. Change them to <div class="featurebox"> and you can use them as many times as you like. In the CSS, change "#featurebox" to "div.featurebox" or ".featurebox"

Hope that helps you. I had done the same thing not too long ago and had to change a bunch of pages.

[rsart]

Thanks for the heads up - I got that changed and it only mucked up one part of the page. Thankfully I've designed it so that every page uses an identical index.asp and includes a body.html so I only had to change it once.

Anyone know about the centering issue?

[SuzyUK]

rsart...off the top of my head wrap all (5?) features in another div (called div class="center"?) then set the properties of this div to >>

div.center {text-align: center}

this may mean you giving equal margins to the content divs to make sure it looks "natural"

Suzy

[rsart]

Nope, no joy, I'd already tried that old trick :)

I put a pixel white border around my .logo dive, and its being distorted -the image is pushed to the right edge. I'll give that div a definite width and see if that helps.

[rsart]

A solution!

I wrap the each of the 4 feature boxes and the logo in <div class="padfix">

.padfix
{
padding-left: 12px;
padding-right: 10px;
padding-top:0px;
padding-bottom:0px;

float:left;
}

And it works. Well, it works in IE and Opera. But NN? Oh by golly, its a one great big mess.

I take out the float:left; line, and it works again in NN but, none of the objects have spaces - so I'm back to square one.