CSS, Absolute Positioning and 100% width?

[johnlivi44]

I'm a real newbie in the CSS arena, but I am trying to get a handle on it and use it for a site I'm doing. I am struggling with positioning certain elements on the page. The elements are graphics used for the page header (and a table that is used for laying out some icons - I know, bad form).

Anyway, I have a couple small graphics that are repeated (as a background image) to create some horizontal borders/lines (or a bevel effect). This works fine to create the visual effect, and the positioning is putting the left side of the borders/lines where they should be - but because I want it to have a width of 100% (so that it fills to the right edge of the window), I am having problems.

This is because I am using the absolute positioning to place these at various points on the page, and if it is not positioned at "left:0;", it takes the 100% and fills whatever my position was to the right of the window edge. For example, if I positioned one of the borders with top:0; left: 8px; width: 100%; then it fills all the way to the right, and then an additional 8px.

I know I must be doing something very wrong and it's probably very simple to do right, but I am not sure how to do it right and thought you all might help. Attached is a piece of the code that is the problem, and here is the link to the page with the problem.

http://www.justesenjournal.org

This particular code is for the top bevel at the very top of the page - it is shifted left 8px because there is a corner image to create the bevel effect in the top left corner. The same error you can see with the red colored area and it's borders - the same method was used to create that area - thus the same lame mistake has been made.

.headerTopBar {
	position: absolute; 
	top: 0px;
	left:8px;
	background-image: url("../images/header_top_bevel_grey.jpg");
	height: 15px;
	width:100%;
	z-index:1;
}

Thanks in advance for your help with this and please excuse my ignorance - I hope you can help. If you need more information please let me know.

 

[johnlivi44]

I hate to follow-up so soon, but has anyone got any ideas? I was hoping someone might point me in the right direction so I could try and tackle it again tonight.

Again, any help you can offer would be much appreciated.

 

[Vragabond]

Divs by default have width set to 100%. If you do not specify other width, that is what they will have. Using [tt]left[/tt] property will move them desired pixels to the left but the box will remain 100%, so it will hang over like you found out yourself. However, if you use [tt]margin-left[/tt] this will not happen because margin is part of the element and the element's width will shrink by the margin specified and occupy the remaining space.

About using absolute positioning, please read comments on it by Chris Hunt and me in this thread.

 

[johnlivi44]

Thanks for the information. I will try that out and see if I have any luch correcting the problem.