Alignment issue help required

[David.W.S]

Hi all!,

The site I am currently working on contains a 20px high x 980px wide strip that I am having difficulty aligning with a left hand vertical panel that is next to a photo - see attachment below to indicate what I'm talking about. The black strip at the base is supposed to align left with the left hand vertical panel, OR align right with the main image.

Any assistance regarding what I am doing wrong would be appreciated. Likewise if there is anything else contradictory, awkward or unnecessary in the coding below, then please offer your advice. Many thanks.

This is the current HTML...

<div id="wrapper">

<div id="sidebar"></div>

<div id="main_image"><img src="images/main.jpg" width="779" height="584">

<div id="bottom_strip"></div>

</div>


And this is my current CSS...

#wrapper {
margin: 0 auto;
padding-top: 25px;
width: 980px;
}

#sidebar {
float: left;
width: 186px;
height: 584px;
background: #000000;
margin-top: 5px;
}

#main_image {
margin-top: 5px;
margin-left: 201px;
width: 779px;
height: 584px;
}

#bottom_strip {
margin-top: 5px;
width: 980px;
height: 20px;
background-color: #000000;
}

[SB65]

First off, you are missing a closing </div> on your div #main_image. That's causing #bottom_strip to be out of alignment.

The gap to the left of your image occurs because you have a margin-left on #main_image of 201px, but your #sidebar is only 186px wide - leaving a gap of 15px between them.

Rather than having an extra div just for the black strip you could, if the rest of your design allows it, achieve the same thing by adding this to #wrapper:


padding-bottom:5px;
border-bottom: 20px solid #000000;

[David.W.S]

Many thanks for that SB65 - the closing </div> on the div #main_image fixed the bottom black strip perfectly.

I actually want the 15px gap between the side panel and the main image, so there are no problems there.

I'll leave the black bottom strip as a separate div I think as I've got a line of text below i (some aligned left and some aligned right on the same line) stating copyright, address, company registered number and VAT number.

Many thanks again.