This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
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


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Revisiting DIV" Watch "Revisiting DIV" New topic
Author

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.

Thanks,
WS


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

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

Joined: Jan 10, 2002
Posts: 60810
    
  65

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] [Bear's FrontMan] [About Bear] [Books by Bear]
 
 
subject: Revisiting DIV
 
Similar Threads
center a div inside a div
Problem using divs.
Problem hiding div within div
jQuery not working on page
Using DIVs instead of Table