amateur doesn't know what he's doing

Discussion in 'Web Design and Development' started by kevindosi, Jan 3, 2011.

  1. kevindosi, Jan 3, 2011
    Last edited by a moderator: Jan 3, 2011

    kevindosi macrumors regular

    Joined:
    Mar 16, 2006
    #1
    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:
    Code:
    #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?
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    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:
    PHP:
    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.
     
  3. avro707 macrumors 6502a

    Joined:
    Dec 13, 2010
    #3
    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.
     

Share This Page