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
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Float not working correctly, or am I silly?

    I've been learning XHTML and CSS from Head First: HTML with CSS & XHTML, but for some reason I can't seem to get my head around the float property.

    The problem is that when I float my div for my links to the left side of my page, that the div I assigned for content does not respect the margins I assigned for my link div, so they end up overlapping.

    Site: www.bryantos.com

    CSS Code: (Ignore the fact that the ID is named #wrapper at the bottom. It is not being used as a wrapper, I was just too lazy to change it)
    Code:
    /*
    Code Auther: Bryant Marvin
    Written: May 14th 2008
    This code is used for Bryantos.com
    */
    
    body {
    
    	background-color: #959595;
    
    	padding: 10px 10px 10px 10px;
    
    	font-family: sans-serif;
    
    	font-size: small;
    
    	color: #4f0000;
    
    	line-height: 1.5em;
    
    	}
    
    h1, h2, h3, h4, h5, h6 {
    
    	color: white;
    
    	text-align: center;
    
    	font-family: "Trebuchet MS", sans-serif;
    
    	font-size: 170%;
    
    	}
    
    h2.black {
    
    	color: black;
    
    	}
    
    p	{
    
    	text-align: center;
    
    	color: #4f0000;
    
    	font-size: 120%;
    
    	}
    
    p.sig	{
    
    	text-align: left;
    
    	}
    
    a.header {	
    
    	color: black;
    
    	}
    
    a	{
    
    	color: white;
    
    	}
    
    a:hover {
    
    	background: black;
    
    	}
    
    ul	{
    
    	font-size: 120%;
    
    	}
    
    /* Style all of the links, and link <div> */
    
    #links	{
    
    	border-width: 1px;
    
    	border-style: dashed;
    
    	border-color: white;
    
    	padding-right: 15px;
    
    	margin-left: 10px;
    	margin-right 10px;
    
    	float: left;
    
    	}
    
    #wrapper {
    
    	border: 1px solid white;
    
    	width: 600px;
    
    	margin-right: 20%;
    
    	margin-left: 20%;
    
    	padding: 10px;
    
    	}
    Also, if you have a wide screen resolution then it will display fine at first. If you resize the window it will overlap.

    What can I do to get them to move with the size of the window, and still keep them from overlapping one another?
    Last edited by Bryantos; 05-20-2008 at 10:31 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You need to set an appropriate margin-left to the big column. If you check it in IE, you may see that the big column is getting pushed down the left column.
    Also check http://bonrouge.com/ for some standard layouts.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What do you mean by appropriate? Should it be set in pixel, percentages, or what? It has a 20&#37; margin-left, but it still does it.

    Edit:
    Got it: www.bryantos.com
    Last edited by Bryantos; 05-20-2008 at 08:01 PM.


  •  

    Posting Permissions

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