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.