Resolved Problem with wrapper background in CSS

wentill · 01-28-2013, 09:40 AM

Hi, I am really a beginner in making web pages. I have read tons of tutorials and I have made quite a progress I think. But I get stuck in one simple problem. I want to make a simple webpage with this layout: http://i49.tinypic.com/1r54l4.jpg

I have a body with background. I want this background to be visible above and under the png logo. Then I have canvas with menu on the left side with the same color background but different color than body. And then the footer with a little margin again. The code looks like this:

Code:

body {
margin: 0;
padding-top: 10px;
background-image: url('pics/background.png');
background-repeat: repeat; 
}

#wrapper {
width:1200px;
height:100%;
margin-left:12%;
}

#content {
background: rgba(255, 251, 208, 0.9);
height:100%;
margin-top:10px;
}

#menu {
width:16%;
float:left;
}

#canvas {
width:84%;
float:right;
}

This is how the html code looks like. I skiped the footer for now.

Code:

  <body>
    <div id="wrapper">
      <img src="pics/header.png" width=1200px>      
      <div id="content">
        <div id="menu">
          random text
        </div>
        <div id="canvas">
          random text
        </div>
      </div>
    </div>   
  </body>

With this I get just the webpage without the background color. And for example Firebug shows that the height of wrapper or content ends just above the canvas. I have tried tens of different settings but something was wrong every time.
Thanks for any help.

tracknut · 01-28-2013, 03:36 PM

Your floated divs are "out of the document flow" from the perspective of their containing divs of wrapper and content. That's why the wrapper and content are not including them. There are several ways to resolve this, I tend to use overflow:auto in the surrounding div.

Also your width attribute on the logo is wrong, it should just be width="1200". Or better yet use a width in css.

Dave

Strider64 · 01-28-2013, 04:52 PM

First I think you are tackling your logo wrong, by that I mean your logic. Why don't you do something like the following:
Example of CSS Code

Code:

body {
	font-size: 76%;
	background-color: #f9f9f9;
	padding: 0px;
	margin: 0px;
}

#wrapper {
	overflow: hidden;	
	width:1200px;	
	padding: 0px;
	margin: 0px auto 0px auto;
}

#header {
	float: left;
	width: 1200px;
	height: 100px;
	background-image: url(../images/img-example.png);
		background-repeat: no-repeat;
	padding: 0px;
	margin:  0px;	
}
#company-logo {
      float: left;
      width: 100px;
      height: 50px;
           position: relative;
                 top: 20px; 
                 left: 500px;
      ....style in the way you want it to look on page
}

Then the HTML code might look like something like the following:

Code:

<body>
<div id="wrapper">
  <div id="header">

    <h1 class="company-title">The Best Darn Website Example</h1>
  
    <div id="company-logo"> 
    		<a href="index.html" target="_self"><img src="images/img-michigan-map.png" alt="Map of Michigan" /></a>   
    </div><!--/#company-logo-->

  </div><!--/#header-->

  .......continue with code
  </div><!--/#wrapper-->
</body>

I was taught to put everything in logical order when writing my html/css code, here is a small css example

Code:

header {
     float: left;
     width: 800px;
     height: 600px;
     background-image: url(../images/img-header.jpg);
          background-repeat: no-repeat;
     padding: 0px;
     margin: 0px;
}

Try to put padding and margins set to zero for all you major blocks of css code, such as header, section, article, footer, etc.. that way when you set your width and height you can adjust your padding and margin accordingly. I hope this helps a little.

wentill · 01-28-2013, 06:05 PM

Thanks a lot guys for help. Everything is now how I have wanted. Obviously if I had written earlier and I would have saved few days of endless evenings