<...">
Clever Geek Handbook

Right element moves down after float: left

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 these elements to be aligned with each other, so that they stack together side by side with some margin, and also to their top positions will be the same. However, I get the following:

enter image description here

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

+3


source to share


2 answers


You could try adjusting the top edge of your slider class to bring it closer to the top of the page, thus lining it up into a table.



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

+2


source


You can position your elements at the parent offset using position: relative to the parent's declaration of the offset and absolute positions for your children.

This means you can avoid the use of floats, which can cause a slight headache.



In this example, I used pixel values ​​for width, etc., as in your question, but you can use percentages if you want a more fluid grid. Also, I got stuck on some colored borders 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;
}
+2


source






More articles:


All Articles