Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorspoo
    • CommentTimeFeb 9th 2007
     permalink
    Working on my site, not going for anything super spectacular here, but I'm having a slight float problem.

    Here is my site. As you can see, there's a div out of place there, floating outside the boundaries of the blue container. The stylesheet can be found at .com/style.css. Any help would be appeciated

    :)
    spoo
  1.  permalink
    The problem may appear to be associated with the float but it is actually caused by the image being wider than the div it is contained in. The image lines up to the left hand margin of the div and overflows to the right.

    Whilst you could correct this by making the div wider there are more fundamental issues. In the CSS all the div widths are expressed as %, which is a problem when you have two fixed width elements(images) inside a fluid containers. What happens is the images break out of the containers rapidly as screen sizes reduce. In this case I would recommend using absolute units px for the div element to keep the page together in smaller screens.
    •  
      CommentAuthorthe.x.man
    • CommentTimeFeb 9th 2007 edited
     permalink
    i'm not sure what you have in mind for the finished look, but you have fixed width content (your images), inside a set of percentage width containers- so, every different sized viewport will alter where the content places itself in relationship to it's container (try resizing your browser window to see what i mean- click and drag has the images sliding all over the place, irrespective of any boundries).

    i think for starters you might need a min-width, or perhaps even consider fixed width containers.

    ------
    edit- apologies, axe_sosharp... i just noticed you must have replied a few moments before i did. i wasn't trying to undermine your comments :o)
Add your comments
    Username Password
  • Format comments as (Help)