Floating problem

[matt_sanford]

I am having a problem floating a picture inside an element. everytime i float it, it drops down to the next div, where it isn’t suppose to be. Here is the link to the site. http://www.foursquaresummiteast.org/i/
The problem is found underneath the navigation bar. Id is #featuring

cheers,

[djrolstad]

are you trying to have the pictures side by side if so make
.right {
float: left;
}
I don’t know what your trying to accomplish…

[matt_sanford]

There is only suppose to be one picture per div. The img that is floated to the left is suppose to be in the div above it. not below.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Special Guest Speaker:

Cornell Jordan

“
Css:

.pic {
height: 100px;
width: 100px;
margin: 5px;
display: inline-block;
margin: 25px 10px 15px 15px;
border: 1px solid black;
}

.left {
float: left
}

.right {
float: right;
}

[matt_sanford]

for some reason i can’t show my html….

[djrolstad]

ohhh I see, I’ll take a look

[djrolstad]

that’s weird… quickly took a look and can’t seem to see what the problem is.. put your html and css into codepen.io.. maybe someone else can figure this out

[Senff]

Here’s the thing…. The UL with id “checkout” is floated left. But then the element after that, sidebar-left, CLEARS the left float. So (simple way of saying it), the rest of the page will start on that height, and no other block elements will be floated next to the checkout UL.

It’s not working EXACTLY like that, which is why the paragraph and “featuring” div are on top again, but the image doesn’t ignore that clearing and that’s why it’s at that height, right under the checkout UL.

I would suggest to move that UL within the sidebar-left div.

[matt_sanford]

@Senff Thanks! it works now.

[Author]

Posts