Help - Tableless design with 2 columns

Please go to http://www.seoed.com/index.php

I'm trying to position 2 divs. The Main div and the right column div.

They should look like here: http://play.cpea.ro/screen/seod.gif

I had a hard time with the menu. Took me an hour to make it work in IE, Firefox and Opera.

This is giving me a headache. Any feedback/suggestions would be appreciated.

The css: http://www.seoed.com/styles/seoed.css

Thank you.

Please check it with Firefox and Opera also

 

dont have firefox or opera, but looks great in IE to me.

 

Your CSS doesn't work in netscape 7.0 - The left side disappears off the page.

Haven't looked at your CSS file as it's bed time in the UK. You are welcome to steal my CSS files - both the sites in my sig use CSS layout instead of tables.

I am writing some pages about CSS. They are draft but I've uploaded them for you to look at.
http://www.computer-zen.com/css/replacing-tables.htm

The trick is to keep it simple.



<edit> The left side reappears when I increase the window size. For convention's sake it's better when the right side disappears. Probably some centralising thing. </edit>

 

Hee hee. Almost finished.

Lots of SEO sites promote Web Standards, Usability and Accessibility. Just that they don't apply to their own site.

You can see what I've done so far at http://www.seoed.com/index.php . Hope you like it. Please report if there are any browser problems.

 

I don't think you need any help, that's a very cool bit of CSS I just wanna know what the properties of the class "prime" are; I couldn't dig any further

Looks perfect in both Firefox & Opera.

 

Thanks. here you go:

/* BOTTOM */

#bottom_menu {
	text-align: left;
} 

#bottom_menu ul {
	margin-left: 24px;
	padding-left: 0;
	display: inline;
	text-align: left;
	
} 

#bottom_menu ul li {
	font-family: Verdana, "Lucida Console", sans-serif;
	font-size: 10px;
	color: #333333;
	line-height: 10px;
	margin-left: 0;
	padding-left: 7px;
	padding-right: 7px;
	border-left: 1px solid #747474;
	list-style: none;
	display: inline;
}
	
		
#bottom_menu ul li.prime {
	margin-left: 0;
	border-left: 5px solid #555555;
	border: 0;
	list-style: none;
	display: inline;
}

#bottom_menu a {
	font-family: Verdana, "Lucida Console", sans-serif;
	font-size: 9px;
	color: #0054a6;
	text-decoration: none;
}

#bottom_menu a:hover {
	color: #0054a6;
	text-decoration: none;
	background-color: #E8EFF7;
}

Code (markup):

 

That's way cool - much better. It's really nice to see folk making the effort for accessibility. If you use absolute positioning you can normally have the content right at the top of the code rather than the links. I tend to go content first as it improves some of the descriptions in google listings.

If I could make a tiny little accessibility comment - you have used pixels rather than % or ems for the font size. This is bad for partially sighted people who have view/font/largest selected in internet explorer.

Cool stuff.

 

Wow, so that's how you do it... thanks Razvan
Let us know if you do anything else, very nice style indeed.

 

Took me almost 5 hours to make this form look the same in all main browsers.
A contact form without tables, using fieldset and labels.
http://www.seoed.com/contact

Here is the CSS:
http://www.seoed.com/styles/content.css

 

You got it so fixed you got rid of it, cool.