Revisiting DIV

Ranch Hand

Posts: 136

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 15385

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have done something like that before, but I never testing it in other then IE, but it "should" work....LOL
Eric

Bear Bibeault

Sheriff

Posts: 67645

173

I like...

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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 ]

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Consider Paul's rocket mass heater.