Simple HTML/CSS - positioning div's - html

Question

I've recently gotten into the world of HTML/CSS and I am struggling with something.
I want to position the div's like this:
But the I only manage to it like this:
As you see, I want div 5 to be below Div 4, and next to div 3. But I only
Of course, I can wrap div 4 and div 5 in a new div, but I'd rather learn a better way of doing this.
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
float: left;
}
#innhold {
background-color: grey;
float: left;
}
#footer {
background-color: blue;
clear: both;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>

Answer 1

I don't think that there is a better way to do so without wrapping in a DIV your Div 4 and 5. But in place of using float, you can specify a width to each div and display them as display : inline-block; (a bit better).
* {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
display: inline-block;
vertical-align: top;
}
#innhold {
background-color: grey;
}
#footer {
background-color: blue;
}
#wrapping {
display: inline-block;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="wrapping">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
Without wrapping, you can add a height (in PX, not in %) to your Div 3 so that Div 5 remain of the right. I don't really like this option...
* {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
float: left;
height: 50px;
}
#innhold {
background-color: grey;
float: left;
width: 90%
}
#footer {
background-color: blue;
float: left;
width: 90%
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
The problem is that you need to specify a static height for your sub-menu...

Answer 2

Going by the diagram you supplied:
#side-meny {
float:left
}
Make a new div containing #innhold and #footer, let's call it #right-container so you have
<div id="right-container">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
Then
#right-container {
float:right
}
See if that works.

Answer 3

Please use the following code which I have modified.
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
display: inline-block;
vertical-align: top;
width: 25%;
}
#block {
display: inline-block;
vertical-align: top;
width: 74%;
}
#block p {
margin: 0;
}
#innhold {
background-color: grey;
}
#footer {
background-color: blue;
clear: both;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="block">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>

Answer 4

in your css file you can set
#footer{
...
position:absolute;
left: (div3's width);
top: (div1+div2+div4 height)
}