2 replies [Last post]
medlinke
Offline
newbie
Last seen: 17 years 8 weeks ago
Joined: 2003-09-30
Posts: 4
Points: 0

Okay so here is the problem.

I have a container DIV

Inside this I have a few other DIVs

One is a banner div

Then comes the problem

I want to nest a two column layout INSIDE of the container, so that the background I've chosen will dynamically expand with it as more text is added.

Here is my css

#container {
	background-color: #B7B6B6;
	width: 750px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
#borderoutter {
	background-color: #57657A;
	width: 720px;
	position: relative;
	left: 15px;
}
#content {
	background-color: #B9AA94;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	position: relative;
	width: 650px;
	left: 35px;
}
#body {
	width: 370px;
	padding-bottom: 10px;
	left: 235px;
	top: -100px;
	position: relative;
	z-index: 2;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	color: #990000;
	font-weight: bold;
}
.maintext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: normal;
	line-height: 18px;
}
#sidebar {
	position: relative;
	width: 175px;
	top: 19px;
	left: 50px;
	z-index: 1;
}
.logoplacer {
	position: relative;
	left: 37px;
}

Unfortuntely what happens is the order in which the divs appear in the HTML is determining the order in which they are relative.

So...as the #sidebar expands (gets taller) it pushes the #body down more and more on the page to be positioned below it.

The remedy I have is clodgy and includes the user of negative values to actually align the #body DIV with the #sidebar DIV.

It seems to work, but it feels horrible because I'd have to change that value if I added anything else ot the sidebar or for some reason the sidebar needed to be changed at all!

Any suggestions on how to make this work???

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 32 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Relative Positioning in two nested columns?

Do you have the HTML as well?

The next sentence is true. The previous sentence is false. Discuss...

medlinke
Offline
newbie
Last seen: 17 years 8 weeks ago
Joined: 2003-09-30
Posts: 4
Points: 0

Relative Positioning in two nested columns?

I have been working on this, and added a few styles...however, the css posted in the original post has remained unchanged. I only added some css for ul and li plus links in li

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="universal.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
body {
	background-color: #E8E0D5;
}
-->
</style>

</head>

<body>


  <DIV id=container>

   <DIV id=borderoutter>

    <DIV id=content>
    	<img src="logoimage.jpg" width="575" height="250" class="logoplacer">
   
	 	 <DIV id=sidebar>
	 
	   <ul>
	     <li>
	       <div align="center"><a href="index.html">Home</a></div>
	     </li>
         <li>
           <div align="center"><a href="archives.html">Archives</a></div>
         </li>
	     <li>
	       <div align="center"><a href="roster.html">Boston Roster</a></div>
	     </li>
	     <li>
	       <div align="center"><a href="links.html">Sox Links</a></div>
	     </li>
	     <li>
	       <div align="center"><a href="feedback.html">Contact</a></div>
	     </li>
	     </ul>
	 
	 </DIV>
	 
	 
	 	 <DIV id=body>

	     <h1>Hello World</h1>
	     <p class="maintext">This is the text for the body section of the website.&nbsp; It should be easy to read and formatted in way that allows users to see that there is a consistent site style used throughout this website.&nbsp; The requirements for this section are that there is enough room left to the left for all of the site links that will appear here.&nbsp; Again, I think that this is really important because I don't want to have all the text just boxed up all over the place becuase it makes it a total mess to handle. </p>
	     <p class="maintext">Another quick problem is that there is no padding on the botton of this from the bottom of the container cells! The solution was to put a 25 pixel padding on the bottom of the main text area within this area, thus pushing down the bottom enough to provide good space to make this text readable!</p>

     </DIV>
	 

	

    
	</DIV>

   </DIV>

  </DIV>
</body>

</html>