amateur doesn't know what he's doing

[kevindosi]

I'm trying to make a little wordpress theme and don't know what I'm doing wrong. I want to have 2 sidebars with a bunch of text in them on the left and right, then a main content section in the middle. For some reason, it looks fine on Firefox and Chrome, but crap in Safari. I'm assuming it's also crap in IE. Here's the URL: http://oscarssuck.beforethecubicle.com/
The basic css I've got for the 3 divs is:

#sidebar{
	color:gray;
	float:left;
	width:18%;
	background-image:url('images/sidebarbg.png');
	border:gray 1px solid;
	margin:5px;
	padding:5px;
	font-family:arial;
	font-size:x-small;
	}
#sidebar2{
	color:gray;
	float:right;
	width:18%;
	background-image:url('images/sidebarbg.png');
	border:gray 1px solid;
	margin:5px;
	padding:5px;
	font-family:arial;
	font-size:x-small;
	}
div#content{
	width:50%;
	min-height:397px;
	background-image:url('images/sidebarbg.png');
	border:gray 1px solid;
	padding:5px;
	}

I put the two sidebars first in the page, followed by the content.
Any idea what I'm doing wrong?

 

[Darth.Titan]

Well to start with, the CSS you posted for the content div is not what is in the link provided. Here's what's actually online:

div#content{
position:absolute;
top:180px;
left:80px;
width:550px;
min-height:397px;
background-image:url('images/sidebarbg.png');
border:gray 1px solid;
padding:5px;
}

The absolute positioning of the content div is messing things up some for sure. I didn't take a whole lot of time to experiment, but start there.

Also, IMO, a fixed-width layout would probably be easier to deal with in this situation than trying to remain fluid.

BTW, the layout looks bad in Firefox as well when you resize the browser window.

 

[avro707]

Another thing that might be sending you a bit wild is the physical location of the DIVs in the HTML code.

Your Sidebar DIVS are appearing to be before the TopBar DIV (is that intended to be near your banner and before the side bars??), for one, and the content DIV is after the Sidebar2 DIV.

I don't think this helps much - but looking at the code in Firebug, it's a bit all over the place at the moment and I can't seem to sort it, not quickly anyway. It looks like you've made further changes since the person above commented.

If you can sort the order of the major DIVs then making appropriate use of float and clear along with correct widths and heights of elements should set it right.

I'd order them like this:
0. Everything else above the elements listed below
1. Top BAR DIV
2. Side bar (left)
3. Content DIV
4. Side bar (right)
The everything else after those.

Take the example of the person above in doing fixed widths for the moment rather than trying to be fluid.

By the way, I'm using Firefox 3.5 on Mac OS X 10.6.5.