float:left;

  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

How exactly does float work? It seems like if I float a div within a div to the left, it will automatically float the div after it or the element after it to the left. If I want everything to float left or right then I have no trouble.

Basically, how do I float say two elements to the left, then have the following element drop in line below those elements?
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Basically it will push block level elements to the left or right. If there are block level elements that don't have a float set on them below the one that do they will the element with the float will sit on top or below of it depending on the z-index, kind of like position absolute.

When dealing with the situation you want to happen two elements to float to the left and the rest to drop under them you need to clear the float by use of the css property clear it could be set to clear: left;, clear: right; or clear: both;. Here is an example I made on jsfiddle http://jsfiddle.net/RYEK2/
  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

Thanks man. Awesome how easy that worked lol. Just knowing the property. I've been compensating for it by using a margin-top lol to push it all the way down below the first div.
  • Veeramanikandan
  • Novice
  • Novice
  • Veeramanikandan
  • Posts: 24

Post 3+ Months Ago

the float element is used to ordering the multiple DIVs located next to one another.

Normally using multiple DIVs located one by one. But use float left element locate all the DIVs in horizontally.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 22 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.