CODEWITHSUNDEEP
htmlcssmultiple-columns
Ben
Ben

Reputation: 669

Can't get background image to be visible with faux-column approach

There must be something extremely simple I'm messing up, but I can't tell what it is. The two columns appear properly separated and the image is in the correct location (I've dragged-and-dropped the image into the CSS code in VS2012 to verify the path is correct.) The background image should show the left column has being a tan color and the main content column as being white. Instead the background of the entire page is white.

Here is the HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link href="TwoColumnStyle.css" rel="stylesheet" />
  <title>Two-column layout</title>
</head>
<body>
  <div id="wrapper">
    <div id="leftColumn">
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
    <div id="mainContent">
        <h1>This is the header</h1>

        <h2>Content1</h2>
        <p>This is the first paragraph. La de daa.</p>
        <p>This is the second paragraph. Doo be doo.</p>

        <h2>Content2</h2>
        <p>This is the third paragraph. Bow chik a wow wow.</p>
    </div>
  </div>    
</body>
</html>

Here is the CSS:

body {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#wrapper { background-image: url(images/col_bg.png);
       background-repeat: repeat-y;
       background-position: left top; }

#leftColumn {
  width: 100px;
  float: left;
}

#mainContent {
  width: 860px;
  float: right;
}

Here is the absolute path to the image, though obviously the CSS above is a relative path:

http://localhost:10525/layouts1/images/col_bg.png

The image is 960px by 1px.

Any clues to what I'm doing wrong here? I'm trying to do some experimentation with basic layouts using DIV, and from the information I'm seeing online this is exactly how it should be written (via CSS Missing Manual 2nd edition and online resources.)

Upvotes: 1

Views: 197

Answers (2)

Ben
Ben

Reputation: 669

I found the issue. I'm not sure why the references I was looking at for this approach didn't explicitely state this, but overflow: hidden has to be added to the wrapper to have it automatically size to the internal divs.

Once I edited the CSS like so, the issue was resolved:

#wrapper { 
  background-image: url(images/col_bg.png);
  background-repeat: repeat-y;
  background-position: left top;
  overflow:hidden;
}

Upvotes: 1

nocturns2
nocturns2

Reputation: 661

You could try moving all the style rules in the body selector to the #wrapper selector, then add a background transparent to the #leftColumn (if you want the image in the #wrapper to show through), and add the background white to your #mainContent.

You can also add a background color or image to your body selector. You do not have control of the browser size, when you add a width to your #wrapper and the browser is opened full screen the #wrapper will only take a portion of the screen and the rest will come from the body.

One last bit, exact widths that are floated won't always yield results as expected on all browsers. Specially if they are inside an constraining container.

[Edit] You'll have to give your #wrapper a min-height in order to see it on the screen.

[Edit] I did find it peculiar that the #wrapper required a min-height to show itself. So I removed the min-height and tested it with a form tag and an input inside the #wrapper, but below the other two divs and the background showed up all the way down to the bottom of the form tags. It's seems that the two divs are not affecting the #wrapper div at all.

Upvotes: 1

Related Questions