Width Height issues

[bowdeni]

Good day all. Ive spent the past hour research my problem, and had a look at the FAQ. Maybe the FAQ isnt the solution to my problem, or maybe it is - this is the first week I've ever done CSS to do layouts and I'm still picking it up. Apologies if my post is one of those that appears every day. I just noticed there is one kinda similar to mine but I didn't want to hi-jack it.

I've got a few independent CSS autostretch woes, that will hopefully be a quick easy problem for someone here. I'm only just getting into CSS.

First problem:

On the horizontal navigation bar at the top of the page, I have a div tag that autostretches to the length of page, along with a bar underneath it. Here is the code:

	 div.silverextender{
    margin: 0px;
    padding:0px;
    position: absolute; 
    left: 838px; 
    top: 60px; 
    height: 29px;
    width:100%;
	background-image:url(Graphics/SilverBar.gif);
	background-repeat:repeat-x;
	}
	
	 div.blueunderbar{
    margin: 0px;
    padding:0px;
    position: absolute; 
    left: 5px; 
    top: 89px; 
    height: 17px;
    width:100%;
	background-image:url(Graphics/blueunderbar.gif);
	background-repeat:repeat-x;
	}

What I want it to do is to fill 100% of the remain space in the browser horizontally. What is happening is that these div's stick out about 500px further, creating horizontal scrollbars. Any idea why this is the case? They arent filling in space but creating it!

Second problem:

Another autostretch problem! yay! this one is vertical for a change. The CSS :

		div.endofnav8{
    margin: 0px;
    padding:0px;
    position: absolute; 
    left: 4px; 
    top: 396px; 
    height: 100%;
    width: 169px;
	background-image:url(Graphics/endofnav.gif);
	background-repeat:repeat-y;
	}

On one particular page it only autostretches to about 60% of the page length. This one particular page has a very long DIV tag within it. Any ideas?

I really appreciate any help people can offer

[Paul O'B]

Hi,

You are probably going about this the wrong way and I would need to see your layout and what you were trying to do to offer the correct advice.

I can tell you why your code isn't working as you think it should though.

div.silverextender{
	margin: 0px;
	padding:0px;
	position: absolute; 
left: 838px; 
	top: 60px; 
	height: 29px;
width:100%;
	background-image:url(Graphics/SilverBar.gif);
	background-repeat:repeat-x;
	}

You want an element that is 100% wide so you specfied 100%. Then you went and placed that 100% wide element 838px from the left edge which will make it poke out 838px on the right side of the screen because only 100% will fit inside 100%.

the same problem applies to the vertical height>

div.endofnav8{
	margin: 0px;
	padding:0px;
	position: absolute; 
	left: 4px; 
top: 396px; 
	height: 100%;
	width: 169px;
	background-image:url(Graphics/endofnav.gif);
	background-repeat:repeat-y;
	}

Assuming the parent of that element has height that can be calculated (not height:auto) then that element will be 100% high + 396px which makes it 396px too big.

You probably need to move away from absolute positioning and let the content flow naturally and dictate the height of the elements. 100% height is a complicated subject and is discussed in detail in the faq and is worth a read. The easiest solution is to avoid layouts that require 100% height but if you desparetly need them then look at the 3 col demo sticky thread for pointers.

Absolute positioning removes elements from the flow and is usually a poor choice for positioning things (unless everything is a fixed size )and you may be better off using static positioning and floated elements.

If you have an example of what you are trying to achieve then we may be able to offer some pertinent advice on ways to handle it

[bowdeni]

Thanks for your reply. Here is a graphic of what the layout I am trying to achieve. This was an early illustrator mark up:

www.mariokartwii.com/sitelayout.jpg

The div in the top right is silverextender, code is:

	 div.silverextender{
    margin: 0px;
    padding:0px;
    position: absolute; 
    left: 838px; 
    top: 60px; 
    height: 29px;
    width:100%;
	background-image:url(Graphics/SilverBar.gif);
	background-repeat:repeat-x;
	}

The bluebar underneath it illustrated in the picture is

	 div.blueunderbar{
    margin: 0px;
    padding:0px;
    position: absolute; 
    left: 5px; 
    top: 89px; 
    height: 17px;
    width:100%;
	background-image:url(Graphics/blueunderbar.gif);
	background-repeat:repeat-x;
	}

I have a Y repeating image for the div tag end of nav, which is the left navigational issue:

		div.endofnav8{
    margin: 0px;
    padding:0px;
    position: absolute; 
    left: 4px; 
    top: 396px; 
    height: 100%;
    width: 169px;
	background-image:url(Graphics/endofnav.gif);
	background-repeat:repeat-y;
	}

I can post more code as required. Just to say again - really appreciate any help that can be offered

[bowdeni]

Wow! I've actually managed to fix this myself after two hours of trying. I'll post the solution incase anyone in the future has a similar problem and so this may be of use to them:

I decided rather having that little bit on the end of the navigation bar stretching, I'd set the left to 0 px and have it stretch across the entire page. The obvious problem with this is that it covered up all my links and other items on the navigation bar. To get around this I used z-indexing to make the new 100% bar display below under all the other divs. Pefect!

As for the vertical navigation issue, I've done a makeshift solution for this. Since there is only one page out of 200/300 that actually will suffer this problem, and that the pages are static I've just created a seperate div for that page that has the necessary length!!!

[Paul O'B]

Glad you worked something out

As for the vertical navigation issue,

You could simply use a repeating background image on the parent to imitate the column that you want as seen in this simple demo. Its not a good idea to fix the height of the column as this will not allow the site to grow.

http://www.pmob.co.uk/temp/2colblog.htm

Or if you look at the 3 col demo sticky thread there is a more complicated technique using negative margins.

http://www.pmob.co.uk/temp/2col-nofloatdrop.htm

However the background image repeat is the easiest method and the one I would reccommend.

For your top nav bar you could simply have repeated a background image on a static element and it would stretch all the way across by default.

[bowdeni]

Ok. Maybe I should look into doing my left nav bar correctly considering I'm encountering one or two more problems. I've looked at the FAQ a bit more and it has become apparent that I should be following this approach

body {
padding:0;
margin:0;
background:pink url(leftcolbg.jpg) repeat-y left top;
color: #000000;
}

How do incorporate this into my site? Am I wrong in saying that this would repeat my image all the way down the left side of my page, so that would include my navigational bar?

[Paul O'B]

HI,

That's the basics of it but there are a number of things to consider.

If your page is a full width page and the left nav is always in the same position close to the page edge then you can repeat the image on the body as shown in the code above but you must remeber not to cover it up with other backgrounds. This will give you a side column that will go on for ever and also be an initial 100% high of the viewport.

If the page is a fixed width and centred then you would apply the repeating image to the main container so that it moves with the page (unlike the body image which is static). If you want it an initial 100% height of the viewport then you need to look at my demos to see how that's done (and the faq on100% height ). Again the easiest way is just to have the nav at 100% of the main containers content and not the viewport as it is a little more complicated.

This is the image I used for the 2 column layout linked in my other post.

http://www.pmob.co.uk/temp/images/rightbg.gif

This is repeated on the main container and the main container also has a background colour which gives you the illusion of 2 columns straight away.

#outer{
 width:760px;
 background:#f2f2f2 url(images/rightbg.gif) repeat-y right top;
 color: #000000;
 margin-left:auto;
 margin-right:auto; 
 text-align:left;
 position:relative;
 border:1px solid #000;
}

If you look at the image you can see that it also has a border incorporated into it. With a little creativity you can add shading and apparent spacing and multicolumns all by manipulating the image and then floating content over the correct part of it.

Here's another example:

http://www.pmob.co.uk/temp/2colwaz.htm

This approach is so simple and as long as you keep the image a reasonable size there is hardly any overhead. Don't make the image 1px high as that will slow the page down as it will take a long time to draw. I usually have the image at about 4 or 5px high or even 10px high if its a small filesize.

[bowdeni]

Ok. I think I've followed that ok. This is now what I have:

http://www.mariokartwii.com/leftnavsituation.png

As you can see, the line continues all the way down the page (yay) but unfortunatly it also obviously appears above the navigation bar. any quick fix for this? Or do I have to create a huge white square to go over that, then z-index everything above that white square. or is this bad practise?

Thanks for your help so far.

[Paul O'B]

Hi,

You shouldn't need to add any extra elements as the elements you have above can simply have their backgrounds set to white and it will rub out the top of the nav.

Assuming you have taken my advice of course and kept everything in the flow

If you have done something strange with the header part then you can add an extra element with a white background to rub out he top of the nav but usually you would have a header area defined anyway and you just set that background to white and then place the header elements within it.

You just have to be a little creative and think ahead

[bowdeni]

body {
padding:0;
margin:0;
background: url(about_graphics/endofnav.gif) repeat-y left top;
color: #000000;
}

Is what I used. I don't actually have a white background behind the header text ('playabout'), nor around the logo. In the future, should I do this?

I'll add a big white block then and just z-index the company logo above the white block, and all the other bits n pieces!

[Paul O'B]

I don't actually have a white background behind the header text ('playabout'), nor around the logo. In the future, should I do this

Just set the background to white in the header area.

e.g.

#header{
width:xxpx;
height:xxpx;
background:#fff url(img.gif) no-repeat xxpx xxpx;
}

You must have something similar in your code. (the xxpx is of course proper dimensions and not xxpx)