divs won't layer / overlap

Cannot get my divs to overlap in a sequential manner. Tried setting z-indexes to no avail. Everything just stays in this bloody vertical line.

<!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">
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="Peter J. Farrell IV is a music producer and professional musician with over 13 years of experience." />

Full-width footer overlapping content div text.

Hi, I'm doing a new site layout, and I was using Lorem ipsum to preview the width of the layout, when I realized that the footer seems to appear at a fixed height. It won't move no matter what I try, despite the fact that my content div text should make it lower.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<title>simple document</title>

Center a div inside another div

Well, right to the point, I've tried to center a div inside another div. I don't have the code with me now, but I'll try to make it as clear as possible.
I have a header, something like this:

#header {
  position: absolute;
  display: block;
  top: 10px;
  height: 30px;
  width: 800px;
  left: 50%;
  margin-left: -400px;

It works fine. Now I just want to add buttons to this block, something like:

.button {
  top: 5px;
  height: 20px;
  width: 40px;
  anything else that helps me centering it;

Then I can do:

DIV width should be 100% of container

Hey all,

How do you get a div's width to be 100% of it's container, without hard coding the containers width?

Basically, it seems silly that 100% width is based off of screen width.

After you get 4 or 5 levels deep in divs, you don't want a percent of the screen width, you want a percent of the parent container.

So if you use divs you have to define widths for every parent container?


BTW: I know you can use offsetWidth of the parent in JavaScript, but setting all the widths in JavaScript gets a little tricky because you have to reset various contains.

List item elements overlapping floated left div


I am having problems with a floated left div, which contains an image and a caption. The floated left div is overlapped by an unordered list that appears to its right. Normal paragraph text correctly moves around the floated element but the list items do not.

A working example of what I mean can be found at: http://www.abstractproductions.com.au/about-us.php

The CSS I am using the float the image and caption is:

div.photo_left {
	float: left;
	margin: 0 10px 10px 0;
	padding: 5px;
	border: 1px solid #000;
	background-color: #333;

Syndicate content