[Solved] My floating div has problems.

[NikeAirforce1s]

Hey guys, please just a few things wrong and I’ve been battling these and reached a dead end.

A big problem is I’ve got 3 divs all floated left with a 33% width to fit in my 1170px container, this fits fine but when I apply a padding to the right they break…I tried to add “box-sizing:border-box” but this didn’t help. so the following section class also creeps up while one of the “col-one-third” is on another line, I added a clear fix to the parent but this didn’t resolve my issue.

Here it is on codepen.

http://codepen.io/waggawagga/pen/OPPWzE

Also the jumbo area, how can I get the “sign up for free” to be aligned to the center just like “porfolio bear and it’s free and awesome”.

Lastly, can someone explain why I needed to float my logo to the left? I’ve seen tutorials where they don’t float their logo but just float the the nav to the right and it stays, I had to add float left for my layout to header to appear like I wanted.

Thanks for your time.

[Paulie_D]

OK, one thing at time.

A big problem is I’ve got 3 divs all floated left with a 33% width to fit in my 1170px container,

Which three divs? The ‘features’ section?

That would be the margin you’ve added.

http://codepen.io/Paulie-D/pen/MYYJPY

[Paulie_D]

Also the jumbo area, how can I get the “sign up for free” to be aligned to the center just like “porfolio bear and it’s free and awesome”.

Just add text-align:center the parent.

I threw in some margin-bottom on the h2 for soem separation too

http://codepen.io/Paulie-D/pen/gbbgQj

[NikeAirforce1s]

Paulie thanks…I don’t now why I didn’t think of adding text-align:center to the parent but appreciate your help.

Yes those “feature divs”, I realised it’s the margin 10px that I added but I thought if I then use the box-sizing:border box it’ll fit, I’d like to have a bit of margins between the divs as with no margins they’re bunched up together,

Thanks

[Paulie_D]

Margin are extra to the width even with border-box.

If you want some apparent vertical separation to those divs add some internal left/right padding

http://codepen.io/Paulie-D/pen/KwwajK

[NikeAirforce1s]

Thank you so so much for your time…I was really stuck on it from yesterday and just put it the side.

Best regards.

[Author]

Posts