[thelist] CSS: layout question

Nik Schramm n at industriality.com
Wed Nov 20 18:29:00 CST 2002


On 21.Nov.02 01:03 Chris W. Parker wrote

> the problem with this css solution (as opposed to the table i wrote)
>  is that you can use percentages as widths (which is great) but you
> cannot also keep the boxes a fixed width apart. at least, i can't
> figure out how. i tried margin-right: 5px; and padding-right: 5px;
> but those either affect the inside of their div or the content of the
> adjacent div.

Think in boxes. In many ways CSS is all about avoiding potential conflicts,
so if something doesn't work first time, side-step it elegantly. :)

In your case, try wrapping the contents of whatever you want to assign the
5px margin to inside another div and assign the margin to that.

Sumpn like this (5px margin applied to the right side of the menu div,
while keeping the basic 25%/75% page division alive. De facto, the menu
is now 25%-5px wide.):

<!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> title me </title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			<!--
			body { padding: 0; margin: 0; }
			div { border: 1px solid black; }
			#header { height: 50px; }
			#menubox { width: 25%; float: left; }
			#menu { margin-right: 5px; }
			#content { margin-left: 25%; }
			//-->
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="menubox">
			<div id="menu">menu</div>
		</div>
		<div id="content">content</div>
	</body>
</html>

--
/nik




More information about the thelist mailing list