CSS: Two Component Full-Width Banner

CoderMan · 01-15-2010, 05:38 PM

I'm trying to set up a simple title banner for my web pages, using HTML and CSS, but I can't quite seem to get what I want. Here is the closest I have been able to get so far: (And I'd prefer to avoid using a table if it can be done.)

Code:

<style>
a img {
  border-style: none;
}

div#rcdp_thin_banner {
  width: 100%;
}

div#rcdp_black_bar {
  width:	100%;
  background-color: #000000;
  display: inline;
}
</style>

<div id="rcdp_thin_banner">
  <a href="http://www.arsc.edu">
    <img src="/img/arsc_acronym_4color.gif" alt="Arctic Region Supercomputing Center" />
  </a>
  <div id="rcdp_black_bar">
    <img src="/img/rcdp_thin_banner.png" />
  </div>
</div>

What I want is for a thin banner to stretch across the entire width of the page. The left image (the gif) is a small squarish icon. The right image (the png) is a black image with white lettering inside. I need to portray the illusion that the png stretches all the way to the right side of the screen, which I why I made the second div have a black background.

Problem is that the black does not stretch all the way to the right side of screen. If I turn off "inline" on the second div, the black does stretch out like it should, but then the second div drops below the first icon, instead of being next to it.

neonsignal · 01-16-2010, 01:13 AM

Perhaps it is the outer div that should have the black background? (I'm assuming you want the two images inline and to the left). Then you don't even need an inner div (or you can have two inner divs, and float them where you want them).