Audra Coldiron wrote:
> Hi Everyone,
>
> I'm hoping someone out there has the insight I lack to achieve this
> certain layout. I'm not sure it's even possible.
>
> I want to do a 2 column fixed width floated layout with a header and
> clearing footer. Sounds simple enough, right? Well, I also want to
> float a photo that appears above the header in the source and clear the
> smaller column under the photo on the same side. The user has control
> of the content so if a picture isn't there I want the column to suck up
> under the menu. The problem is if I float the larger column (the main
> content), it clears below the photo. If I don't float it portions of
> the content clear below the photo. I can't change the HTML. Any
> suggestions?
>
Yeah I found IE allows the floats to move up regardless of source order
on a recent project too but it wasn't beneficial. The effect you're
after can possibly be done using the sibling selector. IE6's rendering
could be mimicked using this horrificly hackish approach:
div#site_photo + div#header + div#navbar + div#content_wrapper {
position: relative; top: -170px;}
Assuming that div#site_photo only gets written in when there's an image
the above code will pull the content column up in modern browsers. It
will look stupid when re-sizing the text though and leave a big ole gap
at the bottom.
Its a pity you can't edit the html because if you could have the content
appearing above those teasers (or even if those teasers weren't part of
the navbar) you'd be in business. From messing around there's a few
workarounds using positioning but none of them are ideal. It relies on
whether the whole div#site_photo is there or not and then positioning
the teasers div absolutely.
You could show this to modern browsers only:
/*//////////////////////////////////////////////////////////////////////
HEADER & SITE PHOTO
If you want the user not to be able to change the main photo and/or
site title, place "display: none" in the style for that element.
//////////////////////////////////////////////////////////////////////////*/
html>body div#header {
text-align: center;
float : left;
width: 550px;
}
html>body div#header h1 {
position: relative;
z-index : 12;
}
html>body div#site_photo {
float: right;
position: relative;
z-index: 20;
}
/*////////////////////////////////////////////////////////////////////////////
NAVBAR: TEASERS & MAIN MENU
///////////////////////////////////////////////////////////////////////////*/
html>body div#navbar {
float : left; width : 550px; position : relative;
}
html>body div#teasers {
position: absolute;
top: -2.4em;
right : -200px;
width: 200px;
}
/* if the div#site_photo is there then the teasers will be moved down to
make room for the image */
div#site_photo + div#header + div#navbar div#teasers { position:
absolute ; top: 210px; }
html>body div#main_menu {
position: relative;
}
/*/////////////////////////////////////////////////////////////////////////////
GENERAL CONTENT
//////////////////////////////////////////////////////////////////////////////*/
html>body div#content_wrapper {
float:left;
width: 550px;
}
div#content {
}
>
> Any help would be very appreciated!!
>
> Thanks,
>
> AC
>
Hope that helps, and like I said its a mingin solution. If you want me
to attempt to explain it better let me know.
I'd get that teasers div taken out of navbar and made separate if you can.
Rob
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
