0

Hy folks! Why are div frontbox and div sidebox not inside div maincontent when code is displayed on the internet ?. Instead the div sidebox is outside div maincontent. Thx for help.

<!DOCTYPE html>
<html>
<head>
    <title>Schulung</title>
    <meta charset="UTF-8">
<style type="text/css">

.maincontent{height:100%;width:100%;background-image:url(pic1_pixabay.jpg);background-size:100% auto;background-repeat: no-repeat;}
.frontbox{text-align:center; padding:20px;background-color:white;opacity:0.5;border:thick solid #4D94FF;border:(255, 255, 255, .5); border-radius: 25px; margin:25px}
.sidebox{position:absolute;top:200px;left:40px;width: 250px;background-color:white;opacity:0.5;border:thick solid #4D94FF;border-radius: 25px;}
</style>
</head>
<body>
<div class="maincontent">
<div class="frontbox">
 <a href="url">Unsere Philosophie</a>
 <a href="url">Über uns</a> 
 <a href="url">Unser Portfolio</a> 
 <a href="url">Blog</a> 
 <a href="url">Unser Kontakt</a> 
 <a href="url">Sample Page</a> 
 <a href="url">Tryout Page</a> 
</div>
<div class="sidebox">
 <ul style="list-style-type:disc">
 <li><h1>Updates und Archive</h1></li>
 <li><a href="url">Jänner 2015</a></li>
 <li><a href="url">Februar 2015</a></li>
 <li><a href="url">März 2015</a></li>
 <li><a href="url">April 2015</a></li>
 <li><a href="url">Mai 2015</a></li> 
 <li><a href="url">Archive</a></li> 
 </ul>

</div>
</div>
</body>
</html>

Edited by samson.oba.77

4
Contributors
4
Replies
24
Views
2 Years
Discussion Span
Last Post by rtrethewey
0

You have absolute positioning set for .sidebox. That means it ignores its parent elements and uses the top and left coordinates supplied in you CSS.

0

Not really that relevant but get used to using a css framework like bootstrap, as it ties in everything nicely and is responsive too.

0

Elements set to 'position:absolute' are removed from the normal document flow and positioned with respect to their parent positioned element. If you set .mainContent to 'position:relative' and set its 'height' to a value that would enclose the child <div>s, you should get the expected results.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.