6

Possible Duplicate:
100% width bg images not extending on horizontal scroll

I have been struggling with this issue for quite a while. I am building a very basic web application for travel agents, but to give some lay-out we've decided to have a banner with 2 colored sub-banners. The issue is that if I have a resolution of say 1366x768 (px). The banner will naturally fit to the screen resolution if the CSS is correct. This is indeed the case and the 2 colored banners fill up until 1366px.

There is; however a table that is larger than the screen resolution, so once I scroll to the right, I see that my colored sub-banners don't continue at all and are just plain white. Is there any way to make the colored banners continue even after the edge of the screen?

I have included the HTML and CSS code for you:

HTML

<div class="banner">
  <span>- ETTA (Electronic Transactions for Travel Agents)</span>

  <div class="orangeBanner" />
  <div class="blueBanner" />
</div>

CSS

.banner img {
    vertical-align: middle;
}

.banner span {
    font-size: 30px;
}

.banner .orangeBanner {
    height: 30px;
    width: 100%;
    line-height: 30px;
    padding-left: 8px;

    font-variant: small-caps;
    background-color: #f18b02;
}

.banner .blueBanner {
    /*Layout*/
    display:inline-block;
    height: 30px;
    width: 100%;
    line-height: 30px;
    padding-left: 8px;
    margin-bottom: 5px;

    /*Style*/
    font-variant:small-caps;
    color: #ABD5DF;
    background-color: #009DE0;
}

Thanks a lot for your help!

Best regards

Community
  • 1
  • 1
Herazio
  • 73
  • 3
  • I'm just guessing but it's worth a look. I think your table is overflowing one of it's parent tags which has css `width:100%` on them. I've ran into a similar situation once and found that a table wider than 100% doesn't automatically make the parent tag wider than the viewport if you have specified them to be 100% wide. The problem is most likely not in the code that you provided. If you'd like me to have a better look, please add the parent elements and css up to the html tag. – Bazzz Dec 20 '12 at 12:02
  • 1
    Don't know if its related as you didn't provide enough code, but `
    ` acts as `
    ` so they aren't closing as you think they are
     – Andy Dec 20 '12 at 12:07
  • Can you show an image of what you are trying to achieve? – James South Dec 20 '12 at 12:52

2 Answers2

0

As Andy said, <div> elements are not self closing so you should add closing tags to them properly.

If overflowing tables is a problem, just setting a max width should fix that.

e.g

table {
    max-width: 100%;
}
James South
  • 10,147
  • 4
  • 59
  • 115
0

The comments you got has some really useful information. Another quick fix would be the following, making <div class="banner"> always take up 100% of the width and not scroll left and right.

.banner  {
    width:100%;
    position:fixed;
    left:0;
}

It might however mess up some relatively positioned elements.

Robert Fricke
  • 3,637
  • 21
  • 34