It's not a secret anymore!
The moose likes HTML, CSS and JavaScript and the fly likes Revisiting DIV Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Revisiting DIV" Watch "Revisiting DIV" New topic

Revisiting DIV

Winston Smith
Ranch Hand

Joined: Jun 06, 2003
Posts: 136
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.


for (int i = today; i < endOfTime; i++) { code(); }
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
I have done something like that before, but I never testing it in other then IE, but it "should" work....LOL
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63866

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]
I agree. Here's the link:
subject: Revisiting DIV
jQuery in Action, 3rd edition