Div on top of another?

Maybe im using the wrong code? I just want a background strip at the top

If you were wanting the illusion of a full-width header you need to have a repeating background image of the height of the div you wanted to repeat. It won't adversely affect loading times as it only needs to be small in width. 10 pixels width should be enough.

Once you have the image the height you want and a small width, add the following code into your CSS.

body {
margin: 0px;
padding: 0px;
background: url(imageFolder/imageName.jpg) repeat-x top left;
}

Thanks for the reply, but what i really want to do is create a background and have my website in the middle. But i want my website to always be in the middle even in different resolutions. Does this mean i have to create a div on each side of the website and split the image in two? Or is there a better way?

You have a container with left and right margins set as auto, so that should align whatever is within the container into the center of the browser.

The previously provided code will have a background image (in your case, a strip) that makes the header appear to be full-width but whatever is in the actual header will be in the center of the page as it is in the container. You need to make the background image in a graphics program such as Photoshop or if you don't have it, MS Paint (the agony!) will do as long as it's a flat colour you were wanting. Essentially, your website will look like a capitalised letter 'T', with the background image strip along the top but the actual website centered.

As far as I understand your last comment this will solve your problem. Your website will be centered in the browser but have a strip fully across the top. Did I understand that correctly?

Hmm not quite... let me try to explain better. Ok so i have this image here:

http://stuffkit.com/wp-content/uploads/2011/02/www.stuffkit.com-4.jpg

What i want to do is basically put my contents in the middle of it, using a container, like so:

Now i want it so that the container always contains the center part of the image, so i was thinking of splitting the image in 3 parts, so that if the resolution is lower than the full size of the image only the left and right parts will be trimmed and the middle part will still be the middle of the image. Still confused? Here are some websites that utilize the same thing:

http://www.newgrounds.com/
http://www.rockpapershotgun.com/

How i was planning to do is is the centre the container using margin left,right auto, and the left and right boxes for the background will have width:100%. Is this correct?

Bump

Ah, actual images, sorry I'd misunderstood as it's been awhile since I've seen those, .

What you need to create is a flexible three-column layout, which you can learn about and download here.

Yes that is how i want it to be, but i dont want the middle container to have a fixed width instead. How can i make the side containers take up the rest of the available space?

Thanks

Also, can you please tell me why height:100% doesnt for my divs? I set the body and html height to 100% and it works for the body and html divs, but it doesnt reflect on the others..

100% heights on an element make it stretch to 100% of the height of the parent element. Putting 100% height on the html and body is a step in the correct direction, but you also need 100% height on what you want to stretch.

<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
}
#yourDiv {
height: 100%;
}
</style>

As for a three-column layout with the outer divs being of a fixed width, I generated a layout for you using a service I located. Click the link in this paragraph and then right-click the page you're taken to, select View Source and grab the XHTML and CSS.

Thanks for the reply

I already have 100% like you said and it still doesnt work. I will post the full code:

/* Used to make the background fill the full page */
html, body {
height: 100%;
}
 
/* Main */
.container {overflow: auto; width:768px; margin-left:auto; margin-right:auto; z-index:0; border:2px Solid Black;}
.leftContainer {width:300px; height: 100%; background-color:Red; float:left;}
.rightContainer {width:300px; height: 100%; background-color:Red; float:right;}
 
/* Header */
.header {width:768px; height:100px; margin-left:auto; margin-right:auto;}
 
/* SideBar */
.sideBar {width:200px; height:600px; float:left; z-index:0;}
 
/* Content */
.content {width:568px; height:600px; float:right; z-index:0;}

    <div class="container">
        <div class="header">
        </div>
        <div class="sideBar">
        </div>
        <div class="content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
 
        <div class="leftContainer">
    </div>
 
        <div class="rightContainer">
    </div>

Also, that layout is good but it isnt what i wanted. I wanted the middle div to have a fixed width, and the side divs too fill up the rest of the space, ie. the opposite of that layout.

Thanks!

The parent element of your divs is container, which isn't set to 100% height.

The parent element of your divs is container, which isn't set to 100% height.

Hmm??? How?? Container div closes off before the others are started.

What he is saying in regard to my post is that you haven't placed the 100% height on the container div. Once you do that it should be 100% height as it will then be 100% of a 100% height body tag.

I'll explain it a bit more. If you have a div that is 500px high and a div within it is set to 100% height it will only reach a max of 500px. In your case, the html is set to 100%, and the body is set to 100%. Therefore the body will be of 100% height. That is why the container must be set to a height of 100% to be of actual 100% height.

I understand how it works, here i will show you my code again:

html, body {
height: 100%;
}
 
.leftContainer {width:300px; height: 100%; background-color:Red; float:left;}
.rightContainer {width:300px; height: 100%; background-color:Red; float:right;}

I dont want the class "container" to go the botton thats why it doesnt ahve 100% height, i want the side panels to go to the bottom. I have everything and it still doesnt work.

Here is the asp.net code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="Form1" runat="server">
 
    <div class="middleContainer">
        <div class="mainContent">
            <div class="header">
            </div>
            <div class="sideBar">
            </div>
            <div class="content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
    </div>
 
        <div class="leftContainer">
    </div>
 
        <div class="rightContainer">
    </div>
 
    </form>
</body>
</html>

Maybe it is because the code is enclosed in a form tag?

I removed the form tag and it works now hehe

Ok it works now, but i have some more questions i should ask:

Going on the image above, i want the side panels (black) to stick to the content panel (red). I then want the black panels to stretch until they reach the end of the page (green border) ie. take up the remaining space. In the black panels there will be an image in each, and i want the image to start from the side touching the content pane (red panel).

Thanks

Apart from that, look at what is happening:

The Side panels are being pushed down for some reason.

I dumped a copy here

http://www.muscletitans.com/temp/home.aspx

Bump

Bump, anyone? I cant fix it