I am trying to create a page where the header is centered 70% of the window and a body 85% of the window. The header goes on top of the body, but I can't seem to accomplish this. When I add relative positioning to my #body div; the div seems to be positioned relative to the window (body) of the page instead of the header. How do I make it so the #body div is positioned relatively below the #header div so the body is going in the flow of the page? (I want all the elements inside #header to stay exactly where I positioned them).
HTML/PHP
<?php
$resultSet = $db->query("SELECT * FROM table");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$title = $rows["title"];
if ($id <= 3)
{
//Front page Div that contains all the header elements
echo "<div id=header>";
if ($id == 1)
{
//The front page div that contains the large image and the title
echo "<div id=largeDiv>";
echo "<img src=$images>";
//Div inside of largeImg div, that creates semi-transparent block for title
echo "<div id=largeTitle>";
//Main title of header
echo "<h2>$title</h2>";
echo "</div>"; //End of largeTitle div
echo "</div>"; //End of largeDiv
}
//Secondary div inside of #header that goes on the right side of #largeDiv
echo "<div id=smallDiv>";
if ($id == 2)
{
//Left image
echo "<img id=leftImg src=$images>";
}
if ($id == 3)
{
$text = $rows["text"];
//Right image
echo "<img id=rightImg src=$images>";
//Secondary div's title
echo "<h2>$title</h2>";
//Secondary div's text
echo "<p>$text</p>";
}
echo "</div>"; //End of smallDiv
echo "</div>"; //End of header
}
else
{
echo "<div id=body>";
if ($id <= 13)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "</div>";
}
echo "</div>";
}
}
}
?>
CSS
/*BODY OF ENTIRE PAGE*/
body{
position: relative;
}
/*HEADER OF PAGE. CONTAINS ALL HEADER ELEMENTS*/
#header{
position: relative;
width: 70%;
height: auto;
margin: 1.5% auto;
}
/*MAIN DIV OF HEADER*/
#largeDiv{
position: absolute;
width: 65%;
}
/*IMAGE OF THE MAIN DIV OF HEADER*/
#largeDiv img{
width: 100%;
}
/*THE DIV INSIDE OF #LARGEDIV THAT IS A SEMI-TRANSPARENT BLOCK*/
#largeTitle{
position: absolute;
width: 100%;
height: 25%;
bottom: 1.5%;
background-color: rgba(0, 0, 100, 0.4);
}
/*THE H2 TAG FOR THE MAIN TITLE OF THE HEADER, THIS IS INSIDE #LARGETITLE*/
#largeTitle h2{
color: white;
text-align: center;
font-family: sans-serif;
font-size: 22px;
}
/*SECONDARY DIV OF HEADER, NEXT TO THE #LARGEDIV*/
#smallDiv{
position: absolute;
right: 0%;
top: 0%;
width: 32%;
height: auto;
}
/*LEFT SMALL IMAGE OF HEADER*/
#leftImg{
width: 45%;
float: left;
}
/*RIGHT SMALL IMAGE OF HEADER*/
#rightImg {
width: 45%;
float: right;
}
/*THE TITLE OF THE SECONDARY DIV OF HEADER*/
#smallDiv h2{
clear: both;
font-size: 24px;
margin-top: 48%;
color: cornflowerblue;
font-family: sans-serif;
}
/*THE TEXT OF THE SECONDARY DIV OF HEADER*/
#smallDiv p{
font-size: 100%;
font-family: sans-serif;
margin-top: -5%;
}
#body{
position: relative;
width: 85%;
}
#left{
width: 28.33%;
}
#left img{
display: block;
width: 100%;
}
Sample dataset:
<div id=header><div id=largeDiv><img `src=http://i2.cdn.turner.com/cnnnext/dam/assets/150429103538-bernie-sanders-gallery-photo-5-super-169.jpg><div id=largeTitle><h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Val hala mo sema serum.</h2></div></div><div id=smallDiv></div></div><div id=header><div id=smallDiv><img id=leftImg src=http://a4.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE4MDAzNDEwMDU4NTc3NDIy.jpg></div></div><div id=header><div id=smallDiv><img id=rightImg` src=https://pbs.twimg.com/profile_images/602821590582038528/oobPhTxZ_400x400.png><h2>Prima disputando per ne, mea amet</h2><p>Ut usu soleat torquatos, vix iudico singulis constituto ut. In vim consul assueverit, ius no veniam voluptatum. Veritus vivendum</p></div></div><div id=body><div id=left><img src=http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg></div></div><div id=body><div id=left><img src=http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg></div></div><div id=body><div id=left><img src=http://newflowerwallpaper.com/download/flower-images-to-color-and-wallpapers/flower-images-to-color-and-wallpapers-16.jpg></div></div><div id=body><div id=left><img src=http://eskipaper.com/images/images-4.jpg></div></div>
body is a page construct and can't be repositioned, so the position style has no acutal effect.
What would be better is if your header content #header was inside another element such as a HTML5 style header, and perhaps #body inside a main container.
So, for example;
<body>
<header>
<div id="header">
Header Content Here
</div>
</header>
<main>
<div id="body">
<div id="left">
Left Content
</div>
</div>
</main>
</body>
CSS
header {
width: 100%;
}
#header{
position: relative;
width: 70%;
height: auto;
margin: 1.5% auto;
}
main {
width: 100%;
}
#body {
position: relative;
width: 85%;
margin: 0 auto;
}
#left {
width: 28.33%;
}
The above is an incomplete solution, but it's an example of how you look to structure your page.
An altnernative is to have a container (like #container) around all the content with the max width of the inner content.