View Full Version : 3 Column Div - float pushing middle content down

04-05-2012, 05:24 AM
Im having trouble with content in my main div being pushed down. Everything is fine until I add a "left" and "right" div. They are used for the background and both contain an image.

When I add the <div id="left"></div> and the <div id="right"></div> just under my "page-wrap" div, the content in the the main "container" div gets pushed down, like this - http://www.justspiffy.ca/jasmyn/error.jpg

when I take it away, it looks correct, but without my background images

I need the background images in 2 separate images so it downloads faster.

Here is my code

<div id="page-wrap">

<div id="left"></div>
<div id="right"></div>

<div id="container">
<div id="header">
<div id="logo">
</div><!-- end logo-->

<div id="coldwell">

<div id="links">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html"> home</a></li>
<li><a href="../about.html">about me</a> </li>
<li><a href="../coldwell.html">coldwell banker</a></li>
<li><a href="../listings.html">listings</a></li>
<li><a href="../buying.html">buying</a></li>
<li><a href="../selling.html">selling</a></li>
<li><a href="http://jasmynlancingercb.blogspot.com/" target="_blank">video blogs</a></li>
<li><a href="../contact.php">contact me</a> </li>
</div><!-- end links-->
</div><!-- end header-->

<div id="top_bar"></div>
<div id="mid_bar"><br class="clear" />

content content content

<br class="clear" />
<!-- end mid_bar-->

<div id="bottom"></div><!-- end bottom_bar-->

</div><!-- end container-->

.clear {


#page-wrap {
background-color: #443b7e;
width: 100%;

#left {
float: left;
width: 338px;
background-image: url(../images/bgleft.jpg);
height: 620px;
position: relative;
display: inline;
#right {
float: right;
width: 338px;
height: 620px;
background-image: url(../images/bgright.jpg);
position: relative;
display: inline;

#container {
width: 900px;
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #264480;

#header {
width: 900px;
height: 205px;
background-color: #CCC;
position: relative;

#logo {
background-image: url(../images/logo1.png);
height: 135px;
width: 550px;
float: left;
background-repeat: no-repeat;
margin-top: 15px;
margin-left: 50px;
position: absolute;

#coldwell {
height: 135px;
width: 191px;
margin-top: 23px;
position: absolute;
margin-left: 632px;
float: right;

#links {
width: 800px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
z-index: 998;
position: absolute;
margin-top: 176px;
margin-left: 100px;

04-05-2012, 03:29 PM
What you gave us is not anything you have shown in the images. What we need to the code for the top picture or a link to a site where it can be seen.

In the mean time read this http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm

04-06-2012, 03:36 AM
The first thing I noticed is that you have defined the width of your sides, which I would avoid. This would cause a bottom scroll bar for viewers with a lower resolution, like 1024x.

What I would do is set the background color in your body instead of your container.
Simply put:
background-color: #264480;

then make a picture with the two pictures 900 pixels apart, leaving the rest of the picture clear, and set that image as the background of container.

The reason your stuff is getting bumped down is because you don't have 300 pixels of room on the side, so its merging that div with your inside one.

I'm by no means an expert coder so I can't promise that my idea will work, but I would think it would.
You could also simply try width: auto;