treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Empty divs just feel wrong...

  • I'm pretty new to css layout so maybe I'm doing this all wrong. When I need to float something I seem to need to do a clear:both afterwards to keep from screwing up whatever follows. I've been doing it like this:


    <div style=\"float: left;\">Put something here.</div>
    <div style=\"float: left;\">Put something next to it.</div>
    <div style=\"float: right;\">Put something on the right.\"</div>
    <div style=\"clear: both;\"></div>


    That really feels like a hack. Is there a better way?
  • You can clear a float without markup:
    http://www.positioniseverything.net/easyclearing.html

    However, I still often choose the empty DIV method as I like to have exact control over WHERE the float gets cleared. Sometimes there just isn't a container DIV that makes sense to clear.
  • Thanks for the response. I read the article you linked and the ones that one linked plus some others. I guess the empty div approach is pretty standard and it looks to be more straight forward than the alternatives. It just felt wrong so I wanted to make sure it was a good approach before I began using it heavily. Thanks again.
  • If your content allows, you can use any following block-level element to clear your floats. So, if you have a footer - this could double as a float clearer for the preceding floated elements.
  • "mikes" said:
    I'm pretty new to css layout so maybe I'm doing this all wrong. When I need to float something I seem to need to do a clear:both afterwards to keep from screwing up whatever follows. I've been doing it like this:


    <div style=\"float: left;\">Put something here.</div>
    <div style=\"float: left;\">Put something next to it.</div>
    <div style=\"float: right;\">Put something on the right.\"</div>
    <div style=\"clear: both;\"></div>


    That really feels like a hack. Is there a better way?


    You don't have a width to your floats. Therefore it will float left and set a width to the size of your content within it. The divs with floats positioned after then will float to the left and not clear because of the lack of a width.
  • That was just a quick example but often I do leave off width. I haven't run into an issue with it yet but I'm sure it would have driven me crazy when I did. Thanks for the heads up!