Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    nested/container alignment problems

    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

    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;
    }

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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 for some ideas...

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •