
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
EmoticonEmoticon