SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble with floats

    URL: http://goo.gl/QDfnhh

    Hello,

    On this home page, I need to make the 3 posts in the desserts section (on the left side) float so they are a row of 3. I've been all through the CSS, but I'm just not seeing what's preventing them from floating. I'm using this code:

    Code:
    .home-bottom .featuredpost {
    	clear: none;
    	float: left;
    	width: 300px;
    }
    What am I missing?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Those styles are targeting the container div, so the whole thing is set to a max-width of 300px, meaning you just get one narrow column. You need instead to target the individual boxes inside that, something like this:

    Code:
    .featuredpost .entry {
      width: 300px; 
      float: left;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my gosh. :/ Something so silly. Thank you so much for taking a look!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    No problem! Glad that helped. I see you've tweaked things a bit, which is good. I figured you'd want three per row.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely. Now I'm having trouble getting everything spaced correctly. I need about 35-40px between each circle while keeping the circles at around 200px wide. Everything I try makes the circles shrink in size. Do you see the problem?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you remove the padding from those boxes, the large .entry padding takes over. An alternative would be something like this:

    Code:
    .home-bottom .featuredpost .entry {
    clear: none;
    float: left;
    padding: 0 10px;  /* REMOVE */
    padding: 0 1rem;  /* REMOVE */
    text-align: center;
    max-width: 220px;
    padding: 0 40px 0 0; /* ADD */
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot that I needed to remove the padding from the larger .entry section, so I did that. I also increased the width of .home-bottom .featuredpost .entry to 230px. Then I added the 40px right padding and although they are now spaced correctly, the images are only 190px wide instead of the required 200px.

    If I increase the width of .home-bottom .featuredpost .entry to 240px, the images are correctly sized, but obviously, they won't fit in a row of 3.

    Is the designer's math off?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    What about if you remove the right padding from the last item.

    Code:
    .home-bottom .featuredpost .entry:last-child{padding-right:0}
    .home-bottom .featuredpost .entry { max-width: 240px;}
    Older browsers will need a class instead of last-child.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Paul. That works. How old do you think the browsers are that will need the class? More than 2 versions back?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by susannelson View Post
    How old do you think the browsers are that will need the class? More than 2 versions back?
    This will give you an indication: http://caniuse.com/css-sel3

    Basically, IE8 and under are the problem children, and the only one worth considering nowadays is IE8.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, thank you for that link. That's very helpful.

    Can I ask one more question while I'm here? It's about a different section of this site. In the right sidebar, there's a subscribe form that's supposed to overlap the right side of the container. It should look like a ribbon like the ones on the left but for some reason, I can't get it to overlap unless I take the padding off the sides of .site-inner. But I need that padding.....

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by susannelson View Post
    Can I ask one more question while I'm here?
    Absolutely not. <joke>

    One thing you could do is this:

    Code:
    .sidebar .enews-widget {
        right: -40px;
    }
    Might need to adjust those px a bit.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    I have the right margin set to -50px/-5rem right now and it's not quite working. For some reason, it won't extend past the page container. I'm so confused since it's working on the left side just fine.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that your ribbon is 376px wide but it's inside a column that is only 330px wide. Anything outside the 330px is basically overflow and the margin won't really work.

    Try this instead.

    Code:
    .sidebar .enews-widget{
    position:relative;
    margin-right:0;
    width:376px;
    max-width:none;
    left:6px;
    }

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul. And thanks for explaining why it wasn't working for me. I appreciate you!


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
  •