SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  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
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 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
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 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
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 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
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 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
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 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
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 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;
    }

  14. #14
    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
  •