Right element is shifted down after float: left

Question

I have the following html:

<div id="table"></div><br>
<div id="slider-range" type="range"/></div>

And css for them:

#table {
    width: 507px;
    height: 200px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
}
#slider-range {
    height: 200px;
    float: left;
}

I expect to have these elements to be aligned to each other, so that they stacked together side-by-side with some margin and also to their top positions will be the same. However, I get the following:

How can I make my slider to be vertically aligned with the table?

Answer 1

You could possibly try adjusting the top-margin on your "slider-range" class in order to squish it up nearer to the top of the page, thereby lining it up with the table.

Or, I suppose, conversely you could make the top-margin of the table div larger so that it is pushed down and lined up next to the slider.

Answer 2

You could position your elements within an offset parent using a position:relative to declare the offset parent and absolute positions for your children.

This means you can avoid using floats which can cause a bit of a headache.

In this example I've used pixel values for width etc as in your question, but you could use percentages if you want a more fluid grid. Also I've stuck some coloured borders on just to show where the divs are.

<div id="container">
    <div id="table"></div>
    <div id="slider-range" type="range"/></div>
</div>

#table {
    border: 2px solid red;
    width: 507px;
    height: 200px;
    overflow: hidden;
    margin-right: 20px;
}
#slider-range {
    border: 2px solid blue;
    height: 200px;
    position: absolute;
    width: 35px;
    right: 0px;
    top: 0px;

}

#container {
    border: 2px solid yellow;
    width: 550px;
    height: 200px;
    position: relative;
}