I am currently working on a new version of my web site and am having some css float issues. The test site (please remember this is still in development) is: http://www.retroedgewebdesign.com/testsite/

 

The issues are as follows:

 

1/ On the following link image at bottom extends out over bottom of page:

http://www.retroedgewebdesign.com/testsite...t_portfolio.php

 

2/ I think this is the same issue as here with the right navigation menu:

http://www.retroedgewebdesign.com/testsite...phy_service.php

 

These are the main two issues, however I have also noticed that the menu items at the top of the page appear out of place in IE6 (see screen shot). Is this likely to be my coding or IE6 just being weird?

add to content-footer css property clear:both; shoud fix your problem.

add to content-footer css property clear:both; shoud fix your problem.

 

I can't believe it was that simple.... thanks

 

Although now I have gaps where the background should be... grrr!

update this site and we will fix this too, but first i must see what's wrong.

 

try to add margin-bottom to this div with those images and to this div with this contact

far as i can see you just need to put the repeated background on your #content as well as, or instead of on #content-middle.

 

you may need to use the br {clear: both} trick just before you close the #content div if your floated images make it play up.

Check out my article on Understanding CSS Floats to gain a grasp of how they work and why it's important to understand them.

I only checked the first link, idk wether it's sorted or not. But the problem is that your small image is the last image within the div.

 

So it's taking the bottom of this image as the end point for the div, which it's not. You need to finish the div with your larger image, and it will use the bottom of this image as the bottom of the div.

 

If that makes sense, plus it's more semantically correct to go left to right, so the last part of the content in the div should always be what's displayed in the bottom right.

 

See you have this

 

 

<p>Chronical Messiah are a P... their debut album cover.</p>
<img class="frame" height="368" width="368" alt="Chronical Messiah Album Cover" style="float: right;" src="images/chronical_messiah_album_cover.jpg"/>
<img class="frame" alt="Chronical Messiah Poster" src="images/poster001.jpg"/>
</div>

 

The Second to Last image you have there, you're floating right to push it over past the last image, which is un-semantic, and is causing your problem.

 

Just a simple, logical restructure would sort it.

 

<img class="frame" alt="Chronical Messiah Poster" src="images/poster001.jpg"/>
<img class="frame" height="368" width="368" alt="Chronical Messiah Album Cover"  src="images/chronical_messiah_album_cover.jpg"/>

 

So now the image you want on the right, is now semantically on the right, and your not forcing it anywhere, your letting the natural document flow take it there.

 

I hope this makes some vague sense, my ability to explain solutions well is a little lacking.

I only checked the first link, idk wether it's sorted or not. But the problem is that your small image is the last image within the div.

 

So it's taking the bottom of this image as the end point for the div, which it's not. You need to finish the div with your larger image, and it will use the bottom of this image as the bottom of the div.

 

If that makes sense, plus it's more semantically correct to go left to right, so the last part of the content in the div should always be what's displayed in the bottom right.

 

See you have this

 

 

<p>Chronical Messiah are a P... their debut album cover.</p>
<img class="frame" height="368" width="368" alt="Chronical Messiah Album Cover" style="float: right;" src="images/chronical_messiah_album_cover.jpg"/>
<img class="frame" alt="Chronical Messiah Poster" src="images/poster001.jpg"/>
</div>

 

The Second to Last image you have there, you're floating right to push it over past the last image, which is un-semantic, and is causing your problem.

 

Just a simple, logical restructure would sort it.

 

<img class="frame" alt="Chronical Messiah Poster" src="images/poster001.jpg"/>
<img class="frame" height="368" width="368" alt="Chronical Messiah Album Cover"  src="images/chronical_messiah_album_cover.jpg"/>

 

So now the image you want on the right, is now semantically on the right, and your not forcing it anywhere, your letting the natural document flow take it there.

 

I hope this makes some vague sense, my ability to explain solutions well is a little lacking.

 

It makes perfect sense, thank you