SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question A logistical Float nightmare!

    Hello good people of the forum!

    I have a little problem with floating and clearing elements on a page on a site I'm developing...

    The URL is http://www.xyzmagazine.co.uk/xyz_music_reviews.php
    (CSS: http://www.xyzmagazine.co.uk/css/layout.css)

    There are several <div> elements containing an <img> set to float:left and some text. I have placed a clearing element in each <div> ( <br class="clearfloat" /> ) to force each <div> to wrap under the preceding <div>'s floating <img>.

    The problem is this clearing element is forcing the elements to display below the two floated side columns, even though they are outside the central column <div>


    It's such a simple effect I'm trying to achieve I just can't see where I'm going wrong!!


    Thanks in advance

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd be better of getting rid of the <br> completely and then just clearing your floats like this...

    Code:
    .floatblock {
      width: 100&#37;;
      overflow: hidden;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's perfect, thanks!

    It was the fact I hadn't specified the width that was causing the stack... doh!

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, although if the text was to ever be shorter in height than the image then the overflow ensures that you won't encounter any problems.

    Leaving the overflow out of the code will work with the code you provided but I included it so that your page was future proof to any strange dynamic updates


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
  •