position 2 ele,ments on bottom of div

[lukeurtnowski]

In
http://sandiegosbroker.com/new.shtml
How do I correctly make the tabs div app[ear on the bottom of the containing header div (I know a way but its probably not too good.
Also, Im using niftycorners to make the header div to have rounded corners (javascript) but why it the bottom of that diuv not being rounded? (Instead its ronding just above the tabs div.
Thanksss

[RyanReese]

It's appearing rounded for me in FF/IE7/Opera .

The wrapper is appearing rounded I mean, the header (bottom part) isn't but that's because no code is there to make it rounded '
After the header div is closed you need to put the nifty corners there

[lukeurtnowski]

I dont know how the nifty corners are even generated, I just pointer the header div to the niftycorners javascript thing. That is what is confusing me on that. Why is the white line not placed at the bottom of its containing div? (header)

[Paul O'B]

Hi,

For the header you need to use the "fixed-height" setting in the js.

e.g.

<script type="text/javascript">
window.onload=function(){
Nifty("div#container");
Nifty("div#content","same-height small");
Nifty("div#footer","small");
Nifty("div#header","small fixed-height"); 

}
</script>

Then you need to clear the floated image in the header because it is upsetting the corners somehow.

This seems to fix it.

<div id="container">
    <div id="header"> <a href="/"><img src="http://sandiegosbroker.com/images/logo.png" alt="Click to return to the home page" width="250" height="28" border="0" id="logo" /></a> <img src="http://sandiegosbroker.com/images/headshot.gif" alt="George" style="float:right"/>
        <div style="clear:both;width:100&#37;"></div>
        <div id="tabs">
            <ul>
                <li id="Home"><a href="/"><span>Home</span></a></li>
                <li class="services"><a href="" class="services"><span>Services</span></a></li>
                <li class="portfolio"><a href="" class="portfolio"><span>Portfolio</span></a></li>
                <li class="contact"><a href="" class="contact"><span>Contact</span></a></li>
            </ul>
        </div>
    </div>
    <div id="content">

Of course you could make it class or perhaps neater would be to use more semantic html as inline elements shouldn't be left hanging in mid air.

e.g.

    <div id="header">
        <p class="logo"><a href="/"><img src="http://sandiegosbroker.com/images/logo.png" alt="Click to return to the home page" width="250" height="28" border="0" id="logo" /></a> <img src="http://sandiegosbroker.com/images/headshot.gif" alt="George" style="float:right"/></p>
        <div id="tabs">
            <ul>
                <li id="Home"><a href="/"><span>Home</span></a></li>
                <li class="services"><a href="" class="services"><span>Services</span></a></li>
                <li class="portfolio"><a href="" class="portfolio"><span>Portfolio</span></a></li>
                <li class="contact"><a href="" class="contact"><span>Contact</span></a></li>
            </ul>
        </div>
    </div>

p.logo {
    width:100%;
    overflow:hidden;
   margin:0;
}

[lukeurtnowski]

You did it to me again, paul