Is there anything wrong with having positioning & float?

Question

I have:

.event {
    float:left;
    position:relative;
    top: 50px;
    width: 100%;
    height: 100px;
    background-color: #FFFFFF;
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

It works to my liking in firefox & safari. Mainly float against another element, but be offset against it. I know I can use margin-top:50px for the float, but for whatever reason top makes more semantic sense to me.

Thanks! Matt Mueller

Answer 1

When using top, the containing element also has to be positioned (relative or absolute) or else you won't always get the result wanted. Does that answer your question?

Answer 2

Firstly I would try not to combine floats and relative/absolute positioning where possible. Just because of the added complexity and additional chance of cross-browser issues.

Secondly, there are valid use cases for position: relative on a float. The most obvious is to use relative+absolute positioning (where the internal elements of the float are absolutely positioned with respect to the container).

That doesn't seem to be what you're doing so I'd recommend using margin-top. You'll probably have less headaches that way. That being said, I'm not even sure top: 50 will do what you expect here.

Answer 3

Nothing wrong with that. float refers to what flow the element is rendered in. position refers to the anchor element against which this element is offset. If they were mutually exclusive the W3C recommendation would have rolled the possible options into a single property.

Answer 4

Bad idea because its position is still in the same place, but you're offsetting it from its original position and you will run into this

You should use margin:50px 0 0; in this case because it will shift any elements coming afterwards down properly. You shouldn't need to explicitly set a width:100% either.

Answer 5

There's nothing "wrong" with the way you did it. In many circumstances, that could be considered the "right" way to do it.

With that said, you should know that there's nothing more or less semantic about position: relative; top: 50px; than margin-top: 50px;. You should get comfortable doing it both ways, and I'd recommend using margin in this case and as your first approach in general.

Relative positioning messes with how elements flow in relation to each other. If you later decide you want to have another element floated left and stacked below the .event element, you'll find that .event is overlapping the top 50px of the new element. When you offset an element with relative positioning, its box remains in the layout where it would have rendered without the positioning, so it will interact weirdly with nearby elements.