[SOLVED] YAWDQ - Yet Another Web Design Question

General Forums Off-topic Chat
1

Here is some simple code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Aldershot Home Page</title>
<style type="text/css">
<!--
.oneColfFixCtr #headerContent {
	width:700px;
	height:25px;
	z-index:1;
	margin: 0 auto;
	border: 1px Solid #000000;
}

.oneColfFixCtr #flashContent {
	width:700px;
	height:80px;
	z-index:1;
	margin: 0 auto;
	border: 1px Solid #000000;
}

.oneColfFixCtr #navbarContent {
	width:700px;
	height:25px;
	z-index:1;
	margin: 0 auto;
	border: 1px Solid #000000;
}

.oneColfFixCtr #lContent {
	width:200px;
	height:300px;
	z-index:1;
	margin:0 auto;
	border: 1px Solid #000000;
}


-->
</style>
</head>


<body class="oneColfFixCtr">

<div id="headerContent">Header </div>
<div id="flashContent">Flash Content</div>
<div id="navbarContent">Navbar</div>
<div id="lContent">News</div>

</body>
</html>

When viewing the page, you’ll notice that the div called “lContent” is moving nicely with the others when the window is resized. I’d like it to continue to behave this way, but I need it to line up with the left side of the other divs. So it looks like a column on the left.
Does anybody know how to do this?

2 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Aldershot Home Page</title>
<style type="text/css">
<!--

#wrapper{
width: 700px;
margin: 0 auto;
}

.oneColfFixCtr #headerContent {
    height:25px;
    border: 1px Solid #000000;
}

.oneColfFixCtr #flashContent {
    height:80px;
    border: 1px Solid #000000;
}

.oneColfFixCtr #navbarContent {
    height:25px;
    border: 1px Solid #000000;
}

.oneColfFixCtr #lContent {
    width:200px;
    height:300px;
    border: 1px Solid #000000;
}


-->
</style>
</head>


<body class="oneColfFixCtr">

<div id="wrapper">
<div id="headerContent">Header </div>
<div id="flashContent">Flash Content</div>
<div id="navbarContent">Navbar</div>
<div id="lContent">News</div>
</div>
</body>
</html>

fixes:

  • you need a wrapper to line everything up
  • width of divs are 100% by default, no need to redefine the width each time
  • z-index is only processed for elements using absolute positioning (which you’re not using), so z-index: 1 doesn’t do anything.
3

Ooohhh… I see… thank you!
Still getting into this :wink:
That makes very much sense.
Thanks again.