SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Orange
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem with images and CSS

    On my site http://www.jamescarnley.com I have a news area where I am going to be posting lots of different things with varying amount of text and images. I designed my site entirely with CSS with no tables at all. If you look down towards the middle you can see where the image extends out of the news box it is in and interferes with the other boxes. It is like the boundaries of the CSS box do not apply to the image at all.

    This happens when I use float: left on the image to make the text wrap around it. I used clear: left on the top of each news box to at least make the image not overlap several boxes but the problem of the image not being in the colored box is still there.

    Anyone know why the box does not contain the image also? Or can anyone see that I overlooked something simple?

    Thanks

    http://www.jamescarnley.com

  2. #2
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is probably the most discussed problem in CSS so here is a quick solution.

    http://www.alistapart.com/stories/practicalcss/

    Look there for .spacer CSS rule and <div class="spacer">&nbsp;</div> code.

  3. #3
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Orange
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you that solved it very nicely.

    It caused a slight problem in IE though (as always =P) where if an image is float: right then the paragraph extends all the way to the far left border of the browser. The picture of Lord of the Flies on my page is an example and im not sure why it does this.

    Any help will be appreciated.

    *edit*

    I have my content on my news page wrapped in a div called "news" and that is what is stretching to the left edge of the browser. I made the background red to test it and it only stretches on Internet Explorer.

    What's even wierder is that if you make the window smaller to a certain point the news div re-sizes to the right size (same as mozilla).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •