...

View Full Version : nested/container alignment problems



obvtech
01-20-2005, 12:12 AM
I'm trying to create a CSS container which contains other boxes nested within it. I've run through the html and css validation and everything checks out under strict. I've added the doctype "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">" as explained in other threads.

It's probably something I'm doing wrong, so any help would be appreciated. What I'm trying to get, is the container box to hold all child boxes within it, and expand as they do. However, it so far only expands with the left box. Here's the link, and I've added the gold coloring so you're able to see what's happening more clearly. http://isa.obviousonline.com/newsite/index.htm. I've also removed all formatting and padding to ensure that wasn't the problem.

Here's the offending code :)


#body
{
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background-color:#ffffff;
}
#contain
{
position:relative;
left:0px;
top:0px;
width:780px;
background:#ffcc33;
border:1px solid #000;
}
#top
{
position:relative;
left:0px;
top:0px;
width:780px;
background:#ffcc33;
border:0px solid #000;
}
#menu
{
position: relative;
left:0px;
top:0px;
width:780px;
background:#245894;
border:0px solid #000;
}
#left
{
position:relative;
left:0px;
top:0px;
width:200px;
background:#ffffff;
border:0px solid #000;
}
#middle
{
position: absolute;
left:215px;
top:113px;
width:350px;
background:#ffffff;
padding:0px;
border:0px solid #000;
}
#right
{
position: absolute;
left:580px;
top:113px;
width:200px;
background:#ffffff;
border:0px solid #000;
}

rmedek
01-20-2005, 12:27 AM
You're using absolute positioning, which takes the elements out of flow. So they're no longer contained in their container.

If you want everything to expand and flow around, you'll have to use relative positioning, or float things where you want them to go, then clear them appropriately.

CSS designs that copycat table designs are best implemented using graphic tricks to emulate them (in my opinion). Check out this article on A List Apart (http://alistapart.com/articles/fauxcolumns/) for some ideas...

obvtech
01-20-2005, 12:48 AM
I've tried relatively placing the boxes, however it tends to step the boxes from top left to bottom right. I'll change my code to reflect that and it should show up next time you refresh the site http://isa.obviousonline.com/newsite/index.htm. Granted everything is now encased within the container, however it's still not what I'd expect.

rmedek
01-20-2005, 10:14 AM
Here you go:

http://www.pixy.cz/blogg/clanky/css-3col-layout/

A nice three column tutorial I found on Google for you. I'm not sure if you were going for a three-column (your first example had three) or if you were looking to position any number of boxes absolutely within the larger container, but it might help.

obvtech
01-20-2005, 05:32 PM
Thanks for your help. I'll take a look at the tutorial and also prepare to scrap the 3 column for a 2 column idea instead if that doesn't work. One of the reasons I'm trying to implement CSS more is to avoid the jerry rigging to get things looking right.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum