divs won't layer / overlap

Submitted by pfarrelliv on Fri, 2010-09-03 03:52

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.
Help?

<!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>
	<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.

Submitted by Hecatologue on Thu, 2010-08-26 02:52

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<html>
<head>
<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

Submitted by Petrini on Tue, 2010-08-10 13:37

Hello!
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

Submitted by caalip on Wed, 2010-07-28 15:25

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?

Grae

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

Submitted by JoshuaSpence on Thu, 2010-07-08 23:11

Hi,

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