We help IT Professionals succeed at work.

CSS style definition that makes a nested div align with the bottom of its parent and creates list.

338 Views
Last Modified: 2008-02-01
I have a #div named "footer1" directly inside #container. Right now I have it aligned with the bottom of container by specifying margin-top: 418px; how do I write that so that it aligns with the bottom of #container.
Also, how do I make the text in "titles" appear as a bulleted list?

Thanks!
John
HTML CODE:
<div id="container">
	<div id="mainBlock">Today is Sunday, December 16, 2007
		<div id="Block2">This is Block2 inside of which is "titles"
			<div id="titles">
			  <p>This is the title box:Title1 <br />
		        Title2 <br />
	          Title3 </p>
		  </div> 	<!-- end titles -->
		</div> 	<!-- end "Block2" -->
	</div> 	<!-- end "mainBlock" -->
	
	<div id="footer1">
	This is footer1 
	</div> 	<!-- end "footer1" -->
</div>
 
CSS CODE:
#container {
	margin: 0 0 0 80px;
	position: relative;
	background-color: #000000;
	width: 792px;
	height: 418px;
	background-image: url(dreamGirl2.jpg);
	background-repeat: no-repeat;
	font-family: "Arial Black";
	font-size: 14px;
	}
#mainBlock{
	clear:both;
	margin: 10px 0px 0px 20px;
	width: 540px;
	float: left;
	color: #FFFFFF;
	}
#Block2 {
	min-width: 470px;
	height: 200px;
	font-family: "Brush Script MT";
	font-size: 20px;
	margin-left: 20px;
	line-height: normal;
	}
#titles{
	clear:both;
	margin: 0 0 0 20;
	width: 160px;
	float: left;
	font-family: "Gill Sans MT";
	font-size: 12px;
	line-height: normal;
	list-style-type: square;
	list-style-position: inside;
	}
#footer1 {
	background-color: #FF9999;
	font-family: "Monotype Corsiva";
	font-size: 18px;
	text-align: center;
	margin-top: 418px;
}

Open in new window

Comment
Watch Question

Commented:
you cannot align it with bottom of the container - you have to fill in the space between the element and the elements above it or use position:absolute.
to make bullets:

add
      #titles p{
            display: list-item;
      }
to your css and change titles to

              <p>This is the title box:Title1 </p>
              <p>Title2 </p>
                <p>Title3 </p>
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
John CarneyReliability Business Tools Analyst II

Author

Commented:
The two codes work great to produce the list with buttons, but for some reason ,while #container shows up in the CSS doc, it doesn't show up in the Design Panel in Dreamweaver, nor of course does it show up in the Design view of the html. ???    If we can fix that, I'll be in great shape.

Thanks,

John
What version of DreamWeaver do you use?  I'm using CS3 and it show up both in the CSS Panel and in Design View.  I just created a new page and copied the code directly from this page and everything showed up as expected.
John CarneyReliability Business Tools Analyst II

Author

Commented:
AhH  ... I'm using DreamweaverMX2004.  Is it time for an upgrade?
Well... I'm not sure, maybe someone else knows of something missing in the CSS rule to allow for this to show up in design view in MX2004... I have no way of testing it here.  CS3 does give you a lot more control of CSS rules however and for that reason alone, it might be time for an upgrade.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.