Простой шаблон HTML HTML

У меня возникли проблемы с написанием макета CSS с центрированным контентом, простым заголовком изображения, двумя столбцами (nav и основным контентом) и, наконец, нижним колонтитулом ниже.Простой шаблон HTML HTML

Проблема заключается в том, что я не могу заставить столбцы навигации/основного содержимого удерживать размер (соответственно 200 и 718 пикселей соответственно) и оставаться в центре с верхним/нижним колонтитулом при манипулировании окном браузера.

Я пробовал различные типы позиционирования и контейнеры, плавающие навигация/основные столбцы всегда вырывают их из контейнера.

Любые идеи?

CSS:

body { 
    text-align: center; 
    margin: 0px 0px; 
    padding: 0px; 
    background-color: #FFFFFF; 
    font-family: Tahoma, Arial, sans-serif; 
} 

.header { 
    max-width: 918px; 
    margin: 15px auto; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

.container { 
    position: relative; 
    width: 100%; 
} 

.nav { 
    display: inline; 
    width: 200px; 
    border-right: #111 solid 2px; 
} 

.main { 
    display: inline; 
    width: 700px; 
} 

.footer { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

HTML:

<body> 
     <div class="header">header</div> 
     <div class="container"> 
      <div class="nav">navigation</div> 
      <div class="main">main</div> 
     </div> 
     <div class="footer">footer</div> 

</body>

источник

2014-02-15 user3312739

Вы хотите, чтобы главный div находился ниже nav или в правой части nav? –

Мне нужен главный div справа от навигатора .... у slash197 было идеальное решение! Большое спасибо! – user3312739

Попробуйте это:

.nav { display: inline-block; width: 200px; } 
.main { display: inline-block; width: 700px; } 
.container { display: block; width: 900px; margin: 0px auto; }

источник

2014-02-15 07:15:44 slash197

Это сработало отлично! Спасибо огромное! – user3312739

Изменение вы Css с этим на

body { 
    text-align: center; 
    margin: 0px 0px; 
    padding: 0px; 
    background-color: #FFFFFF; 
    font-family: Tahoma, Arial, sans-serif; 
} 

.header { 
    max-width: 918px; 
    margin: 15px auto; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      border:1px solid red; 
} 

.container { 
clear: both; 
    margin: 0 auto; 
    width: 100%; 
} 
.contain{ 

width:960px; 
margin: 0 auto; 
position: relative; 
} 
.nav { 
    width: 200px; 
    border-right: #111 solid 2px; 
    border:1px solid yellow; 
    float:left; 
    word-wrap: break-word; 
} 

.main { 
    width: 718px; 
    border:1px solid blue; 
    float:left; 
    word-wrap: break-word; 
} 

.footer { 
clear:both; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      border:1px solid green; 
}

и HTMl с этим.

<body> 
     <div class="header">header</div> 
     <div class="container"> 
      <div class="contain"> 
       <div class="nav">navigationnavigationnavigationnavigationnavigationnavitionnavigation</div> 
       <div class="main">mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmnmainmainmainmain</div> 
      </div> 
     </div> 
     <div class="footer">footer</div> 
</body>

Это будет хорошо работать.

Удачи ....

источник

2014-02-15 07:39:44

Простой шаблон HTML HTML

ответ

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