Hi,

 

I am having a problem with a site I'm designing for a course project. In my page editor the lay out is fine, and it did used to work in a browser but now the "advert" div has moved down too far on all of the pages. I've tried adjusting the CSS but not having any luck. Can any one help me put it back to the top?

 

View the page

 

/* CSS Document */

body {font-family:Georgia, "Times New Roman", Times, serif;}

h1 p {margin-left:20px;}

h1 {font-size:24px;}

#content {padding:15px; margin-left:20px; height:700px; float:left; width:900px;}

#navbar {background-color:E6E6E6;}

#leftbar {float:left; width:200px; height:700px; color:#FF33FF;}

#leftbar li {list-style:none; padding-left:0.5em; }

#advert {float:right; padding:10px; height:700px; width:200px;}

a:links {color:#FF33FF;}

a:visited {color:#FF33FF;}

Your wrapping the image with <p> tags which is adding a space at the top of the first image making it push the content down.

 

take the p tags off and maybe a bottom margin on the images to space them out.

Hey thanks for the help.

I tried that, this is a silly thing but I've gone blank on how to add a bottom margin to the images through html?

 

It didn't change though when I opened it in Mozilla, in Safari it's still fine. It annoys me because it was fine the other day and I haven't edited the page layout from what I can remember, for it to change. hmm.

 

It needs sorting before I hand in my project though. Oh the joys of learning

In your css you would add something like:

 

img {
  margin-bottom:5px;
}

Or you could create a class to target only one specific image, like so:

 

.advert {
 margin-bottom:5px;
}

 

If using a class with a classname of 'advert' as with the example above, you would need to add class="advert" in your image tag, i.e <img src="blah" class="advert">