CODEWITHSUNDEEP
htmlcsscss-floatsidebar
Steve
Steve

Reputation: 1765

Floated element is coming below, instead of to side

I'm not sure what code is causing this problem, hence I would ask that you view the live site please.

The sidebar #widgets is not level with the top of #content. It is about 1430px below being level with #content, and Chrome inspector shows no margin, padding that is causing this.

Can you see the problem?

Upvotes: 0

Views: 42

Answers (2)

user663031
user663031

Reputation:

Put the #widgets element BEFORE #content.

enter image description here

This behavior is being caused by floats. As a general rule, place the element to be floated before the "main" element to be wrapped around the float. To simplify somewhat, float takes the element, removes it from the normal flow, places it in the specified location, then renders the following elements around the floated element.

By the time #content has rendered, it's too late to float something inside or beside it.

enter image description here

Upvotes: 1

A.J. Uppal
A.J. Uppal

Reputation: 19264

One quick fix I can think of is setting the position to absolute, and setting right to about 10px, in the css of #widgets:

#widgets {
    position: absolute;
    right: 10px;
}

Which yields:

enter image description here

Upvotes: 1

Related Questions