HTML + CSS DIV выравнивание макета

Я пытаюсь создать сайт портфолио, но я просто не могу понять часть CSS в сочетании с DIV. Я пытаюсь сделать сайт с этим макетом:HTML + CSS DIV выравнивание макета

Hand-drawn picture of layout design

И это то, что у меня есть:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu { 
 
    height: 100vh; 
 
    width: 380px; 
 
    background-color: #5B91AC; 
 
    float: left; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 20px 10px; 
 
} 
 
.menu img { 
 
    width: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    left: 400px; 
 
    width: 100%; 
 
    background-color: yellow; 
 
    padding: 20px 10px; 
 
} 
 
.content { 
 
    max-width: 768px; 
 
}

<body> 
 
    <!-- Start of menu (at left side) --> 
 
    <div class="menu"> 
 
    <img class="logo" src="http://placehold.it/788x208" /> 
 
    </div> 
 
    <!-- End of menu --> 
 

 
    <div class="container"> 
 
    <div class="content"> 
 

 
    </div> 
 
    </div> 
 
</body>

http://jsfiddle.net/gv19a3mw/1/

Может кто-то точка меня в правильном направлении или помогите мне с моим CSS?

источник

2015-03-12 Jan van Dijk

Это, как вы можете добиться того, что вы хотите Demo Pen

*{ 
    box-sizing: border-box; 
} 
body { 
    margin: 0; 
    padding: 0; 
} 
.menu{ 
    height:100vh; 
    width: 25%; 
    background-color: #5B91AC; 
    float: left; 
    position: fixed; 
    top: 0; 
    left: 0; 
    padding: 20px 10px; 
} 
.menu img { 
    width: 100%; 
} 
.container { 
    width: 75%; 
    background-color: #bdc3c7; 
    padding: 20px 10px; 
    margin: 0 0 0 25%; 
    float: left; 
} 
.content { 
    /* max-width:768px */; 
    background-color: #ecf0f1;  
}

источник

2015-03-12 13:53:38

Спасибо! Это сработало! –

@JanvanDijk Вы можете принять ответ, чтобы он помог другим! –

HTML + CSS DIV выравнивание макета

ответ

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