CSS DIV inside DIV

Question

I'm just getting started with HTML / CSS and I'm trying to write an own website. However, I want to have a header, a main content div, and a footer. Inside the main content div, I want to place a left bar and a right bar, but unfortunately, the left bar ALWAYS is out of the div...what am I doing wrong?

Here is my CSS:

body {
  background-color: black;
}
p {
  color: white;
}
#header {
  background-color: grey;
  margin-left: 100px;
  margin-right: 100px;
  border-radius: 5px;
  text-align: centaer;
  /*change later*/
}
#content {
  background-color: green;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 100px;
  margin-right: 100px;
  border-radius: 5px;
  padding: 50px;
}
#leftBar {
  background-color: orange;
  left: 20px;
  right: 20px;
  top: 20px;
  float: left;
  color: white;
  width: 20%;
  height: 60%;
  display: block;
}
#footer {
  background-color: gray;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-right: 100px;
  margin-left: 100px;
  border-radius: 5px;
  text-align: center;
  /*change later*/
}

Here is my HTML

<html>

<head>
  <title>Titel</title>
  <link rel="stylesheet" type="text/css" href="FirstpageCSS/mainstyle.css" />
</head>

<body>
  <p>Formatierter Inhalt</p>

  <div id="header">HEADER</div>
  <div id="content">this is going to be the content



    <p>lol</p>
  </div>

  <div id="leftBar">contentntntntntnntnt</div>

  <div id="footer">FOOTER</div </body>

</html>

What am I doing wrong? I know its something about positioning but I always get confused with it...

Appreciating any help as a newbie.

`#leftBar` is outside of `#content` in your HTML code. Also note that [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float) "specifies that an element should be taken from the normal flow"; you may need to [clear your floats](https://developer.mozilla.org/en-US/docs/Web/CSS/clear). See [What methods of ‘clearfix’ can I use?](http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use) — showdev, Jul 26 '16 at 23:40

score 0 · Answer 1 · answered Jul 26 '16 at 23:45

try putting the leftbar div inside the content div

<div id="header">HEADER</div>
    <div id="content">this is going to be the content

        <div id="leftBar">contentntntntntnntnt</div>

        <p>lol</p>

    </div>

<div id="footer">FOOTER</div>

score 0 · Accepted Answer · answered Jul 26 '16 at 23:55

There are better ways to position content on a webpage and to make it responsive. (Such as bootstrap)

<div id="header">HEADER</div>
<div id="content">this is going to be the content



<p>lol</p></div>

    <div id="leftBar">contentntntntntnntnt</div>

<div id="footer">FOOTER</div

For starters you can place the leftBar div inside content div, and close tag of footer div.

<div id="header">HEADER</div>
<div id="content">this is going to be the content

<p>lol</p>

<div id="leftBar">contentntntntntnntnt</div>
</div>  

<div id="footer">FOOTER</div>

Then set height of content div equal to height of leftBar div. Since you floated leftBar to the left it will appear inside content div and to the left.

To make the footer appear at the bottom you need to break the floats, Make an empty div and then use CSS

<div class="clear"></div>

in CSS file,

.clear {
    clear:both;
}

This should work for the most part. Cheers!

CSS DIV inside DIV

2 Answers2