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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Posts
    144
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Div Placement Within Docuement Flow

    Hello,

    My page when correct should show the HeaderContainer, blow that the ActionContainer which has, 3 column divs, then below that the FooterContainer.

    It is important that the page build starts with the CenterContainer, then the LeftContainer, then RightContainer.

    My issue is that the LeftContainer and RightContainer columns both are aligning to the bottom of each other, and to the bottom of the CenterContainer column. I think this could be an issue with floats. What do you think?

    See online demo, http://tlcgiftsandbaskets.com/demo/p...sition_css.php

    Code:
    body{
    margin: 0pt; margin:0 15px 0 0;
    text-align: center;
    }
    
    #Container{
    position: absolute;
    z-index:1;
    width: 700px;
    height:auto;
    left: 50%;
    margin-left: -350px;
    border-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-color: #ccbbaa;
    background-color: #ffffff;
    text-align:left;
    }
    
    #ActionContainer	{ margin:0 0 0 0; text-align:left; border:1px solid orange; }
    #CenterContainer	{ margin:0 0 0 175px; text-align:left; border:1px solid yellow; width:250px; }
    #LeftContainer		{ margin:0 0 0 10px; text-align: left; width: 150px; border:1px solid green; float:left; }
    #RightContainer		{ margin:0 0 0 450px; text-align: left; width: 150px; border:1px solid blue; float:right; }
    #HeaderContainer	{ margin:0 0 0 0; width: 700px; height: 245px; border:1px solid red; }
    #FooterContainer	{ margin:0 0 20px 0; padding:0 0 30px 0; border:1px solid blue; display:block; }
    Code:
    <div id="Container">
    
    	<div id="ActionContainer">
    
    		<div id="CenterContainer">CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer.</div>
    
    		<div id="LeftContainer">LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer.</div>
    
    		<div id="RightContainer">RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer.</div>
    
    	</div>
    
    	<div id="HeaderContainer">HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer.</div>
    
    	<div id="FooterContainer">FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, </div>
    
    </div>

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    I don't see the point of the position:absolute, but you could try using a combination of clear, float and margin to achieve most effects
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Regular Coder
    Join Date
    Apr 2007
    Posts
    144
    Thanks
    5
    Thanked 0 Times in 0 Posts
    i don't thing my use of absolute to start the container is the case. I too believe it is a "clear, float and margin" issue. Whats the solution?

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Actually I kind of like your layout from an SEO perspective. So the idea is you want to have your page with that structure for the HTML? Then have a header at the top and and a footer at the bottom? then the rest in between from left to right>?
    You can not say you know how to do something, until you can teach it to someone else.

  • #5
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Like this

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    #Container
    {
      	position: absolute;
      	z-index:1;
    	width: 700px; 
    	height:auto; 
    	left: 50%;
    	margin-left: -350px;
    	border-width: 1px;
    	border-top-style: solid;
    	border-left-style: solid; 
    	border-right-style: solid;
    	border-color: #ccbbaa;
    	background-color: #ffffff;
    	text-align:left;
    }
    
    
    #ActionContainer
    {
    	margin-top:245px;
    	width:700px;
    }
    
    #header
    {
    	position:absolute;
    	top:0;
     	width:700px;
     	heigth:245px;
    }
    
    #CenterContainer
    {
       left:150px;
       right:150px;
       position:absolute;
       background-color:#FF9966;
    }
    
    #LeftContainer
    {
       float:left;
       clear:none;
       background-color:#00CC99;
       width:150px;
    }
    
    #RightContainer
    {
       float:right;
       clear:none;
       background-color:#CCFFB9;
       width:150px;
    
    }
    
    #FooterContainer
    {
    	height:200px;
    }
    </style>
    </head>
    <body>
    <div id="Container">    	
    	<div id="ActionContainer">
        	 <div id="CenterContainer">
        	   <p>sadsad</p>
        	   <p>dsadasd</p>
        	   <p>sdasd</p>
        	   <p>&nbsp;</p>
        	 </div>
            <div id="LeftContainer">
              <p>sdasdsdaasd</p>
              <p>asdas</p>
              <p>dasd</p>
              <p>&nbsp;</p>
            </div>
        	 <div id="RightContainer">
        	   <p>sdasdasd</p>
        	   <p>sadasdasd</p>
        	   <p>asdasdassd</p>
        	   <p>&nbsp;</p>
        	 </div>    	
       </div>
       <div id="HeaderContainer"></div>    	
       <div id="FooterContainer"></div>    
    </div>
    </body>
    </html>
    You can not say you know how to do something, until you can teach it to someone else.

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    http://jlhaslip.trap17.com/samples/t...lex/index.html

    In my experience, the concept of requiring the content to be the first thing in the source code is not all it is cracked up to be.
    I have pages with the header and menu first in the Source code which show very well in Google, yahoo, and MSN searches. Search rank varies a little, but always on the top half of the first page.
    Bots search deeper on a page than the first couple of divs, subject to the content on the page, which raises the following point: Content is KING!
    All the SEO tricks in the world can be defeated with good, solid content. Period.

  • Users who have thanked jlhaslip for this post:

    timgolding (10-31-2007)

  • #7
    Regular Coder
    Join Date
    Apr 2007
    Posts
    144
    Thanks
    5
    Thanked 0 Times in 0 Posts
    My SEO research has shown that having your body content the closed to HEAD tag as possible gains points. Why not do this then? Anything helps right? Search is not just about good content, placement pays as well.

  • #8
    Regular Coder
    Join Date
    Apr 2007
    Posts
    144
    Thanks
    5
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

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