Jump to content

Problem With Div Extension

Recommended Posts

The div "rightLines" is extending past the display window in the browser, which is creating an unwanted horizontal scrollbar. Based on the CSS, I can understand why this is happening, but the confusing part is that the same thing doesn't happen for "hNavigation." Why is this? What I'd like to accomplish: To have the "hNavigation" div, and the "rightLines" div to fill the remaining space (of the window) on either side of the "mainContent" div, without having to specify a specific size for both. Perhaps this would be better accomplished with tables? Any help would be appreciated. Here is the code:

<body id="theBody"><div id="mainSection">		<div id="theHeader">			<div id="headerStripes">			</div>		</div>		<div id="hNavigation">		</div>		<div id="rightLines">		</div>		<div id="mainContent">		</div>	</div></body>

/** MAIN PAGE **//*==== universal ====*/a {text-decoration: none;}img {	border-style: none;	text-decoration: none;}#theBody {margin: 0px;padding: 0px;}/*==== header ====*/ #theHeader {height: 80px;width: auto;background-image: url(header-color.png);background-repeat: repeat;position: relative;} #headerStripes {height: 75px;width: auto;background-image: url(diagonal-lines-pattern.png);}/*==== mainContent ====*/#mainSection {background-image: url(diagonal-lines-pattern.png);margin-left: auto;margin-right: auto;background-repeat: repeat;height: 100%;width: 100%;position: absolute; } #mainContent {width: 800px;height: 538px;padding-top: 32px;margin-top: -5px;margin-left: -400px;background-color: #f9e6d7;z-index: -100;position: relative;left: 50%;}#hNavigation {background-color: #000000;width: 50%;height: 564px;margin-left: -400px;float: left; }#rightLines {background-color: #000000;width: 50%;height: 564px;float: right;margin-right: -400px;}

Link to post
Share on other sites

I've taken a different approach in trying to build this webpage. I'm now trying to use tables for the main content section, because they seem easier to position to me (though it may not be the case). Using this approach I've run into some other (different) problems. The main problem: I don't seem to be able to change the z-index of the div "mainBorder" above the div "mainContent". The only other way I thought of accomplishing this was to put the div "mainBorder" outside of the table "belowHeader", center it and line it up to the div "mainContent". When I attempted to do it that way, upon resizing the window, the "mainBorder" div would move (not something I want). The way I have it set up, every time I add/put something inside of one of the cells on the left and right (vNav, rLine), the center of all the contents within the parent container will change. Is there a way of positioning the cells on the sides relative to the middle of the middle cell "mainContent"? The way I handled this problem until now, is to balance out the opposite side by inserting something of equal size. I don't know how to get around this issue. In using tables I've found that the cells within a table all have to be the same height. Is there any way around this? I was thinking I could just put a div of smaller size inside one of the cells and align it the way I wanted it. I haven't tried that yet, but I'm concerned that it would somehow effect the position of the cell it was placed in. I hope I've been at least partially clear in what I'm trying to convey. I would much appreciate any and all help. Thanks ahead of time. I will provide an image if necessary. MY CODE:

<body id="theBody"><div id="mainSection">		<div id="theHeader">			<div id="headerStripes">			</div>		</div>		<table align="center" id="belowHeader" border="0" cellspacing="0" cellpadding="0">		  <tr>			<td id="vNav"><img src="home-button.png" width="83" height="92" alt="HOME BUTTON" /></td>			<td width="800px" height="538px" id="mainContent" valign="bottom">				<div id="mainBorder">					<div id="attention">					</div>					<div id="theWhy">					</div>				</div>			</td>			<td id="rLine">				<div id="balance">				</div>			</td>		  </tr>		</table>	  	</div></body>

/** MAIN PAGE **/ /*==== universal ====*/a {	text-decoration: none;} img {	border-style: none;	text-decoration: none;} #theBody {	margin: 0px;	padding: 0px;	} /*==== header ====*/	#theHeader {	height: 80px;	width: auto;	background-image: url(header-color.png);	background-repeat: repeat;	position: relative;}  #headerStripes {	height: 75px;	width: auto;	background-image: url(diagonal-lines-pattern.png);} /*==== mainContent ====*/ #mainSection {	background-image: url(diagonal-lines-pattern.png);	background-repeat: repeat;	height: 100%;	min-height: 100%;	width: 100%;	position: absolute;} /*contentTable*/ #belowHeader {	margin-top: -5px;	padding: 0px;	border-spacing: 4px 0px;	} #mainContent {	background-color: #f9e6d7;	position: relative;	z-index: -100;	width: 800px;	min-width: 800px;	height: 538px;	min-height: 538px;} #mainBorder {	border: 4px solid #b76400;	height: 498px;	width: 792px;	z-index: 100;	position: relative;} #attention {	height: 330px;	width: 100%;	background-image: url(attention-background.png);} #theWhy {	height: 164px;	width: 100%;	border-top-width: 4px;	border-top-style: solid;	border-top-color: #b76400;	background-image: url(the-why-background.png);	background-repeat: repeat;} /*verticalNavigation*/ #vNav {	border-right-width: 4px;	border-right-style: solid;	border-right-color: #ffc900;	padding-right: 4px;	}  #rLine {	border-left-width: 4px;	border-left-style: solid;	border-left-color: #ffc900;	padding-left: 4px;} #balance {	width: 83px;	height: 100%;} 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...