Jump to content

Expanding Div Width Beyond Window


Antonius
 Share

Recommended Posts

I wanted a header and footer that would have a width expanding the browser window size. My mainwrap has a set width of 1024px while my header and footer are a 100%. When I shrink the browser window width smaller than my 1024px, I get a horizontal scroll bar which I expected. However, when I scroll to the right, my header and footer are cut-off and expand only to the browser window size. I tried min and max width but no change. The padding causes the horizontal scroll bar to show up at all times, which I don't want. How do I get the header and footer width to expand beyond the browser window horizonally with my mainwrap? ISSUE EXAMPLE:~~~~~~~~~~~~~~| <---- HEADER ----|............|| <--------- mainwarp --------> || <---- FOOTER ----|............|~~~~~~~~~~~~~~ XHTML CODE:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>	<title>Divison of Testing</title>	<style type="text/css">	/* Tags */		html		{			font-family: verdana, arial, helvetica, sans-serif;			background-color: #eeeeee;			height: 100%;		}		body		{			margin: auto;			height: 100%;		}		div		{			font-family: verdana, arial, helvetica, sans-serif;			margin-top: 5px;			margin-bottom: 5px;		}		p		{			font-family: verdana, arial, helvetica, sans-serif;			color: black;		}		h1		{			color: black;		}	/* IDentifiers */		#headwrap		{			/* centers the contents of the division in the browser window */			width: auto;			margin: 0 auto;		}	  		#mainwrap		{			width: 1024px; /* keeps the floating divisions from stacking if the browser window is too small */			margin: 0 auto; /* centers the contents of the division in the browser window */			min-height: 100%; /* pushes the footer to the bottom of browser window regardless of size */			margin-bottom: -60px; /* removes vertical scrollbar due to min-height */		}		#footwrap		{			/* centers the contents of the division in the browser window */			width: auto;			margin: 0 auto;		}		#header		{			background-color: #ffffff; /* background-image: img.png goes here */			background-repeat: repeat-x;			height: 144px; /* matches image background height */			min-width: 100%; /* spans the repeating image or background to the browser window width */			top: 0;			margin-top: 0;			float: left;			b		}		#blockleft		{			background-color: #cccccc;			float: left;			width: 100px;			visibility: visible; /* hide if you do not add content but want a block margin */		}		#blockright		{			background-color: #cccccc;			float: right;			width: 100px;			visibility: visible; /* hide if you do not add content but want a block margin */		}		#maincontent		{			font-family: verdana, arial, helvetica, sans-serif;			float: left;			background-color: #ffffff;			border-right: solid;			border-right-color: #cccccc;			border-bottom: solid;			border-bottom-color: #cccccc;			margin-left: 10px;			margin-right: 10px;		}		#footer		{			background-color: #ffffff;			min-width: 100%; /* spans the repeating image or background to the browser window width */			bottom: 0;			margin-bottom: 0;			float: left;		}	/* Classes */		.cleardiv		{			/* clears floating on all sides for divisions with this class (used to keep header and footer wrap divs from overlapping mainwrap when horizontal browser window size is too small) */			clear: both;		}	</style></head><body>	<div id="headwrap">		<div id="header"><h1>HEADER CONTENT</h1></div>	</div>	<div id="mainwrap">		<div class="cleardiv"></div>		<div id="blockleft"><p>LEFT'S BLOCK CONTENT</p></div>		<div id="maincontent"><p>MAIN BLOCK CONTENT</p></div>		<div id="blockright"><p>RIGHT'S BLOCK CONTENT</p></div>		<div class="cleardiv"></div>	</div>	<div id="footwrap">		<div id="footer"><p>FOOTER CONTENT</p></div>	</div></body></html>

Edited by Antonius
Link to comment
Share on other sites

Yes, and when I shrink the browser window, the header and footer are still cut-off when I scroll to the right; that is when the window is smaller then 1024px. Also, when I add min-width: 1024px to my #mainwrap, it causes the divisions to not along into the center of the window.

Link to comment
Share on other sites

OMG, you are awesome! The layout works in any size window now! Another example of the simplest solution is always the best solution. Thanks again everyone for the help!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...