Table to css advice Options

[DanielC]

Hello there. I'm trying to convert my site to css as I've been reading that tables are outdated these days. I just cannot wrap my head about how this is supposed to work. Through experimenting, I have managed to replicate the look without tables for the header of the page so far, however, I don't feel that it is done as best as it should be.

Old table format:

CODE

<TABLE width="100%" cellpadding="0" cellspacing="0">
    <TR>
        <TD style="width: 230px;"><IMG src="images/logo_1.png" alt="" /></TD>
        <TD style="background-image: url('images/logo_bg_1.png');" align="center" valign="bottom">
        <DIV>
            <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="75" align="middle">
                ...
            </OBJECT>
        </DIV>
        </TD>
        <TD style="width: 224px;"><IMG src="images/logo_2.png" alt="" /></TD>
    </TR>
    <TR>
        <TD style="width: 230px;"><IMG src="images/logo_1_2.png" alt="" /></TD>
        <TD style="background-image: url('images/logo_bg_2.png');"></TD>
        <TD style="width: 224px;"><IMG src="images/logo_2_2.png" alt="" /></TD>
    </TR>
</TABLE>

New html format:

CODE

<div id="header">
    <div id="header_img1"><img src="images/logo_1.png" alt="" /></div>
    <div id="header_object">
    <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="75" align="middle">
        ...
    </OBJECT>
    </div>
    <div id="header_img2"><img src="images/logo_2.png" alt="" /></div>
</div>

And CSS:

CODE

#header
{
    width: 100%;
    height: 209px;
    min-width: 1024px;
    background-image: url('../images/logo_bg_1.png');
}

#header_img1
{
    width: 230px;
    height: 209px;
}

#header_object
{
    height: 75px;
    width: 550px;
    position: absolute;
    top: 125px;
    left: 30%;
}

#header_img2
{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 230px;
    height: 209px;
}

I am sorry for the length of the post. I also have noticed that when I resize the window of the new page, it collapses instead of maintaining it's proportions and continues to stack on top of each other. Is this because I have used position: absolute?

Any help and/or advice is greatly appreciated. Just going to keep reading until hopefully the brain starts clicking.

[pandy]

You probably don't need, or want, the absolute positioning. Resize the browser window and you can see what happens.

It would be easier if we could see the live pages.