HTML+CSS structure (header+menu+aside+main+footer)

116

10 апреля 2021, 05:00

Может кто-то пояснить как разместить блоки (Aside1,Aside2,Main,Aside3)В строку как на картинке ,только с использованием Float

Спасибо!

Answer 1

Сверстал для Вас макет.

Можете смотреть на реальном примере, как это можно сделать

https://codepen.io/hisbvdis/pen/PMorwe?editors=1100

* { 
    box-sizing: border-box; 
    color: #fff; 
    font-weight: 700; 
    font-family: Arial, Helvetica, sans-serif; 
} 
body * { 
    padding: 25px 15px; 
    border: 1px solid #000; 
} 
 
.header { 
    background: #913157; 
} 
.menu { 
    margin: 10px auto 10px; 
     
    background: #6E1237; 
} 
.aside1 { 
    width: 20%; 
    margin-bottom: 10px; 
 
    background: #B55B7F; 
} 
.aside2 { 
    width: 20%; 
    background: #B55B7F; 
} 
.aside3 { 
    width: 15%; 
    background: #B55B7F; 
} 
.main { 
    margin-left: calc(20% + 10px); 
    margin-right: calc(15% + 10px); 
    background: #B55B7F; 
    /* width: 65%; */ 
} 
.section1 { 
    background: #DB92AF; 
    margin-bottom: 10px; 
} 
.section2 { 
    background: #DB92AF; 
} 
.left { 
    float: left; 
} 
.right { 
    float: right; 
} 
.clearfix { 
    clear: both; 
}

<header class="header"> 
    HEADER 
</header> 
 
<nav class="menu"> 
    MENU 
</nav> 
 
<aside class="aside3 right"> 
    ASIDE 3 
</aside> 
 
<aside class="aside1 left clear"> 
    ASIDE 1 
</aside> 
 
<aside class="aside2 clearfix left"> 
    ASIDE 2 
</aside> 
 
<main class="main"> 
    MAIN CONTENT 
    <section class="section1"> 
        SECTION 1 
    </section> 
 
    <section class="section2"> 
        SECTION 2 
    </section> 
</main>