Cascading Stylesheets Problem

[TnT]

I have a block that is floating centered in the browser. Inside that block there are other blocks. The problem is that I can't get the blocks to stack.

So it looks like this:

 __
| X |
| X |
 ----

But I want the inner blocks (X's) to be on top of each other instead. Since the main window is floating I can't do absolute position because it keeps placing the inner blocks outside of the main block.

Here's the stylesheet:

div.body {display: block; float: right;
    top: 0px; left: 105px; width: 570px; height: 330px;
    border-style: solid; border-color: red; border-width: 1px;}
                
div.maindisplay {display: block; float: left;
    top: 0px; left: 0px; width: 569px; height: 329px;
    border-style: dashed; border-color: yellow; border-width: 1px;
    visibility: hidden;}

HTML:

<div class="body">
        <div class="maindisplay" id="headquarters">
        Pacific Northwest SAL Division
    </div>
                
    <div class="maindisplay" id="travelChoice">
        Willamette-Puget Trough<br />
        Great Basin<br />
        Coast Range<br />
        Cascade Mountains<br />
    </div>
                
    <div class="maindisplay" id="mugshots">
        <i>Sceloporus occidentalis</i> | 
        <i>Pitouphis catenifer</i> | 
        <i>Taricha granulosa</i>
    </div>
</div> 

[dbdg]

Rather the using DIVs for the second two it would work if you had a two row table, just enter the data into the cells and apply the css style to the td's.

Not ideal if you don't want any tables but it will always work.

Still use a few tables on my site as sometimes it is just tha best way of displaying the data.

[az]

div.iehack {text-align:center;}

div.content {position: relative; display: block; text-align:left;
	width: 570px; height: 330px;
	top: 20px; bottom: 20px; margin-left: auto; margin-right: auto;
	border-style: solid; border-color: red; border-width: 1px;}
                
div.maindisplay {width: 568px;
    border-style: dashed; border-color: yellow; border-width: 1px;
    }

<div class="iehack">
    <div class="content">
    
        <div class="maindisplay" id="headquarters">
                Pacific Northwest SAL Division
        </div>

        <div class="maindisplay" id="travelChoice">
            Willamette-Puget Trough
            Great Basin
            Coast Range
            Cascade Mountains
        </div>

        <div class="maindisplay" id="mugshots">
            <i>Sceloporus occidentalis</i> | 
            <i>Pitouphis catenifer</i> | 
            <i>Taricha granulosa</i>
        </div>

    </div>
</div> 

AZ

[EDIT: Discovered that my first version wasn't working in stupid ie. now it does. text align now also fixed. stupid, buggy ie.]

[az]

So, did it work?

Will you show us your website when it's finished? (or before )

AZ

[TnT]

Oh yeah, forgot to reply. I actually made some changes that put some other things around that stuff, so I had to change my code a bit and yours didn't fit anymore.

I'll definitely let you know when it's done. It's part of a PHP web game I'm doing for a herpatology class. I have to turn it in this Friday, but I'm hoping that it turns out well enough that I can continue to improve/expand it for research credit or something.

Thanks for the help.

[TnT]

Here's what I turned in for class:

http://www.cs.uoregon.edu/~tnguyen/index.php

You'll need cookies enabled for the site since I use PHP sessions. Webserver might be down though.

It's pretty lame now, since I only had a couple weeks to do it w/o weekends and going to class all day. I plan to make real characters and get my artist friends to draw me up some nice scenery. Beats writing a paper, which most others in the class decided to do.

The quotations around "R" (for reptiles) is an inside joke. If you look at a phylogenetic tree and group snakes, lizards, turtles and such in a single grouping than you'd have to include mammals and birds for it to be monophyletic. So my teacher says "reptiles" to mean what people think it means.