CSS Forum

**Webmaster Chris** · 07-02-2008, 06:24 AM

i've been reading stuff like crazy but when it gets to putting it in use i have no clue what to do i swear...

ok so heres my problem
i'm making the header of my webpage out of 3 images
there will be on to the left, one centered in the middle, and one to the right
however, the ones to the left and the right are both going to fill up 50% of the horizontal screen, so in essence filling the header, and my image centered in the middle will be on top of them.

i've gotten it how i want it to be, but the image i wan't centered isn't centered, its more at the right. everything i try just seems to mess it up worse, which is irritating because i'm sure its simple...

heres the related code

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>My Paintball Gear - Home</title>
    <link rel="stylesheet" type="text/css" href="paintballcss.css">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
    <div id="header">  
        <img src="blackfade.png"  alt="fade" id="floatleft" > 
        <img src="blackfaderight.png" alt="fade" id="floatright" > 
        <img src="header.gif"  alt="My Paintball Gear - The Gear of a Champion" id="name" >
    </div>

CSS

Code:

div#header {
    border-top: 4px solid black;
    border-bottom: 4px solid black;
    width: 100%;
    height: 100px;
}
img#floatleft {
    float: left; 
    height:100%;
    width: 50%;
}
img#floatright {
    float: right; 
    height:100%;
    width: 50%;
}
img#name {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img#floatright should be on the right
img#floatleft on the left
img#name in the center <--- this is the only thing messed up, its to the right

ty

**wayfarer07** · 07-02-2008, 09:25 AM

Hello,

This seems like an interesting question, but I am having a hard time seeing what is going on, without seeing the page, since I can't see the actual images. If you have a link to the page it may help.

In the meantime here is a possible solution:

If I understand you correctly, you need the image to overlay the two floated elements. If you set (or know) the exact width of the centered image, there is an alternate way of centering it that may be handy here.

This way of centering uses absolute positioning to work, which means that you will need to set position: relative on the div#header first, which makes anything absolute within the header relative to it.

Next, remove the margin-left: auto & margin-right: auto from image#name, and add this to it:

Code:

img#name {
display: block;
position: absolute;
left: 50%;
margin-left: -300px; /*replace this with a pixel value equating to half of the image's width */
}

Depending on how tall img#name is, you may need to adjust the height of your header accordingly.

**Webmaster Chris** · 07-02-2008, 02:59 PM

hm, works like a charm, thanks.
the position: relative didn't seem to madder though, at least in firefox

oh and i found a nice ad-free hosting service that will work for showing people what i'm working on, i just need to get it workin xd

thanks again

**wayfarer07** · 03:15 PM

I see now that the header is at the top, and is 100% width (you don't need to specify this, BTW, all divs will be 100% by default), which means relative positioning is not needed in this case, since anything relative to the header will also be relative to the body. However, in the future, you may wish to move the header, or make it less wide while aligning it to the left, in which cases you would want {position: relative;} in order for this centering technique to work correctly.

**Webmaster Chris** · 07-02-2008, 06:47 PM

Quote:

Originally Posted by wayfarer07

I see now that the header is at the top, and is 100% width (you don't need to specify this, BTW, all divs will be 100% by default), which means relative positioning is not needed in this case, since anything relative to the header will also be relative to the body. However, in the future, you may wish to move the header, or make it less wide while aligning it to the left, in which cases you would want {position: relative;} in order for this centering technique to work correctly.

ty for clearin that up