<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background: #00BFFF;
font-family: "Candara";
src: url(data/candara.ttf);
}
#wrapper {
margin: 0 auto;
width: 800px;
padding: 15px;
}
#wrapper:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
#header {
display: block;
background-color: blue;
}
#header .left {
display: inline-block;
padding: 15px 25px;
float: left;
}
#header .left h1{
display: inline-block;
font-weight: bold;
}
#header .right {
float: right;
display: inline-block;
}
#header .right span{
display: block;
}
#page {
display: block;
float: left;
}
#page .box{
display: inline-block;
background: black;
float: left;
}
#header, .box {
background: blue;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="left">
<h1>Title</h1>
</div>
<div class="right">
<span><b>needle:</b> <?php //echo $haystack; ?></span>
<span><b>needle:</b> <?php //echo $haystack; ?></span>
<span><b>Last update:</b> <?php //echo $lastupdate; ?></span>
</div>
</div>
<div id="page">
<div class="left box">
Heey mannn
</div>
</div>
</div>
</body>
</html>
Это дизайн, к которому я стремлюсь, но он совсем не работает, вместо этого я получаю this.
И я не знаю, что я делаю неправильно, правда, нет. Ребята, вы можете мне помочь? Все, что я хочу, на картинке. И красные области просто отмечают, что я хочу эти коробки там. Я также сделал jsfiddle с кодом. Если что-то неясно, оставьте комментарий, пожалуйста, вместо того, чтобы просто пролистать его вниз, потому что его действительно трудно объяснить ...