Delta Properties (need CSS help)

[Dogma]

I'm working on a redesign of a client's website. Many years ago, their site was the first I had ever done.

They are getting a new site now, one that I hope is an improvement over their old one (what was I thinking!).

http://cakdesign.com/dp/

I'm coding w/ standards compliance code. Right now it validates XHTML 1.0 Transitional, CSS 2 and I even have Section 508 compliance!

My problem is with the three columns: Office, Apartments, and Storage. I've only been able to align them in columns using float:left. Unfortunatly, in Netscape and Opera (and perhaps others) the borders on the side only go as far down as the menu bar.

Any other ideas on how to arrange those 3 sections into columns or else how to ge the borders all the way down? Thanks!

[mattsiegman]

The easiest way would be to use tables instead of divs.

[Dogma]

Originally posted by mattsiegman
The easiest way would be to use tables instead of divs.

I agree. Tables, however, are ment to hold tubular data and I'm not sure if this qualifies. I guess I'm looking for a CSS solution (if possible). If not, tables here I come!

[mattsiegman]

Well, you may be able to force the menu div to be a certain size. It looks like your probably using absolute positioning, so sizing shouldn't be a big deal. Well, it would bring the background with it, and you'd have to top align the text also.

Here is a suggestion: take the lines out of the menu div, and then put the menu and the three columns in a larger, container div. Then put the lines on that.

[Vin DSL]

I'm not trying to flame you, so don't take this wrong, but I downloaded your CSS file last night and played around with it. That is some seriously messed up code. I don't even know where to start. Where did you get "clear:all;" from? LoL! Sounds like pimple medication or something. I've never even heard of that before...

Personally, if it was me, I'd start from scratch. Here is the original code, if anybody wants to take a shot at it:

body {
	margin:0px;
	padding:0px;
	font-family:verdana, arial, helvetica, sans-serif;
	color:#333;
	background-color:white;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
	color:#ccc;
	}
h3 {
  font-family:"trebuchet ms", verdana, arial, helvetica, sans-serif;
	font-size:20px;
	text-transform:uppercase;
  }
	
#offices h3 {
  background:url("images/header_office.gif") no-repeat;
	height:15px;
  }
#apartments h3 {
  background:url("images/header_apartments.gif") no-repeat;
	height:15px;
  }
#storage h3 {
  background:url("images/header_storage.gif") no-repeat;
	height:15px;
  }
	
span {
  display:none;
	}
	
p {	
  font-family: "trebuchet ms", verdana, arial, helvetica, sans-serif;
	font-size:12px;
	}

#side p {
  color:#666;
	}

#footer p {
  color:#fff;
	font-size:10px;
	text-align:right;
	margin-right:10px;
	}	
	
a {
	color:#000;
	text-decoration:none;
	font-weight:bold;
	}
a:visited {color:#666;}
a:hover {color:#f00;}

#menu a {
  color:#fff;
	font-family:georgia;
	font-weight:bold;
	font-size:11px;
	margin-left:8px;
	margin-right:8px;
	}
#menu a:hover {
	color:#fc0;
	}

#main {
	margin:80px 0px 0px 155px;
	width:605px;
	}

#content {
  border-left:1px solid #666;
	border-right:1px solid #666;
	padding:0px 10px 0px 10px;
	margin-top:10px;
	margin-bottom:20px;
	height:100%;
	clear:both;
	}

#menu {
	background:#666;
	text-transform:uppercase;
	text-align:center;
	padding:2px;
	}

#offices, #apartments, #storage {
  margin-top:20px;
	width:180px;
	float:left;
	}

#offices, #apartments {
  padding-right:10px;
	border-right:1px solid #666;
	height:250px;
	}

#apartments, #storage {
  margin-left:10px;
	}
	
#menu ul, #menu li	{
	display:inline;
	list-style-type:none;
	margin:0;
	padding:0;
	}
	
#side {
	position:absolute;
	top:80px;
	left:20px;
	width:125px;
	padding:0px;
	background-color:#fff;
  }
	
#footer {
  background:#ccc;
	clear:all;
	margin-bottom:20px;
	}

[Vin DSL]

Hrm... try this and see if it makes a difference:

body, td {
	background-color: #FFFFFF;
	color: #333333;
	font-family: verdana, arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

[Vin DSL]

Here's my best shot:

a {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

a:visited {
	color: #666666;
}

body, td {
	background-color: #FFFFFF;
	color: #333333;
	font-family: verdana, arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

h1 {
	color: #CCCCCC;
	font-size: 28px;
	font-weight: 900;
	line-height: 28px;
	margin: 0px 0px 15px 0px;
	padding: 0px;
}

h3 {
	font-family: "trebuchet ms", verdana, arial, helvetica, sans-serif;
	font-size: 20px;
	text-transform: uppercase;
}

p {
	font-family: "trebuchet ms", verdana, arial, helvetica, sans-serif;
	font-size: 12px;
}

span {
	display: none;
}

#apartments h3 {
	background: url("images/header_apartments.gif") no-repeat;
	height: 15px;
}

#apartments, #storage {
	margin-left: 10px;
}

#content {
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
	clear: both;
	margin-bottom: 20px;
	margin-top: 10px;
	padding: 0px 10px 0px 10px;
}

#footer {
	background: #CCCCCC;
	clear: both;
	margin-bottom: 20px;
}

#footer p {
	color: #FFFFFF;
	font-size: 10px;
	margin-right: 10px;
	text-align: right;
}

#main {
	margin: 80px 0px 0px 155px;
	width: 605px;
}

#menu {
	background: #666666;
	padding: 2px;
	text-align: center;
	text-transform: uppercase;
}

#menu a {
	color: #FFFFFF;
	font-family: georgia, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	margin-left: 8px;
	margin-right: 8px;
}

#menu ul, #menu li	{
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#offices h3 {
	background: url("images/header_office.gif") no-repeat;
	height: 15px;
}

#offices, #apartments {
	border-right: 1px solid #666666;
	height: 250px;
	padding-right: 10px;
}

#offices, #apartments, #storage {
	float: left;
	margin-top: 20px;
	width: 180px;
}

#side {
	background-color: #FFFFFF;
	padding: 0px;
	width: 125px;
}

#side p {
	color: #666666;
}

#storage h3 {
	background: url("images/header_storage.gif") no-repeat;
	height: 15px;
}

[jason]

I think you'll lose the 508 compliance if you use a table-based layout, but I'm not 100% sure. Its a matter of text-to-speach readers (or other assistive technologies) not knowing how to navigate the page.

I'm starting to experiment with all-CSS layouts now, and I'm having the same problem--my divs are only as long as the content they contain. If I make them 100%, they become as long as my window hight. I haven't found a way to make all of them as long as the longest one needs to be (as would happen with tables). If anyone has an answer, I'd love to hear it.

--Jason

[Dogma]

Vin,

I understand your concern re: my code. Don't worry, I do intend to clean it up! To answer on of your questions, "clear:all;" was a mistake, I've corrected it to "clear:both;" (just clears two pimples ) which instructs the DIV to clear the floating elements above it.

But don't worry, the code will be a lot nicer in the end. I do want to get paid.

Jason,

Section 508 is one of the reasons why I am hesitant to use tables. My client does work with the government and also leases to disabled people. Their old site is a mess of nested tables that screen readers could not begin to understand. I hope this works better.

Jason, if I find an answer I'll let you know.

Thank all three of your who have replied!

[jason]

My "day job" is in education, at a college that gets a lot of money from the federal government, so 508 is a big topic for us right now. At the moment we are using a CGI script to strip away content from table based layouts to make accessible versions of sites--talk about clunky. My goal now is to get our designers to realize the efficiencies of CSS (both in compliance and in maintenance). As I learn more about CSS, I'll keep the boards posted.

--Jason

[jason]

Not sure if this will be of any help, but it fits my needs:
http://www.positioniseverything.net/...l.stretch.html

--Jason

[Dogma]

Hey, an update.

I've finished the site and launched it http://delta-properties.com . I, unfortunately, had to use tables in the end.

Thank y'all for all your help and comments!

-Colin

[mattsiegman]

Looks good still.
CSS is still in its infancy, and with the speed that users upgrade and browsers add support for things, its amazing its come this far. The workaround for you CSS troubles include muking with the CSS code before the browser uses it and changing it so it looks right on the fly. read: pain in the ass.

I took a look at: http://www.positioniseverything.net/...l.stretch.html and it seems to have some good info for your job.

Sorry I'm a bit late with this.

Anyhow, it looks good, and good luck if you try to make more Section 508 sites. At least now you only have one, non nested table. Much better than mucked up nested tables.