Hi All, I'm creating a banner which spans the width of the page, and I have two images to include in this banner: flag.gif, and logo.gif. I'm aligning flag.gif on the left, and logo.gif on the right. Now, if I were using TABLES, I would do something like:
So, I'm trying to model this banner with DIVs, and I'm not sure I'm doing it the best way:
Here is my CSS (*NOTE: I'm just getting my feet wet here with CSS, so don't laugh!):
The titlebar is simply a solid bar which runs along the bottom of the banner. Initially, I tried to nest the "rightBanner" DIV inside the "banner", but IE didn't like this -- it set the "rightBanner" width to 100%, but instead of starting at the left margin, it started the DIV at the end of the first <IMG>, so naturally the "rightBanner" ended up trailing off the right side of the page. I don't know if I'm making sense, but any guidance on DIV layouts will be greatly appreciated.
Thanks, WS
for (int i = today; i < endOfTime; i++) { code(); }
Eric Pascarello
author
Rancher
Joined: Nov 08, 2001
Posts: 15357
6
posted
0
I have done something like that before, but I never testing it in other then IE, but it "should" work....LOL Eric
There are some cross-browser oddities. Under IE, the 'holder' div's height expands to that of the floated elements. Under Gecko browsers and Safari, the holder div has zero height. Specifying a specific height on the 'holder' (pain in the butt if you don't know what it should be) seems to make things play nicer. An alternative approach, which seems to have fewer cross-browser differences follows:
In this example, if you leave the height off the 'container', all the browser render it zero-height. Other than that, it behaves pretty much like Eric's rendition and still requires a height rule to prevent items following the container div from overlaying the positioned elements. [ April 07, 2004: Message edited by: Bear Bibeault ]
0
