book review grid polymorphism advertise on coderanch thread boost granny
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
building better world book thread boost book review grid meaningless drivel advertise on coderanch
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Paul Clapham
  • Bear Bibeault
  • Jeanne Boyarsky
Sheriffs:
  • Ron McLeod
  • Tim Cooke
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Jj Roberts
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • salvin francis
  • Scott Selikoff
  • fred rosenberger

Revisiting DIV

 
Winston Smith
Ranch Hand
Posts: 136
posted 16 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
6
posted 16 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have done something like that before, but I never testing it in other then IE, but it "should" work....LOL
Eric
 
Bear Bibeault
Marshal
Posts: 67463
173
I like...
Mac Mac OS X IntelliJ IDE jQuery Java
posted 16 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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]

 
wood burning stoves
reply
reply
    Bookmark Topic Watch Topic
  • New Topic
Boost this thread!
Similar Threads
More...