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>
    <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;}
<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 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> 


Recommended Answers

All 4 Replies

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

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

Thx for the fast response , it helped

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, learning, and sharing knowledge.