Всем привет! Верстаю первый макет и столкнулся с неприятной трудностью.
У меня проблема следующего рода: есть два блока, один зафлоачен налево, другой направо. Внутри правого блока находится список - меню. При этом второй блок на строку ниже первого, но если убрать список и просто оставить текст, то он встаёт нормально. Что я упускаю?
<Doctipe! html>
<head>
<title>Наша компания</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="head">
<div class="layout-position">
<div class="header-content">
<div class="Name">Имя компании</div>
<div class="Menu">
<ul>
<li>О нас</li>
<li>Фото</li>
<li>Ссылки</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
<div class="layout-position">
<div class="sidebar">fdgf</div>
<div class="main_content">sdfg</div>
</div>
</div>
</body>
</html>
body {
font-family: "Arial" sans-serif;
margin: auto;
padding: 0px;
color: white;
width: 1400px;
}
.head {
height: 100px;
background-color: #5DB3E2;
}
.layout-position {
margin: auto;
width: 800px;
border: 2px dashed black;
}
.layout-position::after {
content: "";
display: table;
height: 0px;
clear: both;
}
.header-content {
height: 80px;
margin-top: 35px;
}
.Name {
float: left;
font-size: 20px;
width: 150px;
margin-right: 0px;
}
.Menu {
float: right;
font-size: 20px;
}
a {
text-decoration: none;
color: white;
}
li {
display: inline;
}
