<!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 design is what I'm trying to achieve, but it's not working as intended. Instead, the output looks like this.
I'm unsure of what I'm doing wrong and would appreciate some assistance. The desired layout is depicted in the image provided. The red areas highlight the specific sections that need to be included. I have also created a jsfiddle with the code for reference. If anything is unclear, please leave a comment instead of simply downvoting, as it can be challenging to explain the issue...