CODEWITHSUNDEEP
htmlcsscss-float
Ian McIntyre Silber
Ian McIntyre Silber

Reputation: 5663

float: left not working as expected

Here's the link: http://www.iancreates.com/3dbikefit/

The divs .pod have the following CSS:

.pod {
background-color: rgba(255, 255, 255, 0.898438);
border-bottom-right-radius: 15px 15px;
border-top-left-radius: 15px 15px;
color: black;
float: left;
font-size: 12px;
padding: 15px;
width: 270px;
}

Any ideas?

Upvotes: 0

Views: 1451

Answers (2)

Ben
Ben

Reputation: 3972

Your container div only has a width of 550px, so your pods won't fit in. 270+15+15 = 300px width... so only 1 can fit in that 550px. You most likely want to move it outside of the container div.

Upvotes: 5

Joel Etherton
Joel Etherton

Reputation: 37543

Padding is your problem. The container they sit in is limited to 550px. You've added 15px both to the left and right on your pods. This makes the total width of each 300px. Since they're limited to 550px they stack. You need to reduce the total width+padding on the pods or increase the width of the container.

Upvotes: 1

Related Questions