CODEWITHSUNDEEP
csscss-float
user2586153
user2586153

Reputation: 136

css floated element position collapse when resized

Whenever I resize the browser, the 2nd div in .container positions below the first one.

<div class = "container">
     <div class = "one"></div>
     <div class = "two"></div>
</div>

The divs are really blank.

CSS

.container{
    overflow: hidden;
    width: 810px;
    min-width: 810px;
}
.one,.two{
    width: 300px;
    height: 450px;
}
.one{float:left}

Upvotes: 0

Views: 580

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157334

I just realized that, you are not floating the other element, this is causing it to shift down, you should use float: left; or right as it's a div so it will take up entire horizontal space, and hence it is pushed down.

Demo

.one, .two{
    width: 300px;
    height: 450px;
    float:left; /* Float both elements */
    background: #f00;
}

Alternative

You should use display: inline-block; and white-space: nowrap; to prevent the wrapping of the elements

Demo

This will gave you the same effect, the only thing is 4px white space, you can simply use

.two {
   margin-left: -4px;
}

the above will fix the white space issue for you

Demo 2

Upvotes: 3

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Give your body a minimum width:

body {
    min-width: 1110px;
}

Then, when the viewport gets smaller than 1110px the scrollbar will appear.

Note: if you add margin, padding or border to the divs, add it to the min-width of the body (or take some extra space).

Upvotes: 0

long.luc
long.luc

Reputation: 1191

Add this CSS. Demo.

.two {
    margin-left: 300px;
}

PS: When works with float, you should clearfix.

Upvotes: 0

Related Questions