Member Avatar for samson.oba.77

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
  • 133 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by rtrethewey
Member Avatar for hericles

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.

Member Avatar for iamthwee

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

Member Avatar for samson.oba.77

Thx for the fast response , it helped

Member Avatar for rtrethewey

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.