How to position boxes? - css

Question

I have two files, one is called header.php and other one is called index.php.
header.php looks like this:
<div class="long_box">**Small long box**</div>
index.php looks like this:
<?php
include('header.php');
?>
<div class="content">**Big box**</div>
and this is the CSS file:
.long_box {
background-color:#f4f4f4;
width:200px;
min-height:400px;
padding:10px;
margin:10px;
border:1px solid #bbbbbb;
box-shadow: inset 0 1px 0 #fefefe; }
.content {
background-color:#f4f4f4;
width:515px;
min-height:800px;
padding:10px;
margin:10px;
float: left;
border:1px solid #bbbbbb;
box-shadow: inset 0 1px 0 #fefefe; }
So I am using "long_box" in header.php, "content" in index.php and then including header.php in index.php which gives me this page: http://gyazo.com/5bb4375f05ff5c9b3c3f8c47e7d3a0c0.png
Now, I want to add a third box all the way on the right side, like in this image where the red box is: http://gyazo.com/ea2f330cab8cc07508fa797a2ad5de3e.png
I want to include the third box each time I decide to include header.php.
I would really appreciate if someone could help me out with this.

Answer 1

I believe what your looking to do here is check if header.php is included and if so include your new box aside.php (or whichever).
You can try if file_exists like so:
if(file_exists('header.php'))
include 'aside.php';
Found this here with more info, which may be useful to you:
How to include only if file exists
PS. As cederlof said, also change your content attribute to class not style.

Answer 2

okay...so here is fiddle http://jsfiddle.net/logintomyk/DgsH3/
header.php
<div class="long_box">**Small long box**</div>
<div class="third_box"> Third box </div>
index.php
<div class="content">**Big box**</div>
CSS
.long_box {
background-color:#f4f4f4;
width:18%;
min-height:400px;
padding:10px;
margin:10px;
border:1px solid #bbbbbb;
box-shadow: inset 0 1px 0 #fefefe;
float:left;
}
.third_box{
background-color:#f4f4f4;
width:18%;
min-height:400px;
padding:10px;
margin:10px;
border:1px solid #bbbbbb;
box-shadow: inset 0 1px 0 #fefefe;
float:right;
}
.content {
background-color:#f4f4f4;
width:40%;
min-height:100%;
padding:10px;
margin:10px;
border:1px solid #bbbbbb;
box-shadow: inset 0 1px 0 #fefefe;
margin:0 auto;
}
using %age for width...its a better idea considering responsive designs!! ;)

Answer 3

You can just float the 3 boxes with float: left;
jsFiddle
Whenever one of the floated elements goes underneath an other floated element, it might be because your third box does not fit on the screen.
Note that i used an other width so it would fit on my screen
Update
Whenever your element that should positioned at the far right is called first. You can use float: right;
jsFiddle