View Full Version : first time css layout help

03-22-2005, 10:54 PM
sorry this has to be my first post, Ive been browsing the forum for a while now - but this is really starting to annoy me and I was so hoping somebody could help me

Im trying my hand at css layouts and was making one for word press. However Im having some trouble with the post layout.

The site is http://www.popsacrifice.com | css here (http://popsacrifice.com/postimages-files/style.css)

in both firefox and IE the top post looks funny (both browsers display the problem differently, but its in the same area). I know its because of the image (wonder woman) thats in the post. If I take the image out the post looks normal. Like I said Im new to making layouts out of css, so I was hoping someone could help :(

03-22-2005, 11:24 PM
Welcome roraz.

Can you elaborate on "looks funny"?

in both firefox and IE the top post looks funny

How do you want it to look?

03-23-2005, 12:15 AM
sorry, should have been more descriptive.

well if you look at the lower posts (their alright) thats how it should look. It should be set out like

date and time
comments link

in firefox the post below the wonder woman post is overlapping it, while in IE it looks alright for the most part except the comments link is right below the post text when the comments link should be below the wonder woman image (considering the image is part of the post)

03-23-2005, 01:17 AM
Add the following to your "post" class...

clear: both;

And you may also want to add margin/padding to your .post img declarations as well. See what the above looks like then choose whether or not that is necessary for you.

03-23-2005, 01:33 AM
I added clear both to the post class. It improved abit but the comments link is still right under the text (when I want it to be under the picture) plus the post below is still quite close :confused:

03-23-2005, 03:27 AM
I think ive located the problem. I added a class for the posts images. I wanted it so that if I put an image in a post, it would automatically be aligned to the left with the text around it (i didn't want to put the html code in every time when posting an article)

so I made this class:

.post p img {border: 1px #000000 solid;
float: left;
margin-right: 10px;
position: relative;
clear: both;}

which applied to the any "post" content, the class which was:

.post {
top: 0px;
width: 460px;
left: 0px;
margin: 0px;
text-align: left;
clear: both;
position: relative;}

If it was just text in the post, or if there was a lot of text plus an image there wouldn't be a problem as the text seems to "push out" the div. But if it was just an image the comment link would shift out of place, its like it doesn't recognise the fact that the image is in the 'post' div...so thats why the comment link moves....