can't center divs inside a div when floating - html

so I'm making linkboxes on a page, and they have to be grouped 2 by 2. This is what I've come up with so far. Now I want the linkboxes to auto center when the page stretches, but I still need them to float (so they jump into 1 line when the page is wide enough). Is there a way to do this with html/css?
I posted my wholed code so you can see everything (have no idea if some other display or float is causing the problem?)
body{
/*ozadje strani*/
background-image:url("images/background_test.jpg");
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
margin-top:5%;
/*krčenje strani*/
min-width:49.5em;
max-width:101em;
font-family:verdana;
color:#000000;
}
/*splošno linki*/
a:link {
text-decoration:none;
}
a:hover {
text-decoration:none;
font-weight:bold;
}
a:active {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
/*velikost celotne vsebine*/
.layout {
width:70%;
margin-left:15%;
margin-right:15%;
}
.bannerlayout {
text-align:center;
}
#ijs_logo {
display:inline-block;
}
#headersign {
display:inline-block;
vertical-align:top;
font-weight:bolder;
font-size:200%;
}
.topmenulayout{
text-align:center;
}
#topmenu {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
.menutext {
display:inline-block;
}
#linkijs {
float:left;
margin-left:5%;
color:#ffffff;
}
#linkeng {
float:right;
margin-right:5%;
color:#ffffff;
}
.content{
height:100%;
}
/*container za linkboxe*/
#linkpanel{
display:inline-block;
float:left;;
width:100%;
height:100%;
border-radius:10px;
}
.linkboxdivider {
margin:0 auto;
padding:0;
float:left;
display:inline-block;
width:35em;
height:17em;
}
.linkbox{
/*linkbox positinoning*/
margin:2%;
float:left;
display:inline-block;
/*style*/
border-radius:30px;
background-color:#ffcc99;
padding:1%;
width:15em;
height:15em;
opacity:0.7;
filter: alpha(opacity=40);
}
.linkboxtitle{
font-weight:bold;
font-size:120%;
margin-left:5%;
}
.linkboxlink {
color:#000000;
margin-left:5%;
}
.footerlayout{
text-align:center;
}
.footer {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
#tel{
float:left;
margin-left:5%;
display:inline-block;
color:#ffffff;
}
#delovnicas{
float:right;
margin-right:5%;
display:inline-block;
color:#ffffff;
}
/*napis pod footerjem*/
.underfooter {
width:100%;
padding:0;
font-size:90%;
}
#copyright {
float:left;
margin-left:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmail {
vertical-align:top;
float:right;
margin-right:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmaillink{
color:#000000;
padding:0;
margin-top:0;
}
<html>
<head>
<title>//</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="defsi.css"/>
</head>
<body>
<table class="layout">
<tr class="bannerlayout">
<td>
<img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
<p id="headersign">//</p>
</td>
</tr>
<tr class="topmenulayout">
<td>
<div id="topmenu">
<p class="menutext" id="linkijs">//</p>
<p class ="menutext" id="linkeng">//</p>
</div>
</td>
</tr>
<tr class="content">
<td>
<div id="linkpanel">
<div class='linkboxdivider'>
<div class="linkbox" id="novosti">
<p class="linkboxtitle">NOVOSTI</p>
<p class="linkboxlink">e-knjige založbe Springer</p>
<p class="linkboxlink">nove elektronske revije</p>
<p class="linkboxlink">novi izvodi tiskanih revij</p>
<p class="linkboxlink">Science Classic</p>
</div>
<div class="linkbox" id="knjižnica">
<p class="linkboxtitle">KNJIŽNICA</p>
<p class="linkboxlink">predstavitev</p>
<p class="linkboxlink">COBISS</p>
<p class="linkboxlink">medknjižnična izposoja</p>
<p class="linkboxlink">bibliografije raziskovalcev</p>
</div>
</div>
<div class='linkboxdivider'>
<div class="linkbox" id="čitalnica">
<p class="linkboxtitle">ČITALNICA</p>
<p class=linkboxlink>elektronske revije</p>
<p class="linkboxlink">CD ROM-i</p>
</div>
<div class="linkbox" id="servisi">
<p class="linkboxtitle">SERVISI</p>
<p class=linkboxlink>splošno zanimivi</p>
<p class=linkboxlink>samo za lokalne uporabnike</p>
</div>
</div>
</div>
</td>
</tr>
<tr class="footerlayout">
<td>
<div class="footer">
<p id="tel">// <br />// </p>
<p id="delovnicas">// <br/> // </p>
</div>
</td>
</tr>
<tr class="underfooter">
<td>
<div class ="underfooter">
<p id="copyright">//</p>
<p id="adminmail">spletni mojster:<a id="adminmaillink" href = "mailto://#ijs.si"> av</a></p>
</div>
</td>
</tr>
</table>
</body>
</html>


.linkboxdivider {
margin: 0px auto;
padding: 0px;
float: left; //remove
display: inline-block; //remove
width: 35em;
height: 17em;
margin-left: auto; //add
margin-right: auto; //add
}
You must remove float: left and display: inline-block lines.
And you must add margin-left: auto and margin-right: auto;
i added all code.
<style>
body{
/*ozadje strani*/
background-image:url("images/background_test.jpg");
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
margin-top:5%;
/*krcenje strani*/
min-width:49.5em;
max-width:101em;
font-family:verdana;
color:#000000;
}
/*splošno linki*/
a:link {
text-decoration:none;
}
a:hover {
text-decoration:none;
font-weight:bold;
}
a:active {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
/*velikost celotne vsebine*/
.layout {
width:70%;
margin-left:15%;
margin-right:15%;
}
.bannerlayout {
text-align:center;
}
#ijs_logo {
display:inline-block;
}
#headersign {
display:inline-block;
vertical-align:top;
font-weight:bolder;
font-size:200%;
}
.topmenulayout{
text-align:center;
}
#topmenu {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
.menutext {
display:inline-block;
}
#linkijs {
float:left;
margin-left:5%;
color:#ffffff;
}
#linkeng {
float:right;
margin-right:5%;
color:#ffffff;
}
.content{
height:100%;
}
/*container za linkboxe*/
#linkpanel{
display:inline-block;
float:left;;
width:100%;
height:100%;
border-radius:10px;
}
.linkboxdivider {
margin:0 auto;
padding:0;
width:100%;
height:17em;
}
.linkbox{
/*linkbox positinoning*/
margin:2%;
float:left;
display:inline-block;
/*style*/
border-radius:30px;
background-color:#ffcc99;
padding:1%;
width:18%;
height:15em;
opacity:0.7;
filter: alpha(opacity=40);
}
.linkboxtitle{
font-weight:bold;
font-size:120%;
margin-left:5%;
}
.linkboxlink {
color:#000000;
margin-left:5%;
}
.footerlayout{
text-align:center;
}
.footer {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
#tel{
float:left;
margin-left:5%;
display:inline-block;
color:#ffffff;
}
#delovnicas{
float:right;
margin-right:5%;
display:inline-block;
color:#ffffff;
}
/*napis pod footerjem*/
.underfooter {
width:100%;
padding:0;
font-size:90%;
}
#copyright {
float:left;
margin-left:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmail {
vertical-align:top;
float:right;
margin-right:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmaillink{
color:#000000;
padding:0;
margin-top:0;
}
</style>
<html>
<head>
<title>//</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="defsi.css"/>
</head>
<body>
<table class="layout">
<tr class="bannerlayout">
<td>
<img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
<p id="headersign">//</p>
</td>
</tr>
<tr class="topmenulayout">
<td>
<div id="topmenu">
<p class="menutext" id="linkijs">//</p>
<p class ="menutext" id="linkeng">//</p>
</div>
</td>
</tr>
<tr class="content">
<td>
<div id="linkpanel">
<div class='linkboxdivider'>
<div class="linkbox" id="novosti">
<p class="linkboxtitle">NOVOSTI</p>
<p class="linkboxlink">e-knjige zalozbe Springer</p>
<p class="linkboxlink">nove elektronske revije</p>
<p class="linkboxlink">novi izvodi tiskanih revij</p>
<p class="linkboxlink">Science Classic</p>
</div>
<div class="linkbox" id="knjiznica">
<p class="linkboxtitle">KNJIZNICA</p>
<p class="linkboxlink">predstavitev</p>
<p class="linkboxlink">COBISS</p>
<p class="linkboxlink">medknjiznicna izposoja</p>
<p class="linkboxlink">bibliografije raziskovalcev</p>
</div>
<div class="linkbox" id="citalnica">
<p class="linkboxtitle">CITALNICA</p>
<p class=linkboxlink>elektronske revije</p>
<p class="linkboxlink">CD ROM-i</p>
</div>
<div class="linkbox" id="servisi">
<p class="linkboxtitle">SERVISI</p>
<p class=linkboxlink>splošno zanimivi</p>
<p class=linkboxlink>samo za lokalne uporabnike</p>
</div>
</div>
</div>
</td>
</tr>
<tr class="footerlayout">
<td>
<div class="footer">
<p id="tel">// <br />// </p>
<p id="delovnicas">// <br/> // </p>
</div>
</td>
</tr>
<tr class="underfooter">
<td>
<div class ="underfooter">
<p id="copyright">//</p>
<p id="adminmail">spletni mojster:<a id="adminmaillink" href = "mailto://#ijs.si"> av</a></p>
</div>
</td>
</tr>
</table>
</body>
</html>

Related

My main content is being affected by something on the page, won't center properly

following a very good although basic tutorial, my content (the text between the header and the footer) won't center.
Ive tried to follow many tutorials for responsive image boxes (i.e. 3 in a row, and when resized to mobile it should be 1 by 1 as you scroll down) and I have failed miserably. Everything was going well up until now, and I have the feeling something bigger is affecting my whole page, Im sure this is simple for a lot of people, but I am dumbstruck.
Thanks in advance to anyone that can help, this is killing me.
This is my HTML (I am using a Dreamweaver template for the entire site, but this is not the template file, just an HTML created from the template).
<html lang="en" dir="ltr"><!-- InstanceBegin template="/Templates/Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/0e803ef49c.js" crossorigin="anonymous"></script>
<style>#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Holiday Rentals</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<!-- Navigation Bar -->
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">MALLORCA<span>NOW</span></label>
<ul>
<li><a class="active"href="#">Home</a></li>
<li>Holiday Rentals</li>
<li>For Sale</li>
</ul>
</nav>
<!-- End Navigation Bar -->
<!-- Main Content -->
<!-- InstanceBeginEditable name="main-content" -->
<div class="main-content">
<div class="box-area">
<div class="single-box">
<div class="img-area"></div>
<div class="img-text">
<span class="header-text">Azalea</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
</div>
</div>
<div class="single-box">
<div class="img-area"></div>
<div class="img-text">
<span class="header-text">Canguila</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
</div>
</div>
<div class="single-box">
<div class="img-area"></div>
<div class="img-text">
<span class="header-text">Iris</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
</div>
</div>
</div>
</div>
<!-- InstanceEndEditable -->
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div class="footer-main-content">
<div class="left box">
<h2>About Us</h2>
<div class="footer-content">
<p>Mallorca Now, established in 2010, specialise in Property Rentals, Sales and Management in the North East area of Mallorca, covering mainly Cala Ratjada, Cala Bona, Cala Millor and Cala Anguila (inc Porto Cristo Novo). </p>
<div class="social">
<span class="fab fa-facebook-f"></span>
<span class="fab fa-twitter"></span>
<span class="fab fa-instagram"></span>
<span class="fab fa-youtube"></span>
</div>
</div>
</div>
<div class="center box">
<h2>Address</h2>
<div class="footer-content">
<div class="place">
<span class="fas fa-map-marker-alt"></span>
<span class="text">Cala Bona, Mallorca</span>
</div>
<div class="phone">
<span class="fas fa-phone-alt"></span>
<span class="text">+34-676841886</span>
</div>
<div class="email">
<span class="fas fa-envelope"></span>
<span class="text">office#mallorca-now.com</span>
</div>
</div>
</div>
<div class="right box">
<h2>Contact Us</h2>
<div class="footer-content">
<form action="#">
<div class="email">
<div class="text">Email *</div>
<input type="email" required>
</div>
<div class="msg">
<div class="text">Message *</div>
<textarea rows="2" cols="25" required></textarea>
</div>
<div class="btn">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="bottom">
<center>
<span class="credit">Est. 2012 - Mallorca-Now</span>
<span class="far fa-copyright"></span><span> - All Rights Reserved</span>
</center>
</div>
</footer>
<!-- End Footer -->
</body>
<!-- InstanceEnd --></html>
And my CSS, the last style is the intended "center", but as I have said, I have been having other problems with adding content to the middle section of my site.
/* CSS Document */
/* font-family: 'Montserrat', sans-serif; */
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
}
/* Navbar */
nav{
background-color:#101010;
height:80px;
width:100%;
position:sticky;
top:0;
}
label.logo{
color:white;
font-size:35px;
font-weight:100;
line-height:80px;
padding:0 100px;
}
label.logo span{
font-weight:900;
}
nav ul{
float:right;
margin-right:20px;
}
nav ul li{
display:inline-block;
line-height:80px;
margin:0 5px;
}
nav ul li a{
color:white;
font-size:17px;
padding:7px 13px;
}
nav ul li a.active,nav ul li a:hover{
background:#6DD5FA;
transition:0.9s;
border-radius:4px;
}
.checkbtn{
font-size:30px;
color:white;
float:right;
line-height:80px;
margin-right:40px;
cursor:pointer;
display:none;
}
#check{
display:none;
}
#media (max-width: 952px){
label.logo{
font-size:30px;
padding-left:50px;
}
nav ul li a{
font-size:16px;
}
}
#media (max-width:858px){
.checkbtn{
display:block;
}
ul{
position:fixed;
width:100%;
height:100vh;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);
top:80px;
left:-100%;
text-align:center;
transition:all .9s;
}
nav ul li{
display:block;
margin:50px;
line-height:30px;
}
nav ul li a{
font-size:20px;
}
a:hover,a.active{
background:none;
color:#0082e6;
}
#check:checked ~ ul{
left:0;
}
}
/* Main Content */
.main-content{
min-height:;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);
}
.cards{
max-width:1300px;
margin:0 auto;
text-align:center;
padding:30px;
}
.services{
display:flex;
align-items:center;
}
.cardscontent{
display:flex;
flex-wrap:wrap;
flex:1;
margin:20px;
padding:20px;
border:2px solid black;
border-radius:4px;
transition: all 0.9s ease;
}
.cardscontent .fab{
font-size:70px;
margin:16px 0;
}
.cardscontent .fas{
font-size:70px;
margin:16px 0;
}
.cardscontent > *{
flex: 1 1 100%;
}
.cardscontent:hover{
color:white;
}
.cardscontent:hover a{
border-color:white;
background:white;
color:black;
}
.c-content1:hover{
border-color:#BCED91;
background:#BCED91;
}
.c-content2:hover{
border-color:#FFC30B;
background:#FFC30B;
}
.c-content3:hover{
border-color:#D70040;
background:#D70040;
}
.cardscontent h2{
font-size:30px;
margin:16px 0;
letter-spacing:1px;
}
.cardscontent p{
font-size:17px;
}
.cardscontent a{
margin:22px;
background:black;
color:white;
text-decoration:none;
border:1px solid black;
padding:15px 0;
border-radius:25px;
transition:.9s ease;
}
.cardscontent a:hover{
border-radius:4px;
}
#media (max-width:900px){
.services{
display:flex;
flex-direction:column;
}
}
/* Footer */
footer{
position:relative;
bottom:0;
width:100%;
background-color:#101010;
color:white;
}
.footer-main-content{
display:flex;
}
.footer-main-content .box{
flex-basis:50%;
padding:10px 20px;
}
.box h2{
font-size:1.125rem;
font-weight:600;
text-transform:uppercase;
}
.box .footer-content{
margin:20px 0 0 0;
position:relative;
}
.box .footer-content:before{
position:absolute;
content:'';
top:-10px;
height:2px;
width:100%;
background:#1a1a1a;
}
.box .footer-content:after{
position:absolute;
content:'';
height:2px;
width:15%;
background:#6DD5FA;
top:-10px;
}
.left .footer-content{
text-align:justify;
}
.left .footer-content .social{
margin:20px 0 0 0;
}
.left .footer-content .social a{
padding: 0 2px;
}
.left .footer-content .social a span{
height:40px;
width:40px;
background:#1a1a1a;
line-height:40px;
text-align:center;
font-size:18px;
border-radius:5px;
color:white;
}
.left .footer-content .social a span:hover{
background:#6DD5FA;
transition:0.9s;
}
.center .footer-content .fas{
font-size:1.4375rem;
background:#1a1a1a;
height:45px;
width:45px;
line-height:45px;
text-align:center;
border-radius:50%;
transition:0.9s;
cursor:pointer;
}
.center .footer-content .fas:hover{
background:#6DD5FA;
}
.center .footer-content .text{
font-size:1.0625rem;
font-weight:500;
padding-left:10px;
}
.center .footer-content .phone{
margin:10px 0;
}
.right form .text{
font-size:1.0625rem;
margin-bottom:2px;
color:#656565;
}
.right form .msg{
margin-top:10px;
}
.right form input, .right form textarea{
width:100%;
font-size:1.0625rem;
background:#151515;
padding-left:10px;
border:1px solid #222222;
color:white;
}
.right form input:focus,
.right form textarea:focus{
outline-color:#3498db;
}
.right form input{
height:32px;
}
.right form .btn{
margin-top:10px;
}
.right form .btn button{
height:40px;
width:100%;
border:none;
outline:none;
background: #6DD5FA;
font-size:1.0625rem;
font-weight:500;
cursor:pointer;
transition:0.3s;
color:white;
}
.right form .btn button:hover{
background:#000;
}
.bottom center{
padding:5px;
font-size:0.9375rem;
background:#151515;
}
.bottom center span{
color:#656565;
}
.bottom center span a{
color:white;
}
#media screen and (max-width:900px){
footer{
position:relative;
bottom:0px;
}
.footer-main-content{
flex-wrap:wrap;
flex-direction:column;
}
.footer-main-content .box{
margin:5px 0;
}
}
.box-area{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
} ```
The .box-area should center the content, as I have tried it out in a blank HTML page and it does. I am truly lost. Thanks to anyone that can help, and If I havent provided enough information I am sorry, tell me what you need and I will.
Mark Monaghan

Basically, the reason this is happening is that you are positioning the elements of the navigation bar with float. One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). To solve the problem, set the overflow property to hidden in nav.
Exemple:
nav{
background-color:#101010;
height:80px;
width:100%;
position:sticky;
top:0;
overflow:hidden;
}
You can get more information on how to work with this property through the following link: All About Floats | CSS Tricks

Seems like you need to add a width of 100% to the .box-area to get it to center.
.box-area{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
/*Added width to the area and it centered*/
width: 100%;
}
Here is a codepen I used to play with it:
https://codepen.io/josiemedel/pen/XWpMbpw

how to create tabs with hidden content at the beginning, show up only when you click?

using css+html only create a click to expand tabs??

This example will show you how to go about doing this:
body {
display: block;
}
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.table{
width:400px;
height:200px;
margin:50px auto;
}
.alert{
width:100%;
height:40px;
background:#e74c3c;
text-align:center;
line-height:40px;
color:#fff;
border-bottom:1px solid #fff;
display:none;
}
.row{
width:100%;
height:40px;
background:#e74c3c;
text-align:center;
line-height:40px;
color:#fff;
border-bottom:1px solid #fff;
}
.span3, .span2{
padding:5px 7px;
border:2px solid #e74c3c;
color:#e74c3c;
cursor:pointer;
}
<div class="table">
<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<br><br>
<div class="row">
#1
</div>
<div class="row">
#2
</div>
<div class="alert">
#3
</div>
</div>
Here's a fiddle: http://jsfiddle.net/6W7XD/6618/

Image not showing within div

My Divs are aligned perfectly. I am trying to add an image in the center div but as soon as I add the image the divs disappear and the image is not showing.
I am having the issue with adding the image, can someone please assist. Why is my image not showing whats wrong with my code?
<style>
.div_parent{
display:inline;
background-image: url('../images/image.jpg') top center no-repeat;"
}
.div_center {
width:300px;
float:left;
border-color:black;
border-style:solid;
border-width:3px;
height :700px
}
.div_right
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
.div_left
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
</style>
<div class="div_parent">
<div class="div_left">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG>Welcome to the Reporting Portal! </STRONG> </font><br />
<br />
<FONT size="2" style="font-family:sans-serif; text-align: left;">
Reports on this site are available as view-only or as an Excel download. </font>
</div>
<div class="div_center">
</div>
<div class="div_right">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG> We're Here to Help! </STRONG> </font><br /><br />
<FONT size="2" style="font-family:sans-serif; text-align:left;">
We're friendly and available to chat. Reach out to us anytime and we'll happily answer your questions.</br><br />
Supervisors should submit requests including specific fields and search criteria to us at Report Manager</a></font>
</div>
</div>

Have you tried something like this out?
.container {
width: 100%;
height: 50px;
display: inline-block;
}
.element__left,
.element__right,
.element__center {
height: 50px;
}
.element__left, .element__right {
width: 25%;
float: left;
background-color: grey;
}
.element__center {
width: 50%;
float: left;
background-color: green;
}
<div class="container">
<div class="element__left">
<div class="element__center">
<div class="element__right">
</div>

.divOuter{
display:inline;
text-align:center;
}
.divInner1{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner2{
border: 1px solid;
float:left;
width:250px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner3{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
<body>
<div class='divOuter'>
<div class='divInner1'>First DIV</div>
<div class='divInner2'>Second DIV</div>
<div class='divInner3'>Third DIV</div>
</div>
</body>

Lets try following way:
<!DOCTYPE html>
<html class="not-ie" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aligning 3 divs with different widthst</title>
<style type="text/css">
* { padding:0; margin:0;}
body { font-family:Arial, Helvetica, sans-serif; color:#fff; font- size:16px;}
.div_parent { position:relative; width:100%; height:300px; overflow:auto; line-height:300px; text-align:center;}
.div_left { position:absolute; left:0; top:0; height:100%; background-color:#900; width:150px;}
.div_middle { position:absolute; left:150px; right:150px; top:0; height:100%; overflow:auto; background-color:#00F;}
.div_right { position:absolute; right:0; top:0; height:100%; background-color:#900; width:150px;}
</style>
</head>
<body>
<div class="div_parent">
<div class="div_left">width: 100px;</div>
<div class="div_middle">width: screen - 200px;</div>
<div class="div_right">width: 100px;</div>
</div>
</body>
</html>

movement of the position when I changed the size of screen

When I changed the size of screen our elements move and their position get changed.now I want to know what are this reason? And in this situation what can I do?
.header{
width:100%;
height:100px;
background-color:green;
margin-bottom:50px;
margin-top:-10px;
}
#title{
color:white;
font-size:50px;
font-weight:bold;
float:right;
margin:20px;
padding-right:50px;
display:inline;
}
.ms{
height:50px;
width:15%px;
margin:20px;
display:inline;
}
#pms{
color:white;
margin:10px;
font-weight:bold;
font-size:23px;
margin-left:60px;
padding-top:3px;
}
#p{
color:black;
font-size:9px;
margin-left:60px;
margin-top:-7px;
font-weight:bold;
}
.box1{
float:right;
}
.box2{
float:left;
}
.img1{
margin-right:40px;
margin-bottom:30px;
margin-top:30px;
}
.img2{
margin-left:40px;
margin-bottom:30px;
margin-top:30px;
}
#t1{
width:50%px;
height:10px;
background-color:99FF00;
margin-right:30px;
position:absolute;
left:30px;
top:50px;
}
#first{
font-weight:bold;
font-size:40px;
color:99FF00;
margin-right:30px;
text-align:right;
margin-top:30px;
}
.tf{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:30px;
}
.pf{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t2{
width:50%px;
height:10px;
background-color:990066;
margin-left:30px;
position:absolute;
left:30px;
top:50px;
}
#second{
font-weight:bold;
font-size:40px;
color:990066;
margin-right:5px;
text-align:right;
margin-top:30px;
}
.ts{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:5px;
}
.ps{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t3{
width:50%px;
height:10px;
background-color:003399;
margin-right:30px;
margin-top:30px;
}
#third{
font-weight:bold;
font-size:40px;
color:003399;
margin-right:30px;
text-align:right;
margin-top:30px;
}
.tt{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:30px;
}
.pt{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t4{
width:50%px;
height:10px;
background-color:CC0000;
margin-left:30px;
margin-top:30px;
}
#fourth{
font-weight:bold;
font-size:40px;
color:CC0000;
margin-right:5px;
text-align:right;
margin-top:30px;
}
.tf1{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:5px;
}
.pf1{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t5{
width:50%px;
height:10px;
background-color:59955C;
margin-right:30px;
margin-top:30px;
}
#fifth{
font-weight:bold;
font-size:40px;
color:59955C;
margin-right:30px;
text-align:right;
margin-top:30px;
}
.tf2{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:30px;
}
.pf2{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t6{
width:50%px;
height:10px;
background-color:CCFF33;
margin-left:30px;
margin-top:30px;
}
#sixth{
font-weight:bold;
font-size:40px;
color:CCFF33;
margin-right:30px;
text-align:right;
margin-top:30px;
}
.ts1{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:5px;
}
.ps1{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
.footer{
clear:both;
width:100%px;
height:100px;
background-color:green;
}
#m{
float:right;
margin-top:30px;
color:white;
margin-right:40px;
}
#m1{
font-size:20px;
font-weight:bold;
}
#m2{
font-size:15px;
font-weight:bold;
}
#s{
float:left;
margin-top:30px;
color:white;
margin-left:40px;
}
#s1{
font-size:20px;
font-weight:bold;
}
#s2{
font-size:29;
font-weight:bold;
}
<html>
<head>
<title>modire sabz</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="modire sabz.css">
</head>
<body>
<div class="header">
<div id="title">فهرست بخشی از محصولات مدیر سبز</div>
<div class="ms">
<p id="pms">مدیر سبز</p>
<p id="p">مشاورین بازاریابی نوین</p>
</div>
</div>
<div class="box1">
<div id="t1"></div>
<div id="first"> رشد کسب و کار (سطح اول) </div>
<div class="img1">
<img src="1.jpg" height="150" width="450" />
</div>
<div class="tf">:مخاطب</div>
<div class="pf">کارآفرینان، مدیران و صاحبان فروشگاه</div>
<div class="tf">:موضوع</div>
<div class="pf">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
<div class="tf">قیمت ویژه بسته: 49 هزار تومان</div>
</div>
<div class="box2">
<div id="t2"></div>
<div id="second">رشد و کسب و کار (سطح دوم)</div>
<div class="img2">
<img src="2.jpg" height="150" width="450" />
</div>
<div class="ts">:مخاطب</div>
<div class="ps">کارآفرینان، مدیران و صاحبان فروشگاه</div>
<div class="ts">:موضوع</div>
<div class="ps">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
<div class="ts">قیمت ویژه بسته: 59 هزار تومان</div>
</div>
<div class="box1">
<div id="t3"></div>
<div id="third">کسب و کار اینترنتی پیشرفته</div>
<div class="img1">
<img src="3.jpg" height="150" width="450" />
</div>
<div class="tt">:مخاطب</div>
<div class="pt">صاحبان و مدیران وب سایت</div>
<div class="tt">:موضوع</div>
<div class="pt">بازاریابی با ایمیل سءو، بازاریابی اینترنتی</div>
<div class="tt">قیمت ویژه بسته: 99 هزار تومان</div>
</div>
<div class="box2">
<div id="t4"></div>
<div id="fourth">فروشندگی حرفه ای</div>
<div class="img2">
<img src="4.jpg" height="150" width="450" />
</div>
<div class="tf1">:مخاطب</div>
<div class="pf1">فروشندگان، مدیران فروش و بازاریابان</div>
<div class="tf1">:موضوع</div>
<div class="pf1">روش های فروش، مذاکره، زبان بدن و ...</div>
<div class="tf1">قیمت ویژه بسته: 49 هزار تومان</div>
</div>
<div class="box1">
<div id="t5"></div>
<div id="fifth">چکیده 45 کتاب کسب و کار</div>
<div class="img1">
<img src="5.jpg" height="150" width="450" />
</div>
<div class="tf2">:مخاطب</div>
<div class="pf2">صاحبان کسب و کار و کارمندان</div>
<div class="tf2">:موضوع</div>
<div class="pf2">تمامی حوزه های بهبود فردی و کسب و کار</div>
<div class="tf2">قیمت ویژه بسته: 49 هزار تومان</div>
</div>
<div class="box2">
<div id="t6"></div>
<div id="sixth">کتابخانه موفقیت برایان تریسی</div>
<div class="img2">
<img src="6.jpg" height="150" width="450" />
</div>
<div class="ts1">:مخاطب</div>
<div class="ps1">مدیران و کارآفرینان</div>
<div class="ts1">:موضوع</div>
<div class="ps1">مدیریت، رهبری و بازاریابی</div>
<div class="ts1">قیمت ویژه دوره 7 جلدی: 45 هزار تومان</div>
</div>
<div class="footer">
<div id="m">
<div id="m1">مشاورین بازاریابی مدیر سبز</div>
<div id="m2">تلفن: 88308732 فکس: 89783127</div>
</div>
<div id="s">
<div id="s1">سایت آموزش تخصصی بازاریابی و مدیریت</div>
<div id="s2">www.ModireSabz.com</div>
</div>
</div>
</body>
</html>

You could give a defined width to the body so you will not have to go through all your code and change to percentages. See this fiddle.
Notice how I added a width to the body and a margin of 0 auto so it is centered on bigger screens. I also gave the boxes defined widths so they float correctly.
body {
margin: 0 auto;
width: 960px;
}
.box1{
float:right;
width: 480px;
}
.box2{
float:left;
width: 480px;
}

I took a look at your work and my suggestion would be to contain all of your div tags into a container instead of trying to piece each one together. From what I gather you are wanting to maintain the same look and feel on all screen sizes right?
If so then you can start up some mark up like this:
.header{
width:100%;
height:100px;
background-color:green;
margin-bottom:50px;
margin-top:-10px;
}
#title{
color:white;
font-size:50px;
font-weight:bold;
float:right;
margin:20px;
padding-right:50px;
display:inline;
}
#wrapper {
width: 100%;
}
#wrapperbody {
width: 100%;
margin-left:auto;
margin-right:auto;
}
.ms{
height:50px;
width:15%;
margin:20px;
display:inline;
}
#pms{
color:white;
margin:10px;
font-weight:bold;
font-size:23px;
margin-left:60px;
padding-top:3px;
}
#p{
color:black;
font-size:9px;
margin-left:60px;
margin-top:-7px;
font-weight:bold;
}
.box1{
min-width: 30%;
max-width: 30%;
display:inline-block;
}
.box2{
}
.img1{
text-align:right;
margin-bottom:30px;
margin-top:30px;
}
.img2{
text-align:right;
margin-bottom:30px;
margin-top:30px;
}
#t1{
width:100%;
height:10px;
background-color:99FF00;
top:50px;
}
#first{
font-weight:bold;
font-size:30px;
color:99FF00;
text-align:right;
margin-top:30px;
}
.tf{
font-size:20px;
color:black;
font-weight:bold;
float:right;
}
.pf{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t2{
width:100%;
height:10px;
background-color:990066;
top:50px;
}
#second{
font-weight:bold;
font-size: 30px;
color:990066;
text-align:right;
margin-top:30px;
}
.ts{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:5px;
}
.ps{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t3{
width:100%;
height:10px;
background-color:003399;
}
#third{
font-weight:bold;
font-size:30px;
color:003399;
text-align:right;
margin-top:30px;
}
.tt{
font-size:20px;
color:black;
font-weight:bold;
float:right;
}
.pt{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t4{
width:100%;
height:10px;
background-color:CC0000;
}
#fourth{
font-weight:bold;
font-size:30px;
color:CC0000;
margin-right:30px;
text-align:right;
margin-top:30px;
}
.tf1{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:5px;
}
.pf1{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t5{
width:100%;
height:10px;
background-color:59955C;
margin-top:30px;
}
#fifth{
font-weight:bold;
font-size:30px;
color:59955C;
margin-right:30px;
text-align:right;
margin-top:30px;
}
.tf2{
font-size:20px;
color:black;
font-weight:bold;
float:right;
margin-right:30px;
}
.pf2{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
#t6{
width:100%;
height:10px;
background-color:CCFF33;
margin-top:30px;
}
#sixth{
font-weight:bold;
font-size:30px;
color:CCFF33;
margin-right:30px;
text-align:right;
margin-top:30px;
}
.ts1{
font-size:20px;
color:black;
font-weight:bold;
float:right;
}
.ps1{
font-size:20px;
color:gray;
font-weight:bold;
text-align:right;
}
.footer{
clear:both;
width:100%;
height:100px;
background-color:green;
}
#m{
float:right;
margin-top:30px;
color:white;
margin-right:40px;
}
#m1{
font-size:20px;
font-weight:bold;
}
#m2{
font-size:15px;
font-weight:bold;
}
#s{
margin-top:30px;
color:white;
margin-left:40px;
}
#s1{
font-size:20px;
font-weight:bold;
}
#s2{
font-size:29;
font-weight:bold;
}
<body>
<div class="header">
<div id="title">فهرست بخشی از محصولات مدیر سبز</div>
<div class="ms">
<p id="pms">مدیر سبز</p>
<p id="p">مشاورین بازاریابی نوین</p>
</div>
</div>
<div id="wrapper">
<div id="wrapperbody">
<div class="box1">
<div id="t1"></div>
<div id="first"> رشد کسب و کار (سطح اول) </div>
<div class="img1">
<img src="1.jpg" height="150" width="450" />
</div>
<div class="tf">:مخاطب</div>
<div class="pf">کارآفرینان، مدیران و صاحبان فروشگاه</div>
<div class="tf">:موضوع</div>
<div class="pf">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
<div class="tf">قیمت ویژه بسته: 49 هزار تومان</div>
</div>
<div class="box1">
<div id="t2"></div>
<div id="second">رشد و کسب و کار (سطح دوم)</div>
<div class="img2">
<img src="2.jpg" height="150" width="450" />
</div>
<div class="ts">:مخاطب</div>
<div class="ps">کارآفرینان، مدیران و صاحبان فروشگاه</div>
<div class="ts">:موضوع</div>
<div class="ps">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
<div class="ts">قیمت ویژه بسته: 59 هزار تومان</div>
</div>
<div class="box1">
<div id="t3"></div>
<div id="third">کسب و کار اینترنتی پیشرفته</div>
<div class="img1">
<img src="3.jpg" height="150" width="450" />
</div>
<div class="tt">:مخاطب</div>
<div class="pt">صاحبان و مدیران وب سایت</div>
<div class="tt">:موضوع</div>
<div class="pt">بازاریابی با ایمیل سءو، بازاریابی اینترنتی</div>
<div class="tt">قیمت ویژه بسته: 99 هزار تومان</div>
</div>
<div class="box1">
<div id="t4"></div>
<div id="fourth">فروشندگی حرفه ای</div>
<div class="img2">
<img src="4.jpg" height="150" width="450" />
</div>
<div class="tf1">:مخاطب</div>
<div class="pf1">فروشندگان، مدیران فروش و بازاریابان</div>
<div class="tf1">:موضوع</div>
<div class="pf1">روش های فروش، مذاکره، زبان بدن و ...</div>
<div class="tf1">قیمت ویژه بسته: 49 هزار تومان</div>
</div>
<div class="box1">
<div id="t5"></div>
<div id="fifth">چکیده 45 کتاب کسب و کار</div>
<div class="img1">
<img src="5.jpg" height="150" width="450" />
</div>
<div class="tf2">:مخاطب</div>
<div class="pf2">صاحبان کسب و کار و کارمندان</div>
<div class="tf2">:موضوع</div>
<div class="pf2">تمامی حوزه های بهبود فردی و کسب و کار</div>
<div class="tf2">قیمت ویژه بسته: 49 هزار تومان</div>
</div>
<div class="box1">
<div id="t6"></div>
<div id="sixth">کتابخانه موفقیت برایان تریسی</div>
<div class="img2">
<img src="6.jpg" height="150" width="450" />
</div>
<div class="ts1">:مخاطب</div>
<div class="ps1">مدیران و کارآفرینان</div>
<div class="ts1">:موضوع</div>
<div class="ps1">مدیریت، رهبری و بازاریابی</div>
<div class="ts1">قیمت ویژه دوره 7 جلدی: 45 هزار تومان</div>
</div>
</div>
</div>
<div class="footer">
<div id="m">
<div id="m1">مشاورین بازاریابی مدیر سبز</div>
<div id="m2">تلفن: 88308732 فکس: 89783127</div>
</div>
<div id="s">
<div id="s1">سایت آموزش تخصصی بازاریابی و مدیریت</div>
<div id="s2">www.ModireSabz.com</div>
</div>
</div>
</body>
I had a hard time since this was not written in English but I managed for the most part.The reason for your seperation was because you had some div's floating right and some floating left and on top of that you did not contain them. Also I fixed your % and px error. You can not render both % and px at the same time ie (width:100%px;).
Hope this helps you at least get started in the right track :)

Copy the code below and use it as a tool to get the results you want by changing the CSS portion. If you still find you have more questions I would be happy to help :)
/* YOUR CSS */
/* This will contain all of your content */
#wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
/** This will keep everything contain inside
of this div tag <div id="body"></div>
at whatever width you choose and keep all of your
content center of the screen **/
#body {
width: 990px;
margin-left: auto;
margin-right: auto;
}
/* LEFT SIDE CSS STARTS HERE */
/*Left Side Container */
#left_side {
float: left;
margin-top: 30px;
width: 495px;
}
/* This changes the h1 tag */
#left_side h1 {
color: #90C;
padding-top: 10px;
padding-left: 10px;
text-align: left;
}
/* This changes any p tag */
#left_side p {
color: #777;
padding-left: 10px;
text-align: left;
}
/* This changes the image tag */
#left_side img {
width: 400px;
padding-left: 10px;
}
/* RIGHT SIDE CSS STARTS HERE */
#right_side {
float: left;
margin-top: 30px;
width: 495px;
}
/* This changes the h1 tag */
#right_side h1 {
color: #06C;
padding-top: 10px;
padding-left: 10px;
text-align: left;
}
/* This changes any p tag */
#right_side p {
color: #777;
padding-left: 10px;
text-align: left;
}
/* This changes the image tag */
#right_side img {
width: 400px;
padding-left: 10px;
}
<!-- YOUR HTML MARK UP-->
<html>
<body>
<div id="wrapper"><!--This div tag will wrap all your content. Think of it as a big box-->
<div id="body"><!--This div will be my body and where I want to show my content-->
<!--LEFT CONTAINER STARTS HERE-->
<div id="left_side">
<h1>Left Side</h1>
<p>The content I want to show on the left goes inside the div id="left_side" </p>
<img src="http://sectorvi.com/stackoverflow/test_image_a.jpg">
</div><!-- div id="left_side" ENDS HERE-->
<!--RIGHT CONTAINER STARTS HERE-->
<div id="right_side">
<h1>Right Side Side</h1>
<p>The content I want to show on the right goes inside the div id="right_side" </p>
<img src="http://sectorvi.com/stackoverflow/test_image_b.jpg">
</div><!-- div id="right_side" ENDS HERE-->
</div><!--div id="body" ENDS HERE-->
</div><!--div id="wrapper" ENDS HERE-->
</body>
</html>
If your wondering how I got them to set in the center of the screen I used margin-left:auto and margin-right:auto in my css portion to tell the page to place everything center to the left and right of my body div.
Also notice I used the float:left in both the left and right side div. This makes the div's stack next to each other.

Why does my page's wrapper get smaller after log-in?

When logged out, my page wrapper which is the very light grey background, expands 100% of the page, but once you log in it gets smaller and resizes to the width of the member bar...
TO TEST USER ACCOUNT BELOW:
http://creatorsparadise.herobo.com/
USERNAME: TEST
PASSWORD: TEST123
HTML FOR LOGGED OUT...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<center><div id="login">
<form action="" method="post">
<table cellpadding="2" cellspacing="2" style="height: 18px; width: 1000px;">
<tr>
<td colspan="2" style="height: 24px"><? if(!isset($_POST['login'])){?>
<? }else{ echo "".$final_report."";}?> </td>
<td width="80" style="height: 24px"><a class="userandpass">Username:</a></td>
<td width="180" style="height: 24px"><input type="text" name="username" size="25" maxlength="25"></td>
<td style="height: 24px"></td>
<td width="80" style="height: 24px"><a class="userandpass">Password:</a></td>
<td width="180" style="height: 24px"><input type="password" name="password" size="25" maxlength="25"></td>
<td style="height: 24px"> </td>
<td style="height: 24px"><input type="submit" name="login" value="Login" width="25px"/></td>
</tr>
<tr>
<td><br></td>
</tr>
</table>
</form>
</div>
</center>
</div>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
HTML FOR LOGGED IN...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<ul id="loggedin">
<li>Members Area</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
BOTH USE THE SAME CSS FILE...
body{
background:#333333;
width:100%;
margin: 0 auto;
}
#header{
width:1100px;
height:110px;
margin:0 auto;
margin-bottom:20px;
}
#member{
width:100%;
height:32px;
margin:0 auto;
margin-top:21px;
border-top:2px solid #999999;
border-right:2px solid #999999;
border-left:2px solid #999999;
background-color:#575757;
}
.userandpass{
color:white;
font-family: "Arial";
font-size:15px;
}
.yep{
color:white;
font-family: "Arial";
text-decoration: none;
}
a{
color:red;
font-family: "Arial";
text-decoration: none;
}
#loggedin{
float:right;
margin-right:30px;
margin-top:5px;
}
#loggedin li{
display:inline;
margin-right:20px;
}
#loggedin li a{
display:inline;
color:white;
font-family: "Arial";
font-size:17px;
}
#loggedin a:hover{
display:inline;
color:#6ad5f1;
font-family: "Arial";
font-size:17px;
}
#logo{
margin-left:30px;
margin-top:25px;
}
#topbar{
float:right;
margin-right:30px;
}
#topbar li{
display:inline;
margin-right:20px;
}
#topbar li a{
display:inline;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#topbar a:hover{
display:inline;
color:#6ad5f1;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#links1{
width:700px;
height:60px;
float:right;
margin-top:-65px;
}
#wrapper{
width:100%;
height:800px;
background-color:#F8F8F8;
border-top:2px solid #999999;
margin: 0 auto;
border-bottom:1px solid #999999;
}
#barone{
width:100%;
height:20px;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgb(214,214,214) 86%, rgb(201,201,201) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(86%,rgb(214,214,214)), color-stop(96%,rgb(201,201,201))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* IE10+ */
background: linear-gradient(to bottom, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
border-bottom:1px solid #999999;
margin: 0 auto;
}
#footer{
width:100%;
height:250px;
background-color:#575757;
border-top:5px solid #999999;
border-bottom:1px solid #999999;
margin: 0 auto;
}
#copyright{
background:#333333;
width:100%;
height:4px;
margin: 0 auto;
}
#incopyright{
width:1050px;
height:4px;
margin:0 auto;
margin-bottom:20px;
}
.copy{
text-align:center;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:15px;
margin-left:385px;
}
#core{
width:1120px;
height: 780px;
margin:0 auto;
margin-top:15px;
margin-bottom:25px;
}
div.clickable {
position:relative;
margin-left:35px;
margin-top:65px;
}
div.clickable a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable1 {
position:relative;
margin-left:35px;
margin-top:290px;
}
div.clickable1 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable1 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable2 {
position:relative;
margin-left:35px;
margin-top:515px;
}
div.clickable2 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable2 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
#leftsend{
width:1080px;
height:760px;
margin:0 auto;
}
#rightside{
width:220px;
height:760px;
background:#EBEBEB;
float:right;
border: 1px solid #CFCFCF;
}
#vertical_line_1{
width:1px;
height:800px;
background:#B5B5B5;
float:right;
margin-right:240px;
margin-top:-530px;
}
.advertise{
font-family: Arial;
font-size: 18px;
font-weight: bolder;
color:#838383;
float:right;
margin-right:75px;
margin-top:20px;
text-decoration: underline;
}
#leftside{
width:815px;
height:770px;
float:left;
}
#premium{
margin-left:50px;
}
#login{
margin:0 auto;
margin-bottom:21px;
}
I DOUBT YOU WILL NEED THE PHP BUT HERE IT IS FOR LOGGED OUT
<? ob_start();session_start();include_once"config.php";
if(isset($_SESSION['username']) || isset($_SESSION['password'])){
header("Location: http://creatorsparadise.herobo.com/index_logged.php");
}else{
if(isset($_POST['login'])){
$username= trim($_POST['username']);
$password = trim($_POST['password']);
if($username == NULL OR $password == NULL){
$final_report.="<a class='yep'>Please fill out all fields or </a><a href='www.http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$check_user_data = mysql_query("SELECT * FROM `members` WHERE `username` = '$username'") or die(mysql_error());
if(mysql_num_rows($check_user_data) == 0){
$final_report.="<a class='yep'>This username does not exist. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$get_user_data = mysql_fetch_array($check_user_data);
if($get_user_data['password'] != $password){
$final_report.="<a class='yep'>Your password is incorrect. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$start_idsess = $_SESSION['username'] = "".$get_user_data['username']."";
$start_passsess = $_SESSION['password'] = "".$get_user_data['password']."";
$final_report.="<a class='yep'>Wait one moment...</a> <meta http-equiv='Refresh' content='2; URL=http://creatorsparadise.herobo.com/index_logged.php'/>";
}}}}}
?>
PHP FOR LOGGED IN
<? ob_start(); session_start();include_once"config.php";
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])){
header("Location: http://http://creatorsparadise.herobo.com/");
}else{
$user_data = "".$_SESSION['username']."";
$fetch_users_data = mysql_fetch_object(mysql_query("SELECT * FROM `members` WHERE `username`='".$user_data."'"));
}
?>

The problem is that you don't close #header, so #wrapper becomes its child instead of a sibling.
Then, add </div> just before <div id="wrapper"> to close <div id="header">

As stated by Oriol, you need to insert a closing DIV for your #header.
Here is where you will need to close the #header:
<div id="member">
<ul id="loggedin">
................
</ul>
</div>
</div> /*--------Missing closing div--------*/
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside"></div>
<div id="rightside">