Tutorial :HTML-CSS position problem with div

Question:

I got a little problem and nothing I test seems to work.

My HTML:

<div id="parent">      <div id="top_parent">Top_background          <div id="top">Top_Picture</div></div>      <div id="content">Here comes random stuff<div>          </div>            <div id="bottom">Footer</div>

CSS:

#top_parent {      background:#f00;      height:100px;  }    #top{      background:#0f0;      float:right;      position:relative;         height:100px;      width:50%;  }  #content{      top:-50px;      background:#00f;      <!--   position:relative;-->      height:100px;      width:80%;      margin:auto;  }  #parent{      background:#000;      height:350px;      width:100%;   }    #bottom {      height: 50px;      background:#ff0;      bottom:0px;      <!--position:absolute; -->      <!--position:relative; -->  }

Now my problem is, the footer won't get under the parent div, it stays in the content area. What am I doing wrong?

jsF link: my source

Thanks for the help.

Solution:1

You have not closed this div:

<div id="content">Here comes random stuff<div>

Should be:

<div id="content">Here comes random stuff</div>

You could see this easily if you indented your divs:

<div id="parent">    <div id="top_parent">Top_background      <div id="top">Top_Picture</div>    </div>    <div id="content">Here comes random stuff<div> <!-- Can see the problem -->  </div>  <div id="bottom">Footer</div>

Solution:2

Not sure if you copy-pasted or if this is a typo when you posted your code, but this line:

<div id="content">Here comes random stuff<div>

Should have a closing </div> tag at the end instead of that opening <div> tag. If that's actually your HTML, then it would not be grouping the divs the way you want/expect.

Solution:3

I think you have a wrong html:

<div id="parent">      <div id="top_parent">Top_background          <div id="top">Top_Picture</div></div>      <div id="content">Here comes random stuff<div>          </div>            <div id="bottom">Footer</div>

You didn't close div parent, nor content

<div id="parent">      <div id="top_parent">Top_background          <div id="top">Top_Picture</div>      </div>      <div id="content">Here comes random stuff</div>      <div id="bottom">Footer</div>  </div>

Interpreting that you want the "bottom" div inside the "parent", else:

<div id="parent">      <div id="top_parent">Top_background          <div id="top">Top_Picture</div>      </div>      <div id="content">Here comes random stuff</div>  </div>      <div id="bottom">Footer</div>

Also, in your css you should enable the position:relative for #content div, else the top parameter won't work. Try if this solves the problem.

Solution:4

In order to position footer after the content divs you have to float content divs first and then add clear:both css command to the footer. So your tree sould look like this:::

<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>

For this example your css should be as following:::

div.wrapper{ width:80%;
position:relative;
margin:0 auto;
}

div.left{ float:left;
width:60%;
background:green;
height:200px; /height only for testing so you could see the result/ }

div.right{ float:right;
width:30%;
background:red;
height:200px; /height only for testing so you could see the result/ }

div.footer{ clear:both;
height:40px;/height only for testing so you could see the result/ background:yellow;
width:100%;
}

Solution:5

Have you tried taking out that "bottom" attribute in the #bottom rule?

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com