Basic HTML Layout

Я пытаюсь реализовать простой макет, тесно представлены следующим образом:Basic HTML Layout

_________________________ 
|  | header |  | 
| L |_____________| R | 
|  |    |  | 
|  |    |  | 
|  |    |  | 
|  | main  |  | 
|  |    |  | 
|  |    |  | 
|  |    |  | 
|_____|_____________|_____|

Я разработал этот код, чтобы достичь своей цели:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Layout</title> 
<style> 

    * { 
     margin: 0px; 
     padding: 0px; 
    } 
    p { 
     text-align: center; 
    } 
    div#left { 
     float: left;  
     background-color: #777; 
     width: 200px; 
     height: 650px; 
    } 
    div#header { 
     float: left;  
     background-color: #eee; 
     width: 940px; 
     height: 60px; 
    } 
    div#main { 
     float: left;  
     width: 940px; 
    } 
    div#right { 
     float: right; 
     background-color: #777; 
     width: 200px; 
     height: 650px; 
    } 
</style> 
</head> 

<body> 
    <div id="left"> 
     <p>Left</p> 
    </div> 

    <div id="header"> 
     <p>Header</p> 
    </div> 

    <div id="main"> 
     <p>Main</p>  
    </div> 

    <div id="right"> 
     <p>Right</p> 
    </div> 
</body>

Но я не могу» t получите «правый» столбец, чтобы оставаться вровень с вершиной. Может кто-нибудь указать мне, что изменить в моем CSS, чтобы исправить это? Спасибо!

источник

2012-05-25 tessiof

Переместите правый столбец в верхней части HTML:

<body> 

    <div id="right"> 
     <p>Right</p> 
    </div> 

    <div id="left"> 
     <p>Left</p> 
    </div> 

    <div id="header"> 
     <p>Header</p> 
    </div> 

    <div id="main"> 
     <p>Main</p>  
    </div> 
</body>

источник

2012-05-25 13:43:59

Все отлично сейчас! Благодаря! – tessiof

Джон Conde ответ является правильным. Но чтобы помочь вам визуализировать изменения, измените свою ширину на процент, и вы увидите, что он имеет в виду. :)

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Layout</title> 
    <style> 

     * { 
     margin: 0; 
     padding: 0; 
     } 
     p { 
     text-align: center; 
     } 
     div#left { 
     background-color: #777777; 
     float: left; 
     height: 650px; 
     width: 15%; 
     } 
     div#header { 
     background-color: #EEEEEE; 
     float: left; 
     height: 60px; 
     width: 70%; 
     } 
     div#main { 
     float: left; 
     width: 70%; 
     } 
    div#right { 
     background-color: #777777; 
     float: right; 
     height: 650px; 
     width: 15%; 
    } 
    </style> 
    </head> 

    <body> 
    <div id="left"> 
     <p>Left</p> 
    </div> 
    <div id="right"> 
     <p>Right</p> 
    </div> 
    <div id="header"> 
     <p>Header</p> 
    </div> 

    <div id="main"> 
     <p>Main</p>  
    </div> 
    </body>

источник

2012-05-25 14:09:24 Bob

Для правильного, совместимого с несколькими браузерами, плавающих макетов важно правильно упорядочить элементы. Чтобы достичь этого, вы всегда должны иметь элементы с плавающей точкой, которые появляются перед неплавающими элементами.

Вы также должны указать приоритет вертикальной компоновки, например, если заголовок в вашем примере будет распространяться по всей ширине страницы, это произойдет перед любыми перемещаемыми элементами, которые следуют за ним.

источник

2012-05-25 14:11:46

Basic HTML Layout

ответ

Смежные вопросы