https://jsfiddle.net/veetwmx0/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="content" style="text-align:left">
<div style="padding: 70px; border: 1px solid;">
<h1>Заголовок</h1>
</div>
<div class="content_left" style="float:left; width:50%; border: 1px solid; height: 500px;padding:30px; box-sizing: border-box;">
<h1>Заголовок 2</h1>
<p style="margin-top:20px;">
</div>
<div class="content_right" style="float:left; width:50%; border: 1px solid;height: 500px; padding:30px; box-sizing: border-box;">
<h1 style="text-align:left; padding: 0;">Заголовок 3</h1>
</div>
</div>
<div id="footer">
<ul class="ul_header">
<li><a href="index.html">Бла</a></li>
<li><a href="index.html">Бла бла</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
html,
body{
background-color: #fff;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', 'Roboto', sans-serif;
}
h1 {
margin: 0;
padding: 20px;
font-weight: 300;
color:#8a98a5
}
.wrapper {
position: relative;
min-height: 100%;
}
.ul_header{
margin:0;
padding-left: 300px;
float: left;
}
.ul_header li{
display: inline; /* Отображать как строчный элемент */
padding: 0 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ul_header_right{
margin:0;
float: right;
}
.ul_header_right li{
display: inline; /* Отображать как строчный элемент */
padding: 0 15px;
}
.ul_header_right div{
float:right;
}
.content{
width: 1085px;
margin: 0 auto;
text-align: center;
padding-bottom: 60px;
}
#footer{
position: absolute;
left: 0;
bottom: 0;
background-color: #f4f6f9;
border-top: 1px solid #d8d8d8;
width: 100%;
font-size: 15px;
font-weight: 400;
height: 60px;
line-height: 60px;
}
* {color:#a1afbd}
p{
margin: 0;
font-size: 14px;
}
.pa {margin-top: 15px !important;}
h1 {
font-size: 40px;
padding: 0;
}
Почему footer не прижимается к низу при использовании float: left?