Grow your CSS skills. Land your dream job.

Empty divs just feel wrong…

  • # September 23, 2008 at 7:12 pm

    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:

    Code:
    Put something here.
    Put something next to it.
    Put something on the right.”

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

    # September 23, 2008 at 9:33 pm

    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.

    # September 24, 2008 at 12:49 am

    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.

    box
    # September 24, 2008 at 4:52 am

    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.

    # September 24, 2008 at 11:52 pm
    "mikes" wrote:
    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:

    Code:
    Put something here.
    Put something next to it.
    Put something on the right.”

    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.

    # September 25, 2008 at 4:35 pm

    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!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".