Hi,

I'm trying to do a three column css layout. In the center column, I will have some images. I don't know much about css, so I used this code for the center column from a tutorial:

#centercontent {
margin: 48px 190px 20px 190px;
padding: 10px;
border: 1px solid #ccc;
background: #FFFFFF;
}

When I do just text, the area grows and shrinks as necessary. If I put an image as part of that text, the whitespace does not expand to include the image.

Check it out here: http://tambascio.homelinux.org/www.euclid-floral.com/new.html

If you need to view the whole stylesheet, you can see it at: http://tambascio.homelinux.org/www.euclid-floral.com/newstylesheet2.css

I understand the stylesheet is defining an area, and the margins are for around the text. I want to know how to make it so that the image is considered part of the text area, and therefore the white box in the center will grow to contain it.

It was suggested to me on another board to put a height: 300px in the #centercontent definition, but that caused the whole white center area to jump up about 50 pixels in IE only.

Thanks in advance,
Kevin

Hello, I couldn't find your URL Because I got a 404 not found. I tried using your code on my style sheet and it worked just fine.

You can see an example here

http://smartlaredo.com/csstry.html

I tried it with text only first and it did work, then I inserted the image and the white space expanded. I am using Internet Explorer, I dont know how it would behave on netscape. Another reason why it wouldn't work could be that you are leaving the image outside the closing </div> tag. check them.

I fixed the URL's, they should point to the right file.

I did make some headway with using a div.space element, which seems to cause the white center box to keep up with the image size. I'm not sure if this is the right solution.

-Kevin

Hiya, I can't check out your code today, but check out these two references:

http://glish.com/css/
http://www.meyerweb.com/eric/css/edge/

- especially the first, where there are a couple of different approaches explained for 3 column layouts.

B

Also check out the tutorials on www.thenoodleincident.com.

Be aware that if you depend heavily on the use of margins in your css you will spend time balancing the appearance between IE and everything else as IE doesn't handle margins quite the same way.