Проблема с разрешением экрана

Question

У меня есть эта проблема после кодирования моей страницы индекса.Я разделил страницу на 2 столбца:

header

nav

content floating left, content floating right

footer

На моем разрешении экрана я правильно выровнял:

Content left | Content right

Но на маленьком экране это выглядит так:

Content left
        Content right

Это код:

    <div id="contentleft">
    text & content left
    </div>
    <div id="contentright">
    text & content right
    </div>

CSS:

 #contentleft {
    float:left;
    margin-left:12%;}

#contentright {
    float:right;
    margin-right:12%;}

Помощь будет очень полезна

Answer 1

float будет переноситься, когда для них не будет достаточно места.ваша CSS имеет ширину, установленную для автоматического расширения до содержимого.

Answer 2

Один из способов предотвращения перекрытия - это поместить div s в #wrapper div и дать #wrapper набор width.

#wrapper{
    width:400px;

}
#contentleft {
    float:left;
    width:120px;
    margin-left:12%;
    background:green;
}

#contentright {
    float:left;
    width:120px;
    margin-left:12%;
    background:red;
}

Пример: http://jsfiddle.net/jasongennaro/b2eyx/1/

К вашему сведению ... Я также поместил их влево и изменил margin s и добавил немного цвета, чтобы их было легче видеть.

И добро пожаловать на ТАК!

Answer 3

добавьте width к вашим Div и поместите его в%, например, 50% -50%.