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:


.home-bottom .featuredpost {
	clear: none;
	float: left;
	width: 300px;
}

What am I missing?

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:

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

Oh my gosh. :confused: Something so silly. Thank you so much for taking a look!

No problem! Glad that helped. I see you’ve tweaked things a bit, which is good. I figured you’d want three per row. :slight_smile:

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?

If you remove the padding from those boxes, the large .entry padding takes over. An alternative would be something like this:

.home-bottom .featuredpost .entry {
clear: none;
float: left;
[COLOR="#FF0000"]padding: 0 10px;  /* REMOVE */
padding: 0 1rem;  /* REMOVE */[/COLOR]
text-align: center;
max-width: 220px;
[COLOR="#0000FF"]padding: 0 40px 0 0; /* ADD */[/COLOR]
}

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?

What about if you remove the right padding from the last item.


.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.

Thanks so much, Paul. That works. 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.

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…

Absolutely not. :stuck_out_tongue: <joke>

One thing you could do is this:

.sidebar .enews-widget {
    right: -40px;
}

Might need to adjust those px a bit.

:slight_smile:

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.

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.


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


Thank you, Paul. And thanks for explaining why it wasn’t working for me. I appreciate you!