CODEWITHSUNDEEP
htmlcsscss-float
Codist
Codist

Reputation: 1208

Floating two elements to the left?

I think I need some more assistance with the concept of floating. This time my question revolves around floating two or more elements to the left. How does this work exactly? I know that a float lifts the children of the element off the page and moves them all the way to the left. All other elements respond by wrapping around... but how does the concept of floating two elements apply to this?

Here is what I understand: Say I have two DIVs, a and b. Float a to left, b's content will wrap around it... but if I float b to the left... How does the content respond to a?

EDIT: Here is something I was messing around with to see if I could understand this concept.

enter image description here

The first DIV has an inline style that floats it to the left... But see how the second DIV with no inline style margin is all wacky?... It doesn't show this wacky margin when the DIV is floated to the left also.

Edit: I know inline styles are bad... I was just using them to showcase an example here.

Upvotes: 4

Views: 924

Answers (1)

Dennis Traub
Dennis Traub

Reputation: 51674

Here's a series of very comprehensive tutorials: Floatutorial. By following the tutorials it becomes very clear how floating works.

To answer your specific question: When you have two elements with float:left, then the surrounding content will wrap the second element, then the first if there's room left.

Example: http://jsfiddle.net/ak736

Upvotes: 6

Related Questions