2 replies [Last post]
min
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2004-02-14
Posts: 3
Points: 0

Hi. First post on forum. I've been using css for a while mainly to format contents and now attempting to start utilizing css more to layout pages - instead of tables. I've done okay with absolute positioning and separate boxes, but am stuck with my latest endeavor. I've tried searching around the forum and can't find what I'm looking for.

Basically, I want to have a menu and content section in a centered box with a shared side border and aligned top and bottom border. The code I used to do this with tables looks like this:

<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr> 
    <td><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
        <tr> 
          <td width="573" valign="top" bgcolor="#FFFFFF">
		  content area<br>
		  which may be taller<br>
		  or shorter than menu,<br>
		  but bottom borders should be aligned.
		  </td>
          <td width="184" valign="top" bgcolor="#DDDDDD">
		   menu area
            </td>
        </tr>
      </table></td>
  </tr>

</table>

Specifically, I'm having problems sharing the side border and aligning the bottom. I tried using a container and specifying a height of 100% in both the menu and body, but the container didn't grow so I had issues. Any ideas on how to tackle this or should I just continue to do this with a table? Thanks.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

shared side border and aligning top and bottom borders

Hi

This is A way of doing it that is cross-browser friendly and should give you the flexing you needed (it is rather bulky!):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- The above two lines and the meta http-equiv line below the head are critical. DO NOT DELETE them -->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="all">
/* a '* ' in front of a style means only IE sees it */

html, body {margin: 0; padding: 0; border: 0;}
body {
	margin: 0px 0px;
	font-family: verdana, arial, sans-serif;
	background-color: #FFFFFF;
	color: #000000;
	text-align: center;
}
.clear {
	clear: both;
}
.wrapper {
	margin: 0px auto auto; /* added auto to fix Navigator alignment to center*/
	text-align: left;
	width: 758px;
	background: #ADD8E6;
/* The next border is the one that goes around the outer box, and also around the separate header/footers */
	border: #000000 1px solid;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* Below is the Tan hack (http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html),
needed because the decorative side borders (thin black) on .wrapper. It fixes the box model
of IE5.x/win, making it display the same as other browsers. Note the escape slash cannot be
the first character in the name, nor can it be before a number (0-9) or the letters a-f, else
they become hex. */

* html .wrapper {
	width: 760px; 
	w\idth: 758px;
}

/* The image in the next style puts the border between the center and the right col on for Moz and Firefox */

.outer {
	border-right: #DDDDDD 184px solid;
	background: url(1pxblackline.gif) repeat-y 100% 0px;
	border-left: 0px;
}

/* These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes 
for the thin colored divider between the right col and the center col. If the colored divider
is not wanted, the BG image may be removed. The Tan hack below feeds IE a different 
BG location, due to a BG placement variation. */


* html .outer {
	background: url(1pxblackline.gif) repeat-y 573px 0px;
}
.inner {
	margin-left: -1px; /* This fixes a small overlap problem in IE6. */
	border: 1px solid black;
	width: 758px; /* This width is for non-IE browsers. Mozilla makes this necessary. */
	border-width: 0px 0px 0px 1px;
}

/* div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. Such a
shame that all this hacking is being caused by the 'mighty' Gecko engine! */

* html .inner {
	width: 100%;
}
.float-wrap {
	margin-left: 0px; /* Same length as left column width */
	width: 571px; /*this comes out 2px less than original, but otherwise center block text sits out 2 pixels into block*/
	float: left;
}
.right {
	width: 184px;
	float: right;
	position: relative; /* IE needs this or the contents won't show outside the parent container. */
}
/* IE gets this next margin. */
* html .right {
	margin: 0px -184px 0px 0px;
}
.center {
	width: 573px;
	float: right;
}

/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}
</style>
</head>
<body>
<div class="wrapper">
     <div class="outer">
		<div class="inner">
			<div class="float-wrap">
				<div class="center">
        			content area<br> 
			        which may be taller<br> 
			        or shorter than menu,<br> 
			        but bottom borders should be aligned.
				</div>
			</div>
			<div class="right">
            	menu area
			</div>
			<div class="clear"></div>
		</div>
	</div>
</div>
</body>
</html>

You will need one image too (attached), to get the line between the columns to show.

Trevor

min
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2004-02-14
Posts: 3
Points: 0

Thanks!

Thanks very much. This does exactly what I wanted - of course, I have no idea why Laughing out loud , but you've got some great explanatory comments. I'm planning to read through them all and maybe learn something. I guess browsers really don't agree on how to handle css, do they? Thanks again.