18 replies [Last post]
TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Hi guys, im trying to make this work but i cant:

Basically, i want to have a div the same height as the header, stretch to the full width of the page, but i want it to render under the original header div which is in the centre top of the page. Here is my code:

/* Custom
----------------------------------------------------------*/
 
/* Main */
.container {width:768px; height:auto; margin-left:auto; margin-right:auto; border:2px, solid, black;}
 
/* Header */
.header {width:768px; height:100px; margin-left:auto; margin-right:auto; background-color:Black;}
.headerStretch {width:100%; height:100px; background-color:Aqua; position:fixed; top:0;}
 
/* SideBar */
.sideBar {width:200px; height:100px; float:left; background-color:Black;}
 
/* Content */
.content {width:568px; height:100px; float:right;}

It works but the div "header" is being rendered under the other one.

Thanks

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Maybe im using the wrong

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

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 8 years 29 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

Repeating background image

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;
}

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Thanks for the reply, but

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?

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 8 years 29 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

Ah. What you want is my

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?

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Hmm not quite... let me try

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?

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Bump

Bump

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 8 years 29 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

Ah, actual images...

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

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

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Yes that is how i want it to

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..

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 8 years 29 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

100% heights on an element

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.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Thanks for the reply I

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!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Vashin wrote: 100% heights on

Vashin wrote:

100% heights on an element make it stretch to 100% of the height of the parent element.

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

Verschwindende wrote:
  • CSS doesn't make pies

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

thepineapplehead

thepineapplehead wrote:
Vashin wrote:

100% heights on an element make it stretch to 100% of the height of the parent element.

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.

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 8 years 29 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

What he is saying in regard

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.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

I understand how it works,

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?

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

I removed the form tag and it

I removed the form tag and it works now hehe

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Ok it works now, but i have

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

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Bump

Bump

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 7 years 28 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Bump, anyone? I cant fix it

Bump, anyone? I cant fix it