Why horizontal scrollbar?

You think your html and css looking good and then you notice – a horizontal scrollbar when the site should not need to scroll!

Reasons for a scrollbar

They all come down to the same thing – the browser thinks it needs a bit more space…… Some situations that may trigger this perception or actual need:

  • 100% width, plus some padding makes it more than 100%!
  • 100% width, plus Italics : IE has to make it just that bit wider for the italics, perhaps forcing a horizontal scrollbar.
  • <pre> preformatted code that is wider than it’s containing element.

Using overflow just hides the problem

A number of sites will advise using the overflow property to get rid of it. That may well bandaid it and admittedly it is a quick fix.

Making a set of nested div’s clickable like a link or href element

The need: make a set of nested div’s clickable, like one big image

The Auto CSS Layout generator has preview pages. In these we wanted the real html templates and the real tableless CSS required for each particular layout to be used, rather than screen dumps. this seemed like a more ethical approach and also allowed one to “test” all the layouts in one go. We also wanted the user to be able to “click’ on the preview to choose the layout style, just like a normal link.

The problem: Link elements are empty

However we had no images to use and a link element is by definition empty – it may not contain div’s – let alone a set of nested divs.

The problem2: No content

In a multi layout situation, we did not want the screen to be too busy, so we did not want superfluous “content” for our clickable links.

The answer: Clickable space links that are displayed as blocks

Since some “content” is needed to make sure that the div’s do not collapse, we use the old space ” ” – in each div that needed content. We made each space a link to the same “chosen layout” page. In the CSS we then made the links in the nested div’s display as block elements and that seemed to do the trick!


div.container a {display: block; text-decoration: none;}


<div class="container">
  <div class="header">
       <a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
        title="The header or branding div" >     </a>
  <div class="wrapper">
    <div class="content">
      <a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
      title="The content div">      </a>
  <div class="nav"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
     title="The navigation div">      </a></div>
  <div class="extra"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
     title="The extra or sidebar div">      </a></div>
<div class="footer"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
     title="The footer div">      </a></div>