Help and critique.. (float:left woes)

HTML & CSS
1

Hi Guys,

After a 3 year break I’m starting to get back into coding. I’m essentially starting from scratch and was wondering if someone could give me some support/critique for this website:

Test Project

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Test Project</title>
<link rel="stylesheet" href="style.css" /></head>
<body>
<div class="welcome">
 <span class="left">Welcome to My Test Website</span>
 <span class="right">Website information</span>
 </div>
  <div id="header">
  <a href="#"><img src="http://www.sitepoint.com/forums/images/header.gif" class="header_image" /></a>
  <a href="#"><img src="http://www.sitepoint.com/forums/images/ad.gif" class="advertisement" /></a>
  </div>
  <div class="navigation_bar_bg">
  <div class="navigation_bar_left">
   <div class="navigation_bar_right">
    
<ul id="nav">
		<li><a href="index.html">Home</a></li>

		<li><a href="about.html">About</a></li>
		<li><a href="portfolio.html">Portfolio</a></li>
		<li><a href="contact.php">Contact</a></li>
	</ul>
	<span class="clear"></span>
<ul id="mininav">
		<li><a href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="portfolio.html">Portfolio</a></li>
		<li><a href="contact.php">Contact</a></li>
	</ul>
	
    
    </div>
   </div>
  </div>
</html>


/* Main body */ 

body {
background: #1f2731 url(images/gradient_bg.gif) repeat-x;
margin: 0px;
}

.welcome {
background: url(images/topbar.gif) top center;
height: 28px;
color: #fff;
font-family: Arial;
font-size: 12px;
padding-top: 14px;
}

/* Welcome bar and header */

.left {
margin-left: 136px;
float:left;
clear:left;
}

.right {
margin-right:136px;
float:right;
clear:right;
}

.clear {
clear:both;
height: 1px;
}

#header {
background: url(images/header_bg.gif) top left;
height: 97px;
padding: 0 129px;
}

.header_image {
margin-top: 21px;
}

.advertisement {
float:right;
margin-top: 19px;
}

/* Navigation bar */

.navigation_bar_bg {
background: url(images/nav_bg.gif) repeat-x top left;
height: 88px;
margin: 0 106px;
}

.navigation_bar_right {
background: url(images/nav_bar_right.gif) no-repeat top right;
height: 88px;
}

.navigation_bar_left {
background: url(images/nav_bar_left.gif) no-repeat top left;
}


#nav {
	float: left;
	margin-top: 7px;
	margin-left: -25px;
}

#nav li {
	float: left;
	list-style: none;
	height: 46px;
	width: auto;
	text-align: center;
}
	#nav a {
		display: block;
		padding: 0px;
		height: 46px;
		line-height: 46px;
		width: 82px;
		text-decoration: none;
		font-family: arial;
		font-size: 14px;
		font-weight: bold;
		color: #FFF;
	}
		#nav a:hover {
			background: url(images/nav_hover.gif) repeat-x top left;
			color: #f7cf39;
		}
		
		
#mininav {
	float: left;
	
}

#mininav li {
	float: left;
	list-style: none;
	height: 46px;
	width: auto;
	text-align: center;
}
	#mininav a {
		padding: 0px;
		line-height: 32px;
		text-decoration: none;
		font-family: arial;
		font-size: 12px;
		font-weight: normal;
		padding: 0 14px;
		color: #5e6d75;
	}

I need help with

  1. Clearing the floats, I’ve lost all concept of clearing and have no idea why I cannot clear the second <ul>
  2. Ideas on how to write cleaner code than

  <div class="navigation_bar_bg">
  <div class="navigation_bar_left">
   <div class="navigation_bar_right">
    </div>
</div>
</div>

To achieve the effect of a fluid rounded corner box.
3) General critique/thoughts as to the quality of the code.

Thanks SP

2

Just an update: After reading around I’ve fixed my float problem - at the expense of adding more <div>'s. I’d really appreciate any alternatives to this solution or the solution used to achieve the rounded corners of the box that has the navigation in it?

3

a favoured clearing method is giving the element “overflow:hidden;” It TOTALY ELIMINATES the need for having CLEARING ELEMENTS in the markup. (Thanks Paul OB)

As far as rounded corners, well i assume you are going of full IE6 support, otherwise I’d just use CSS3’s border-radius property and eliminate ALL markup that is there solely for the purpose of making the corner.

If you are going all retro, I suppose your method is not too bad, but i will submit my standard practice for this.


<div id="sidebar">
<div class="top"><b></b></div>
<div class="box_content">
<div class="bot"><b></b></div>
</div>

the only draw back is if you had a fading bg. It looks like a lot of code , but actually it syncs with your regular code easily.

<div class=“top”><b></b></div> & <div class=“bot”><b></b></div> are simply sliding doors, you can alos ad any top/bottom margin and clears for layout to these classes… further slimming your code overall, after that you can either contain your content in a .box_content div, or merely add the class to the BLOCK element itself . #sidebar was there to indicate the rest of the layout.

hope that helps

4

Thank you for your suggestions. Out of interest, why do you use <b> inside the <divs>?

I was hoping that IE6 would disappear in my absence :(. I’ll have to view the user stats for it and see whether it is worth the hassle. God I hate that browser.

5

Your link now points at a copy of IPB instead of the code you posted here, but for the most part I’m stuck wondering why you’re using spans on a heading element and… well, I don’t even semantically know what the other bit is… anchor for what also appear to be a heading element with a presentational image in the markup, multiple DIV for what I suspect need no div, a clearing DIV like it’s still 2001, and no idea what you’re trying to do with the second menu either.

Though that IPB skin makes me want to punch myself in the face – several k of static inlined CSS, content cloaking of a header you should be overrriding…

Though it’s been at least five or six years since I even poked my head under the hood of IPB, I can see little has changed with their “let’s use 100k of HTML to deliver 1.1k of plaintext and ten form elements” bloat… mostly built on decade out of date coding practices.

6

Because its less code than using a span and b is almost (but not quite) semantically neutral. It also unlikely that you will be targeting a b element in that section but 99% likely you would be targeting a span so also avoids conflict issues.

Some people hate using the b element but I think that its neutral enough not to worry. If it worries you then just use a span.

I was hoping that IE6 would disappear in my absence :(. I’ll have to view the user stats for it and see whether it is worth the hassle. God I hate that browser.

IE6 usage in the west is very low and as long as the page is usable I wouldn’t worry abut round corners or other advanced features. However IE7 and 8 still don’t under border-radius so you will have to make a choice whether to support them or not. Remember once you add extra html then its stuck there for all time most likely.