Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3 Column Div - float pushing middle content down

    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 -

    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

    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>
               
                 
                <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>
                      </ul>
                </div><!-- end links-->   
          </div><!-- end header-->
            
                    
                    <div id="top_bar"></div>
                    	<div id="mid_bar"><br class="clear" />
    
                    content content content
                        
                        
                        <br class="clear" />
                        </div>
                    	<!-- end mid_bar-->
                        
                        	<div id="bottom"></div><!-- end bottom_bar-->
                                  
    	</div><!-- end container-->
    Code:
    .clear {  
         clear:both;  
       
     } 
    
    #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;
    	background-image:url(../images/3D-Logo-with-DBA_border.jpg);
    	background-repeat:no-repeat;
    	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;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,713
    Thanks
    25
    Thanked 660 Times in 659 Posts
    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/p...blog-style.htm

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    30
    Thanks
    6
    Thanked 1 Time in 1 Post
    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:
    body
    {
    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;

    Cheers
    -David
    Last edited by Myskillzownu; 04-06-2012 at 03:51 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •