Still trying to get the hang of CSS. Seems like everytime I work with it it always screws up in one way or another :S

anyways, im designing a site for my friend. Basicly its go two images on the side, and then content in the middle...

you can see it here: http://accomputers.org/staff

as you can see, its pretty messed up. It should look something more along the lines of this: http://helmgames.com/random/design.jpg (mockup i made)

Here is the HTML:

<div id="container">
    <div id="containerleft">
        <div id="leftsideImg">
        </div>
        <div id="content">
         <!-- content goes here -->
        </div>
    </div>
    <div id="containerright">
        <div id="rightsideImg">
        </div>
    </div>
</div>

and heres the CSS:

#container{

}

#containerleft{
    float: left;
    clear: left;
    min-width: 160px;
    max-width: 60%;
}

#leftsideImg{
    float: left;
    clear: left;
    background: 

url("http://www.accomputers.org/images/ls.jpg");
    width: 160px;
    height: 700px;
}

#content{
    float: right;
    clear: right;
    left: 160px;
}


#containerright{
    float: right;
    clear: right;
    min-width:160px;
    max-with: 40%;
}

#rightsideImg{
    float: right;
    clear: right;
    background: 

url("http://www.accomputers.org/images/rs.jpg");
    width: 160px;
    height: 700px;
    
}

Why is the content div inside the left container, in the html?

why does it matter?

Try:

#content{
float: left;
left: 160px;
}
#containerright{
float: left;
min-width:160px;
max-width: 40%;
}

Also always check for spelling errors.
(you had with instead of width)

aww sweet that... almost worked. The 2 images are in the right places, but the content is still down below!

http://accomputers.org/index.php see what i mean

Thanks though

Originally Posted by Slick Nick

why does it matter?

Because it looks like you're setting the left nav to start at the left edge of the screen and be 160 wide, and then your content div to start at 160 pixels from the left. So the content is wrapping downward against the 160 pixel width of the left column ( it's container ).

hmm..I think i kind of get it... so what should I do differently then to stop it wrapping?

I might actually be wrong, but I have a hunch. Try the code below, it's yours, but how I would approach it. If everything is floated, you should be able to hard-code the width of the left/right containers for the images they'll hold, and have your center column resize with the browser.

<div id="container">
    <div id="containerleft">
        <div id="leftsideImg">
        </div>
    </div>
    <div id="content">
    <!-- content goes here -->
    </div>
    <div id="containerright">
        <div id="rightsideImg">
        </div>
    </div>
</div>

But also get FireFox and FireBug. When you use the DOM tool ( the Document Object Model representing your html as a tree ) you can hover the mouse over the code for a div, and it will highlight it in the browser. Also you can change CSS properties on the fly and see whether the change is what you're trying to accomplish. I've been redoing my site, and this has saved me a lot of aggravation.

I must say, you're going about that layout the hard way. There's an easier away to get that red 'stripe' in there without using two extra divs just to hold the images, especially since all your content is in the center, you don't need 3 'columns'.

Create ONE graphic that contains the top part down to just below the red bar where the gradient turns into plain gray. Put that graphic in as the background of a #container div and set it to repeat horizontally only. Set your body BG color to the gray. Then use a fixed-width "wrapper" to hold the center section.

By the way, min-width and max-width will be ignored by IE 6 and below.

The float: left; left:160px will ONLY work if #content is set to absolute or relative positioning, neither of which may be necessary. Margin-left would be needed for float - and then you invoke the IE doubled-float margin bug.

thanks guys

Tryd your method forrest, didnt work

Trying your method ladynred, but it doesnt want to work right. I have the pages background set to a image which repeats itself. That part works fine

But then there is the big graphic which is the gradiant and red verticle lines. For some reason around that there is a small gap where you can see the main background, and because of that it also doesnt align with the main background. I wonder if its the image size that has something to do with it? its 1000x687

So heres what my code looks like now: (not worrying bout content part yet, just trying to get background to work)

body {
    font-family: Arial;
    color: #2c2c2c;
    background: 
url("http://www.accomputers.org/images/bgr.jpg") repeat-y 
center center;
    background-color: #d1d0d1;
}

#container{
    background: 
url("http://www.accomputers.org/images/bg.jpg") repeat-x;
    width: 100%;
    height: 100%;
}

#content{
    float: left;
    left: 160px;
}

and the html...

<div id="container">
    <div id="content">
    <!-- content goes here -->
     </div>
</div>

and heres how it looks: http://accomputers.org/index.php

body {
    font-family: Arial;
    color: #2c2c2c;
    background: 
url("http://www.accomputers.org/images/bgr.jpg") repeat-y 
center center;
    background-color: #d1d0d1;
}

#container{
    background: 
url("http://www.accomputers.org/images/bg.jpg") repeat-y
center center;
    width: 100%;
    height: 100%;
}

#content{
    left: 160px;
}

I figured this out of nothing so it might be all wrong.

well...it almost worked. Theres still a gap along the sides and top...

I changed it so that the container goes center top instead of center center and also so it repeats-x instead of y. Works alot better now, theres just that blasted gap that is always there :S

oddly enough it actually looks better on really high res, on lower res it cuts part of the image off at the bottom. I suspect that has somthing to do with the dimension percentages