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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS: 3 Columns Centered?

    Hi all,

    I am trying to layout a page for a client using purely CSS. I am running into some difficulty getting my layout to work and I suspect it is a problem with something small.

    The page is: http://vangoblinds.com/templates/sitewide002.dwt.cfm

    The relevant css is:

    Code:
    body{
    	color:#666666;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	margin: 0px;
    	padding: 0px;
    	font-size: 100%;
    	text-align:center;
    	background-color:#FFFFFF;
    	background-image:url(../img/sitewide/gradientstep_vertical.jpg);
    	background-repeat:repeat-x;
    	}
    
    /*LAYOUT Divs*/
    #wrapper{
    	width: 770px;
    	margin:10px auto;
    	padding:0px;
    	text-align:left;
    	}
    
    #banner{
    	height:75px;
    	background-image:url(../img/vangocutout.gif);
    	background-repeat:no-repeat;
    	padding-bottom:5px;
    	}
    
    #content{
    	margin-left:200px;
    	width:400px;
    	padding:0px;
    	}
    
    #leftcolumn{
      width: 170px;
      height: 150px;
      float:left;
      }
     
    #rightcolumn{
      width: 145px;
      height: 175px;
      float:right;
      }
    
    #footer{
    	border-top: 1px solid #666666;
    	color: #666666;
    	clear:both;
    	margin-top:10px;
    	font-size:70%;
    	height:1%;
    }
    
    /*FLOAT Properties*/
    .container{
    	width:99%;
    	float:right;
    	}
    
    .leftimage{
    	float: left;
    	margin-right: 5px;
    }
    
    .rightimage{
    	float: right;
    	margin-left: 10px;
    }
    
    .clearit{
    	clear:both;
    	display:block;
    	background-color:green;
    	}
    An ideas why the rightcolumn is pushing itself down? I have looked at the outlines of the DIVs w/ Firefox's Web Dev tools and it just seems to have an imaginary margin. Any help would be greatly appreciated as I plan on using this layout for a couple of clients.

    Thank you.
    -Shks

  • #2
    New to the CF scene
    Join Date
    May 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Answered!

    I found the answer to my own question at a wonderful tutorial on http://css.maxdesign.com.au/floatuto...torial0916.htm

    The answer was simple. I had to switch the order of the DIV tags. So that the flow in the HTML is:

    wrapper
    header
    leftcolumn
    rightcolumn
    content
    footer

    Voila!


  •  

    Posting Permissions

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