SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating content doesn't work right

    I've tried to fix this page but it seems that the FAQ content always wants to sit below the sidebar when actually it should be floating right.
    http://westfest.ca/index.php?option=...d=59&Itemid=61

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is a guess:

    custom.css, Line 229
    Code:
    #leftblock {
        float: left;    /* ADD ME */
        margin: 2px;
        width: 21.5% !important;
    }
    layout.css, Line 38
    Code:
    #leftblock, #midblock, #rightblock, #insetblock, #insetsholder_2t, #insetsholder_2b, #insetsholder_3t, #insetsholder_3b {
        float: left;    /* DELETE ME */
        height: 100% !important;
        margin: 2px;
        overflow: hidden;    /* DELETE ME */
        text-align: left;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason you are having this issue is because "#holder" has a fixed with of 975px; and between #leftblock and #midblock the grand total width exceeds it's parent element (#holder) width. To compensate the #midblock will be positioned underneath #leftblock to fit your content inside the width you specified; that being 975px. Basically you exceeded the parents width by 62px.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Brandon Dorsey View Post
    The reason you are having this issue is because "#holder" has a fixed with of 975px; and between #leftblock and #midblock the grand total width exceeds it's parent element (#holder) width. To compensate the #midblock will be positioned underneath #leftblock to fit your content inside the width you specified; that being 975px. Basically you exceeded the parents width by 62px.
    Brandon's observation is spot on.

    Changing the inline width of id midblock will solve the problem easily enough.

    Code:
    FROM:
    <div id="midblock" style="width:85%;">
    
    TO:
    <div id="midblock" style="width:77%;">
    Realize that padding and margins that are occupying the additional 8% of the width (the box model thing).

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help!!


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
  •