CODEWITHSUNDEEP
cssjquery-mobile
Kern Elliott
Kern Elliott

Reputation: 1659

Ensure divs never cross each other

I have 2 divs that are side by side and each have a width of 50% and float left what I want however is that if they cannot fit on the page that one div should drop below the other div. How can I do this in CSS? I should also mention am using jQuery Mobile if that makes a difference. My code is below: #artistimage,#artistinfo{ width: 50%; float: left; }

Upvotes: 0

Views: 194

Answers (1)

Antonis Grigoriadis
Antonis Grigoriadis

Reputation: 2080

As you can see here http://jsfiddle.net/PMXpb/ they always fit when they are set 50% width. {width:50%; height: 100px; float:left;}

If you set them at a fixed width (a pixel value) the one will drop below the other when there will be not enough space, like here: http://jsfiddle.net/Yk4sX/ {width:300px; height: 100px; float:left;}

You can test the 2 cases by resizing the browser.

Upvotes: 1

Related Questions