Cannot get Body border to wrap all columns

hp1 · December 12, 2006

Hello all,First Apologies for the new post, I have had a good scan through the forum but come across my specific issue. Secondly, i cant belive the patience you experts have with newbies like me!Ok so i'm dabbling withh CSS and my 'first' website. I'm trying to go for the classic three column layout. I used a basic template (as you'll see from the comments in the CSS) and have been hacking it to get it to look how I want. My problem is as I describe above.If I activate the Body border in the style sheet, it only wraps the central content column (down the page) and ignores the left and right columns meaning the left and right columns are left sticking over the bottom border which obviously looks rubbish. This is ok if the central column has more vertical content in it than the other two but it doesn't always and I also want to understand why this is happening. I'm not sure of the etiquette in pasting code so i'm just going to paste it in its entirety (its not that big) and hopefully one of you experts can let me know what i need to do get the full wrap! Incidentally, if I add a wrapper <div> the same thing happens.OK so CSS is:

body {	border:1px solid white;	color:#EDEDED;	background-color:black;	margin:10px 100px;	padding:0px;	font:11px verdana, arial, helvetica, sans-serif;	}h1 {	margin:0px 0px 15px 0px;	padding:0px;	font-size:28px;	font-weight:900;	color:#ccc;	}h2 {	font:bold 12px/14px verdana, arial, helvetica, sans-serif;	margin:0px 0px 5px 0px;	padding:0px;	}p {	font:11px/20px verdana, arial, helvetica, sans-serif;	margin:0px 0px 16px 0px;	padding:0px;	}a {	color:#09c;	font-size:11px;	font-family:verdana, arial, helvetica, sans-serif;	font-weight:600;	text-decoration:none;	}a:link {color:#104E8B;}a:visited {color:#00B2EE;}a:hover {background-color:#eee;} 		/* All the content boxes belong to the content class. */.content {	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */	width:auto;		min-width:120px;	margin:0px 210px 20px 170px;	border:1px solid white;	background-color:black;	padding:10px;	z-index:; /* should be set to 3  - This allows the content to overlap the right menu in narrow windows in good browsers. */	}#navAlpha {	color:white;	width:150px;	position:absolute;	top:85px;	left:100px;	border:1px solid white;	background-color:black;	padding:10px;	z-index:2;/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. See http://glish.com/css/hacks.asp for details. */	voice-family: "\"}\"";	voice-family:inherit;	width:128px;	}/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct length values to user agents that exhibit the parsing error exploited above yet get the CSS box model right and understand the CSS2 parent-child selector. ALWAYS includea "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */body>#navAlpha {width:128px;}		#navBeta {	position:absolute;	width:190px;	top:82px;	right:100px;	border:1px dashed white;	background-color:black;	padding:10px;	z-index:1;/* Again, the ugly brilliant hack. */	voice-family: "\"}\"";	voice-family:inherit;	width:168px;	}/* Again, "be nice to Opera 5". */body>#navBeta {width:168px;}  #header {		color:white;	margin:10px 0px 10px 0px;	padding:10px 0px 0px 20px;	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */	height:33px; /* 14px + 17px + 2px = 33px */	border-style:solid;	border-color:black;	border-width:1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */	/*line-height:11px;*/	background-color:white;	}

And HTML for index page is:

<html><!-- Created on: 01/12/2006 --><head> <link rel="stylesheet" href="Threecolumns.css" type="text/css" media="screen" /></head>														<body>	<div id="header">	</div>	<div id="navAlpha"><h2 align=center> Links </h2>   	</div> 		 	<div class="content"> 	 HOme Page content in here.......	</div> 	<div id="navBeta">	</div></body></html>

The navalpha div has a javascript menu in it as well but I removed it to keep the space down. I hope this enough to go on and that I have explained myself properly. Many ThanksHP

real_illusions · December 13, 2006

i shouldn't worry about version 5 hacks for opera or ie, as i dont think anyone uses them anymore. Opera is upto version 9, if not 10, and ie is still rubbish even after 7 attempts.The align attribute in yohr <h2> tag can be done in cssh2{text-align:center;}or, if you want it for that particular div,it'll be#NavAlpha h2{text-align:center;}those are some minor issues i can point out...but since its late, i'll have more time to look into your 3 coloumn problem tomorow.but, as a guide, in a 3 coloumned layour i did, i used absolute positioning for all 3 coloumns. the left and center positioned from the left, and the right positioned from the right. the left has a fixed width, and the other 2 use percentages.hope that helps:)

hp1 · December 13, 2006

i shouldn't worry about version 5 hacks for opera or ie, as i dont think anyone uses them anymore. Opera is upto version 9, if not 10, and ie is still rubbish even after 7 attempts.The align attribute in yohr <h2> tag can be done in cssh2{text-align:center;}or, if you want it for that particular div,it'll be#NavAlpha h2{text-align:center;}those are some minor issues i can point out...but since its late, i'll have more time to look into your 3 coloumn problem tomorow.but, as a guide, in a 3 coloumned layour i did, i used absolute positioning for all 3 coloumns. the left and center positioned from the left, and the right positioned from the right. the left has a fixed width, and the other 2 use percentages.hope that helps:)

Hey thanks for the quick reply. Yeah I wasn't sure about those hacks, they make the CSS really messy. I'll whip them out tonight. Thanks for the advice on the positioning, another newbie question, when you say use percetages, what is it a percentage of? Screen width, body width? Look forward to seeing if you can solve my border issue.HP

jlhaslip · December 13, 2006

screen width. So you need to recognize the variation in the screens that could be used. If it looks okay at 1280 wide, it might look goofy at 800px wide. Test the page at different Display settings and using different Browsers, too.

hp1 · December 14, 2006

Been scouring the forum for similar problem from other newbies. Is this a similar thing to the problem solved using 'faux' columns, i.e columns only stretching to fitthe content.If I add a background-image to the central columns css that is about the size of a screen (vertically) would that stretch the border to the bottom i.e. does that count as content?

Sign In

Cannot get Body border to wrap all columns

Recommended Posts

hp1

Link to comment

Share on other sites

real_illusions

Link to comment

Share on other sites

hp1

Link to comment

Share on other sites

jlhaslip

Link to comment

Share on other sites

hp1

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity