100% width x 100% height stretched background content div issues

G’day all. I’m putting together a site at the moment & have struck an issue I can’t crack. I’m trying to maintain very simple & clean looking layout, but with some nice bits of functionality here & there.

So far I’ve put together a layout & sourced codes & solutions from various places. There are a couple of javascript scripts active, and a font replacement script running on the h1 tags.

Like any design/folio site, I’m trying to strike the balance between slickness & accessibility.

The code is not currently valid, which I am aiming to fix, and have hit this following problem I need to address before going any further…

The site in work is here -

http://www.forgottenflavours.com.au/DEV/Folio/FolioIndex.php

Currently I am trying to achieve a blue line stretching from the left to the right side of the page. I have tried a number of solutions, but yet to find an answer.

Setting a div at 100% with a blue background colour & a height of 6px, with margins set at 50px to match the header, pushes out beyond the ‘background’ div & creates a horizontal scroll bar.

I have tried all sorts of solutions to this simple line, but have come up empty handed.

I’m still getting a grip on the 100% stretch background code & how it’s working, so I’m thinking it’s something in there causing the trouble.

Any thoughts on this would be great.

Thanks
Coz

Bam! Legend, thanks Ralph. Been driving me up the wall. Really appreciate your time.

Is there an easy explanation as to why the 100% width with the 50px margins was pushing out beyond the page?

When validating my code ( aside from leaving out the ‘alt’ tags on my images ) I was getting called up on using my divs & classes incorrectly.

Looking at this, I’ve called out the divs, then defined them with my classes -

<div id="header_main">

<div id="align_left" class="header"><img src="layout/TF_Spacer.gif" width="237" height="80" /></div>
   
<div id="align_right" class="text_right_container">
<div id="align_right" class="menu_right"><img src="layout/TF_Contact_2.png" style="float: right" /></div>
<div id="align_right" class="text_right">email@email.com.au | Ph: 0000 000 000<br />twitter.com/twitter</div>
</div>
   
<div class="clear"></div>
<div class="divider"></div>

  
</div>
#align_left { float: left;}

#align_right { float: right; }

.header {
	width: 300px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 50px;
}



.text_right {
	width:400px;
	height:auto;
	text-align:right;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color:#0069aa;
	font-style:italic;
	padding: 0;
	line-height:21px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	float: right;
}


.text_right_container {
	width:450px;
	height:auto;
	text-align:right;
	color:#0069aa;
	padding: 0;
	line-height:21px;
	margin-top: 20px;
	margin-right: 50px;
	margin-bottom: 10px;
	margin-left: 0;
	float: right;
}

What wold be the correct way of arranging this?

I’ve been putting together sites on & off now, but really want to start getting particular about correct markup.

Thanks again for your help
Coz

Got it. Cheers Ralph.

Coz

Glad to help!

When you set a width on an element, this does not include and left/right margins/paddings/borders. Those three are added to the overall width. So your div width was 100% of the window plus 50 + 50 px.

When validating my code ( aside from leaving out the ‘alt’ tags on my images ) I was getting called up on using my divs & classes incorrectly.

From a quick glance, the main problem is that you are using ids more than once (e.g. id=“align_right”).

You can only use an id once on a page, but you can use classes over and over. IDs are really for major page elements that help structure the page and are only used once per page, like a wrapper or footer.

One way to get the line full-width would be to to this:

#header_main {
    border-bottom: 8px solid #0069aa;
}

If you don’t want it touching the sides, that easy enough too. Let us know.

Setting a div at 100% with a blue background colour & a height of 6px, with margins set at 50px to match the header, pushes out beyond the ‘background’ div & creates a horizontal scroll bar.

The mistake there is the width: 100%. Just leave that off.

Thanks again. It’s working a treat in my editor, as seen here -

but not showing up at all in Chrome or Safari. Demo here.

I’ve broken the site down just to the header. Here’s the code:

/**********************************
Master Styles
**********************************/

/* Body */
body { color: #000; background: #ffffff; font: Georgia, "Times New Roman", Times, serif, Arial, Verdana, sans-serif; }



/**********************************
Structure
**********************************/
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }


/* Header */

#header_main {
	width: 100%;
	height: 145px;
	font-size: 1em;
	text-align: left;
	color: #333;
	margin-top: 65px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding: 0px;
}



#align_left { float: left;}

#align_right { float: right; }

.header {
	width: 300px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 50px;
}



.text_right {
	width:400px;
	height:auto;
	text-align:right;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color:#0069aa;
	font-style:italic;
	padding: 0;
	line-height:21px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	float: right;
}


.text_right_container {
	width:450px;
	height:auto;
	text-align:right;
	color:#0069aa;
	padding: 0;
	line-height:21px;
	margin-top: 20px;
	margin-right: 50px;
	margin-bottom: 10px;
	margin-left: 0;
	float: right;
}





.divider {
	border-bottom: 4px solid ##0069aa;
	margin-top: 10px;
	margin-right: 50px;
	margin-bottom: 0;
	margin-left: 50px;
}


.clear {
clear: both; 
}

<div id="header_main">

<div id="align_left" class="header"><img src="layout/TF_Spacer.gif" width="237" height="80" /></div>
   
<div id="align_right" class="text_right_container">
<div id="align_right" class="menu_right"><img src="layout/TF_Contact_2.png" style="float: right" /></div>
<div id="align_right" class="text_right">email@email.com.au | Ph: 0000 000 000<br />twitter.com/twitter</div>
</div>
   
<div class="clear"></div>
<div class="divider"></div>

  
</div>

Thanks for the help on this so far.
Cheers
Coz

It’s just a typo:

border-bottom: 4px solid ##0069aa;

Remove one of those hashes (#). :wink:

Thanks Ralph, not quite there though.

Yes, I need the line to be set away from the edges of the browser ( both left & right sides ) by 50px. So the border option won’t work.

It also needs to maintain this 50px margin when the browser is resized. That’s why I was thinking the 100% was needed.

Regards
Coz

No. Divs will expand to 100% width anyhow, but will account for the 50px each side as long as you don’t specify a width. So:

<div class="divider">

</div>
.divider {
    border-bottom: 6px solid ##0069aa;
    margin: 0 50px;
}

That should do it.