css floated element position collapse when resized

Question

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}

float "two" left as well. Or maybe on container `display: inline` — Simon Staton, Sep 02 '13 at 09:30

Mr. Alien · Accepted Answer · 2013-09-02T09:35:49.750

3

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

edited Sep 02 '13 at 09:35

answered Sep 02 '13 at 09:30

Mr. Alien

153,751
34
298
278

inline-block is not supported by many browsers. Using float + margin in my opinion is better. – long.luc Sep 02 '13 at 09:37
@mr.d what :O who told you inline block is not supported? http://caniuse.com/inline-block – Mr. Alien Sep 02 '13 at 09:37
I used to develop some mobile websites, viewed by old model devices, so I have the experience. As you can see in your link, many old mobile browsers do not support inline-block. – long.luc Sep 02 '13 at 09:42
You just can not control what devices that viewers use. – long.luc Sep 02 '13 at 09:44
@mr.d pheeew I don't wanna debate more on this but seriously there will be no issue if you use `display: inline-block;` and btw no one uses 1990's phone models anymore.. – Mr. Alien Sep 02 '13 at 09:48
@Mr.Alien I already did your answer but it still pushes the .two below .one. – user2586153 Sep 03 '13 at 02:42
@user2586153 Did you saw the demos? – Mr. Alien Sep 03 '13 at 02:43
@Mr.Alien yes, I saw the demos. I implemented it but it still re-positions itself. – user2586153 Sep 03 '13 at 03:27
1

@Mr.Alien my mistake. I haven't uploaded it to server. It works fine now. – user2586153 Sep 03 '13 at 03:34

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

Add this CSS. Demo.

.two {
    margin-left: 300px;
}

PS: When works with float, you should clearfix.

edited May 23 '17 at 10:26

Community

1
1

answered Sep 02 '13 at 09:30

long.luc

1,191
1
10
30

score 0 · Answer 3 · answered Sep 02 '13 at 09:32

0

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).

answered Sep 02 '13 at 09:32

GreyRoofPigeon

17,833
4
36
59

shouldn't be the container have this attribute? – user2586153 Sep 03 '13 at 03:14
You could... Works too. – GreyRoofPigeon Sep 03 '13 at 17:23

css floated element position collapse when resized

3 Answers3