0

Всем привет ребята, я в html и css новичок.

Мне надо правильно сверстать с float такую страницу

Попытался что то сделать и вот что получилось:

https://jsfiddle.net/vp6xmtjf/

html, body {
    width: 100%;
    height: 100%;
}
 
#main{
    width: 1000px;
    height: 80%;
    margin: 0 auto;
    border: 1px solid black;
}
 
#content{
    width: 60%;
    height: 60%;
    float: left;
    border: 1px solid black;
    overflow: auto;
}
 
#content p{
    margin: 0 auto;
    width: 80%;
}
 
#localNavigation{
    background: #F7F7D0;
    height: 550px;
    width: 20%;
    float: left;
}
 
#relatedLinks{
    background: #F8E9F8;
    width: 20%;
    height: 550px;
    float: right;
}
 
#identity{
    background: #B4C7E7;
    height: 130px;
    float:left;
}
 
#pageHeader{
    background: #F4F7FC;
    height: 130px;
    float:left;
}
 
#pageFooter{
    background: #D0F7DD;
    height: 60px;
}
 
body {
    background-color:#FFFFFF;
    color:#000000;
}
 
.clearfix {
    clear:both;
}
<div id="main">

  <div id="identity">
    Identity
  </div>

  <div id="pageHeader">
    Page Header
  </div>

  <div id="localNavigation">
    <p>Local navigation</p>
  </div>

  <div id="content"><p>Lorem ipsum ea sea quot nonumy, te per detracto sadipscing. Te nec
    assum percipit intellegam, dicam bonorum fabellas qui te. Prodesset
    signiferumque mea eu, eu homero denique perfecto eam, te vix cetero
    commune. Atqui omittam no nam. Te vis harum fuisset recusabo, ne has
    possim adolescens. Et eam noster quodsi apeirian.
    Ut has sint quaestio, ei usu alterum expetenda salutatus. Quem
    fabellas no sed, quo in probo debet minimum. Ea vel urbanitas
    mnesarchum. Nam nulla vulputate vituperata ut, qui at graecis
    invidunt abhorreant. Ad cum eruditi accusam, ex iusto oportere
    deseruisse usu. Summo movet vulputate mea at. Id vel libris
    honestatis.
    Te eius natum tantas eam, melius offendit singulis eum ad. Inermis
    imperdiet ne his, an alia doctus mea. Audire alienum delectus mea
    te, odio libris putent ne eam, at has cibo habemus democritum. At
    mei errem phaedrum. Ut eligendi tincidunt sea, te nam verear
    quaerendum. Mel quot ullum cetero ne, debet dissentiunt ut mei.
    Ei mei altera mandamus, vix facilis contentiones ea. Ea ceteros
    torquatos pro, usu et fabulas salutatus. An sea wisi prima
    dissentiunt. Vel eu sumo detraxit mediocrem.
    Duo sumo recusabo adversarium ei, an prima facete mel. Ius ei postea
    deserunt. Feugait deseruisse interpretaris id est. Et tollit mollis
    vix. Duis erat pri in, appareat scripserit an nam.
    Ea has debet nusquam, no sea melius alterum platonem. Ne sit aeque
    consul, choro appareat maiestatis vel at. Ad sale nihil omittantur
    quo, iriure liberavisse delicatissimi ad sit, kasd labores
    instructior ad mea. Ei choro appetere has. Est exerci delenit
    appellantur ut, rebum tation cu mei.
    Sed modo duis ne, vis id clita inciderint. His ex alii libris
    contentiones. An eius detraxit aliquando sea, idque graecis scaevola
    an vim, verear meliore vivendo sed an. Aliquid dissentiet ius ei,
    postea admodum vis an. Vix at lorem nemore, natum dicit per ex, ad
    vim vero concludaturque. Quo ei habemus reprehendunt, option
    evertitur te vim.
    Usu no adolescens interesset referrentur. Usu id scripta veritus, in
    ponderum adipisci sea, ius ea errem choro democritum. Ei duo
    perfecto accusamus torquatos, mel id dico mediocrem. Sonet
    mediocritatem cum ad, at eam molestie repudiandae, ius eu veniam
    philosophia consectetuer. Timeam deterruisset no vel. Per fugit
    explicari definiebas ea, cum homero legimus luptatum te.
    Ea partem animal eam, eum eu sint feugiat. Essent eirmod deleniti
    mel ut, in eam legere consulatu. Sea congue civibus te, inani
    invenire maiestatis vim cu, inani facete nam ut. An urbanitas
    persecuti eum. Mutat mucius consulatu cu nec, facer dolores
    cotidieque at est. Has quas semper ne, usu homero nonummy
    concludaturque ad.
    Eum consul soluta id. Adipisci honestatis mediocritatem ut vel, cum
    ex omnium persecuti efficiendi. Veri nominavi his ex. Ex aliquando
    philosophia est, velit soluta vix at. In tale nullam sit. Ex mel
    labores inermis, mei option commodo hendrerit et.</p>
  </div>

  <div id="relatedLinks">
    Related Links
  </div>

</div>

Подскажите как правильно сделать.

Заранее спасибо!

2
  • я голосую за закрытие этого вопроса, так как ответ на него вряд ли может быть полезен кому-либо помимо автора вопроса. 11 апр 2016 в 7:30
  • смотря какой ответ 11 апр 2016 в 10:33

2 ответа 2

1

Держи, там только с рамкой проблема в 1 пиксель

 html,
 body {
   width: 100%;
   height: 100%;
 }
 body {
   background-color: #FFFFFF;
   color: #000000;
 }
 #identity {
   background: #B4C7E7;
   width: 20%;
   height: 130px;
   float: left;
 }
 #pageHeader {
   background: #F4F7FC;
   height: 130px;
   width: 80%;
 }
 .conc {
   clear: both;
 }
 #localNavigation {
   background: #F7F7D0;
   height: 550px;
   width: 20%;
   float: left;
 }
 #content {
   width: 60%;
   height: 550px;
   float: left;
   border: 1px solid black;
   overflow-y: scroll;
 }
 #content p {
   margin: 0 auto;
   width: 80%;
 }
 #relatedLinks {
   background: #F8E9F8;
   width: 19%;
   height: 550px;
   float: right;
 }
 footer {
   clear: both;
   background: #D0F7DD;
   height: 60px;
 }
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Labb3 c</title>

</head>

<body>

  <div id="main">

    <div id="identity">
      Identity
    </div>

    <div id="pageHeader">
      Page Header
    </div>
  </div>
  <div class='conc'>
    <div id="localNavigation">
      <p>Local navigation</p>
    </div>
    <div id="content">
      <p>Lorem ipsum ea sea quot nonumy, te per detracto sadipscing. Te nec assum percipit intellegam, dicam bonorum fabellas qui te. Prodesset signiferumque mea eu, eu homero denique perfecto eam, te vix cetero commune. Atqui omittam no nam. Te vis harum
        fuisset recusabo, ne has possim adolescens. Et eam noster quodsi apeirian. Ut has sint quaestio, ei usu alterum expetenda salutatus. Quem fabellas no sed, quo in probo debet minimum. Ea vel urbanitas mnesarchum. Nam nulla vulputate vituperata
        ut, qui at graecis invidunt abhorreant. Ad cum eruditi accusam, ex iusto oportere deseruisse usu. Summo movet vulputate mea at. Id vel libris honestatis. Te eius natum tantas eam, melius offendit singulis eum ad. Inermis imperdiet ne his, an alia
        doctus mea. Audire alienum delectus mea te, odio libris putent ne eam, at has cibo habemus democritum. At mei errem phaedrum. Ut eligendi tincidunt sea, te nam verear quaerendum. Mel quot ullum cetero ne, debet dissentiunt ut mei. Ei mei altera
        mandamus, vix facilis contentiones ea. Ea ceteros torquatos pro, usu et fabulas salutatus. An sea wisi prima dissentiunt. Vel eu sumo detraxit mediocrem. Duo sumo recusabo adversarium ei, an prima facete mel. Ius ei postea deserunt. Feugait deseruisse
        interpretaris id est. Et tollit mollis vix. Duis erat pri in, appareat scripserit an nam. Ea has debet nusquam, no sea melius alterum platonem. Ne sit aeque consul, choro appareat maiestatis vel at. Ad sale nihil omittantur quo, iriure liberavisse
        delicatissimi ad sit, kasd labores instructior ad mea. Ei choro appetere has. Est exerci delenit appellantur ut, rebum tation cu mei. Sed modo duis ne, vis id clita inciderint. His ex alii libris contentiones. An eius detraxit aliquando sea, idque
        graecis scaevola an vim, verear meliore vivendo sed an. Aliquid dissentiet ius ei, postea admodum vis an. Vix at lorem nemore, natum dicit per ex, ad vim vero concludaturque. Quo ei habemus reprehendunt, option evertitur te vim. Usu no adolescens
        interesset referrentur. Usu id scripta veritus, in ponderum adipisci sea, ius ea errem choro democritum. Ei duo perfecto accusamus torquatos, mel id dico mediocrem. Sonet mediocritatem cum ad, at eam molestie repudiandae, ius eu veniam philosophia
        consectetuer. Timeam deterruisset no vel. Per fugit explicari definiebas ea, cum homero legimus luptatum te. Ea partem animal eam, eum eu sint feugiat. Essent eirmod deleniti mel ut, in eam legere consulatu. Sea congue civibus te, inani invenire
        maiestatis vim cu, inani facete nam ut. An urbanitas persecuti eum. Mutat mucius consulatu cu nec, facer dolores cotidieque at est. Has quas semper ne, usu homero nonummy concludaturque ad. Eum consul soluta id. Adipisci honestatis mediocritatem
        ut vel, cum ex omnium persecuti efficiendi. Veri nominavi his ex. Ex aliquando philosophia est, velit soluta vix at. In tale nullam sit. Ex mel labores inermis, mei option commodo hendrerit et.</p>
    </div>
    <div id="relatedLinks">
      Related Links
    </div>
  </div>

  <footer>

  </footer>





  </div>

  <!-- W3C 
logos for valid HTML5 and CSS3 -->
  <!--<div class="clearfix"></div>
<div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/html/logo/downloads/HTML5_Logo_64.png"
alt="Valid HTML5" height="50" width="50"
style="border:0;" /></a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
</div> -->

</body>

</html>

`

1
  • Спасибо за ответ и потраченное вами время для помощи, для меня как новичка это очень ценно!) 10 апр 2016 в 19:21
1

Вам нужно вложить элементы каждого ряда в блок:

[[][]]  
[[][][]]  
[[]] 

но есть один нюанс float: left заставляет блочные элементы "прилепляться" друг за другом, и, чтобы сбросить это поведение для следующего ряда элементов - одного контейнера недостаточно, нужно использовать clearfix для этого контейнера.
Кроссбраузерный clearfix вот:

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

его нужно назначить каждому контейнеру ряда.

Но также, для современных браузеров, хорошим вариантом будет использование dispay: inline-block - это также позволяет прилеплять блоки друг за другом, но лишено проблемы float-блоков, т.е. для сброса ряда достаточно обычного внешнего контейнера.

1
  • Спасибо, дельный совет!)) 10 апр 2016 в 19:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.