SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,294
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)

    OK. I'm feeling dumb....

    I'm working on a site for some friends of mine and I thought it would be a great time for me to expand my css skills. I was having a great time working on it until I started to work on this page:

    http://www.keystonecapitalchorus.org...fect/photo.htm

    See how the photos aren't staying within the content div? Any ideas of what I'm doing (something stupid I'm sure)

    This is the way I basically would like the page to come out (after some style is added of course). I could do it with the tables, but this is a learning experience so I'd prefer to do it with css if at all possible.

    http://www.keystonecapitalchorus.org...ect/photo2.htm
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without examining the code too much is it something about having floated images inside a containing div so that the divs height is not adjusted for the images ?

    add a

    HTML Code:
    <br style="clear: both" />
    after them ?

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,294
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    That will work. Is there any other way I could have coded that so it wouldn't require that extra break?
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  4. #4
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably but not without making the design less fluid (i.e. specify more widths and heights) and I suspect that it is the simplist solution (and therefore the best)

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DaveMaxwell
    That will work. Is there any other way I could have coded that so it wouldn't require that extra break?
    Not really. Look at the example of styling forms at http://alistapart.com/stories/practicalcss/, which discusses the same problem with floats. When you float an element, you end up removing it from its normal place in your document, so the containing element tries to adjust accordingly. That <br /> (or alternately, a <div> styled with "clear: both;") knocks some sense back into the parent element .

    Off Topic:


    Also Dave, if you want the navbar links to go right next to each other without any extra space, remove the line breaks and tabs between your </li> and <li> tags

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,294
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    OK. I'll stick with it the way it is and just have the clear both after it. Thanks for the help.

    Off Topic:

    Thanks. I didn't take too much notice to the extra spaces, but I'll fix that
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse


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
  •