css float problems

@jms318Oct 03.2008

I’m working on doing a complete float layout. For the most part i have achieved the layout i wanted but i have a few bugs across browsers.

here is the link to the page:
~~[url]~~http://stu.wccnet.edu/~jswager/inp170/homework/bc_main.htm[/url]

In IE i get the border around the whole content but in all other browsers the border around collapses because the floating. So i’m wanting to know what im doing wrong in my css not to get the border around my whole page.

My second problem and it varies in all browsers is the nav bar on top. I must float this unordered list but how can i get correct spacing between each LI.

here is my css

[code] body { font: 12px verdana, arial, lucida, helvetica, sans-serif; margin: 0; padding: 0;}

/* heading styles */ h1 { font-size: 20px; } h2 { font-size: 18px; overflow:auto;} h3 { font-size: 14px; } /* hover effect on h2’s */ h2:hover { color: #a33003} /* h2 adjacent sibling selector */ h2+p {margin-bottom: 0px;}

/* image floating */ img { float: left; margin: 10px 10px 0 10px; }

/* Links */ a:link { color:#a33003;} a:visited { color:#7F2F0F;} a:hover , a:focus , a:active { color: #fff; background: #A33003; text-decoration:none;}

#whole-page { width: 900px; margin: 10px auto; border: 1px solid #000; }

/* Top header */ #main-head { float: left; padding: 10px; background: #A33003;}

/* Company Logo */ #logo { float: left; width: 195px; height: 43px; background: url(../imgs/logo.gif) no-repeat right; } #logo h1 { margin: -1000px; }

/* Navigation Bar */ #nav-bar { list-style-type: none; float: right; font-size: 15px; margin-top: 15px; overflow:auto; }

#about { float: left; float: left; width: 7em; } #services { float: right; float: left; width: 5em; } #product {float: left; float: left; width: 5em; } #support { float: right; float: left; width: 5em; } #news { float: left; float: left; width: 5em; } #contact { float: right; float: left; width: 5em;} /* nav bar links settings */ #nav-bar li a:link { margin: 0; font: small-caps bold 15px verdana, arial, lucida, helvetica, sans-serif; word-spacing: 0.2em; color:white; text-decoration:none;} #nav-bar li a:visited { } #nav-bar li a:hover , a:focus , a:active { text-decoration:underline; }

/* Latest News Side Bar */ #latest-news { padding: 10px; float: left; background: #CFC2C2; width: 200px; overflow:auto; min-height: 800px; }

.news { font-size: 12px; }

/* Main Content – Four collums */ #content {float: left; padding: 10px; overflow: auto; width: 660px;}

/* collum 1 */ #col-welcome { border: 1px solid #CFC2C2; overflow:auto; padding: 0 10px 10px 0;}

/* collum 2 */ #col-service {float: left; width: 33%; overflow:auto;}

/* collum 3 */ #col-support { float:left; overflow:auto; width: 33%;}

/* collum 4 */ #col-product {float: left; width: 33%; overflow:auto;} [/code]

to post a comment

CSS

3 Comments(s) _↴

@johnnyblotterOct 03.2008 — #First, you aren't getting your border to work because you aren't clearing your floats. You need to add clear:both; to your footer. When you float things, it means they take up no space in the flow of the document...which is why your wrapper takes up no space...by adding clear:both in there, the content will drop below the last floated element.

For your nav items, take out the id's you have on all the li's, just give the ul an id, then style the a's and li's the same way. give the a's and li's the same width...say, 5em or something...something that puts them all very close to each other...then control spacing by using margins on the li's.

@jms318authorOct 03.2008 — #Thank You johnnyblotter !!! That fixed the border problem. And normally i would go with the way you told me to do the UL but i failed to mention the rules i was given to build the nav bar in the master head. I must use floats on every LI

here is the instructions given me:

Masthead:

* Provide 10px of space inside the element
  * Use #A33003
  * Use the Image Replacement technique from class for the logo.
  * Navigation is an unordered list
   o remove styling, padding
   o Set 15px top margin, remove remainder
   o Text should be white, small-caps, bold, 15px
   o Use float on the list items, not display: inline
 
  * Use opposing floats to sit logo and navigation next to each other.

Here is the new Code the site is almost 100% correct even in IE6:

<i>
 </i>body { font: 12px verdana, arial, lucida, helvetica, sans-serif; margin: 0; padding: 0;}
 
 /* heading styles */
 h1 { font-size: 20px; }
 h2 { font-size: 18px; overflow:auto;}
 h3 { font-size: 14px; }
 /* hover effect on h2's */
 h2:hover { color: #a33003}
 /*  h2 adjacent sibling selector */
 h2+p {margin-bottom: 0;}
 
 /* image floating */
 img { float: left; margin: 10px 10px 0 10px; }
 
 /* Links */
 a:link { color:#a33003;}
 a:visited { color:#7F2F0F;}
 a:hover , a:focus , a:active { color: #fff; background: #A33003; text-decoration:none;}
 
 #whole-page { width: 900px; margin: 10px auto; border: 1px solid #000; }
 
 /* Top header */
 #main-head  { float: left; padding: 10px; background: #A33003;}
 
 /* Company Logo */
 #logo     { float: left; width: 195px; height: 43px; background: url(../imgs/logo.gif) no-repeat right; }
 #logo h1 { margin: -1000px; }
 
 /* Navigation Bar */
 #nav-bar  { min-width: 645px; list-style-type: none; float: right; overflow:auto; }
 /* List Format Settings */
 #nav-bar li { width: 6em; font-size: 15px;  margin: 15px 0 0 0; }
 /* Float of each li */
 #about       { float: left; float: left;} 
 #services { float: right; float: left;}
 #product   {float: left; float: left;}
 #support   { float: right; float: left;}
 #news         { float: left; float: left;}
 #contact   { float: right; float: left;}
 /* nav bar links settings */
 #nav-bar li a:link { margin: 15px 0 0 0; font: small-caps bold 15px verdana, arial, lucida, helvetica, sans-serif; color:white; text-decoration:none;}
 #nav-bar li a:visited { font: small-caps bold 15px verdana, arial, lucida, helvetica, sans-serif; color:white; text-decoration:none;}
 #nav-bar li a:hover , a:focus , a:active { text-decoration:underline; }
 
 /* Latest News Side Bar */
 #latest-news { padding: 10px; float: left; background: #CFC2C2; width: 200px; overflow:auto; min-height: 800px; }
 
 .news { font-size: 12px; }
 
 /* Main Content - Four collums */
 #content {float: left; padding: 10px; overflow: auto; width: 660px;}
 
 /* collum 1 */
 #col-welcome { border: 1px solid #CFC2C2; overflow:auto; padding: 0 10px 10px 0;}
 
 /* collum 2 */
 #col-service {float: left;  width: 33%; overflow:auto;}
 
 /* collum 3 */
 #col-support { float:left;  width: 33%; overflow:auto;}
 
 /* collum 4 */
 #col-product {float: left; width: 33%; overflow:auto;}
 
 
 #footer { overflow:auto; clear:both; }

@johnnyblotterOct 03.2008 — #Sure but you can still use what I said about the nav.

<ul id="this">

<li><a>

etc

then just style it like

#this li {float:left;width:5em;}

#this li a {float:left;width:5em;}

Then use margins on the li to evenly space it.

Also in #CSS _↴

Two Independent Unordered Lists Aligning divs Background Image in a CSS

Success!

Help @jms318 spread the word by sharing this article on Twitter...

Tweet This

css float problems

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

css float problems

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴