...

View Full Version : Float not working correctly, or am I silly?



Bryantos
05-20-2008, 09:26 AM
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 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?

abduraooft
05-20-2008, 09:44 AM
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.

Bryantos
05-20-2008, 06:40 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum