<body style="background-color:#FF9;">
<div style="width:100%; height:100%;">
<div id = "content">
</div>
<div style="background-color:#0F0;
margin-left:100px;
margin-right:100px;
height:40px; margin-top:100px; border-radius:50px 50px 50px 50px; box-shadow:10px 10px 10px 10px #303;">
<ul style="float:left;
height:2px;
margin-top:10px; width:100%; list-style:none;">
<li style="float:left;
width:20%;"><a href="index.php?link=home" style="text-decoration:none;">IBSEOTECH</a></li>
<li style="float:left;
width:20%;"><a href="services.php?link=services" style="text-decoration:none;">SERVICES</a></li>
<li style="float:left;
width:20%;"><a href="blog.php?link=blog" style="text-decoration:none;">BLOG</a></li>
<li style="float:left;
width:20%;"><a href="seo.php?link=seo" style="text-decoration:none;">LEARN SEO</a></li>
<li style="float:left;
width:20%;"><a href="contact.php?link=contact" style="text-decoration:none;">CONTACT US</a></li>
</ul>
</div>
<div style="margin-top:50px; height:50px; width:200px; margin-left:150px; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center; height:50px;"><strong>SEARCH ENGINE OPTIMIZATION</strong></p>
</div>
<div style="margin-top:60px; height:50px; width:200px; margin-left:150px; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center;"><strong>PAY PER CLICK</strong></p>
</div>
<div style="height:50px; width:200px; margin-top:-175px; margin-left:550px; box-shadow:10px 10px 10px 10px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center;"><strong>SOCIAL MEDIA OPTIMIZATION</strong></p>
</div>
<div style="height:50px; width:200px; margin-top:-50px; float:right; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center;"><strong>ATTRIBUTION</strong></p>
</div>
<div style="height:50px; width:200px; margin-top:50px; float:right; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center;"><strong>EMAIL MARKETING</strong></p>
</div>
<div style="margin-left:520px; margin-top:20px;">
<video width="250" height="100" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
<div style="margin-top:-300px; text-align:center; height:50px; width:150px; margin-left:150px; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p><strong>WEB DESIGN</strong></p>
</div>
<div style="text-align:center; margin-top:-60px; height:60px; width:150px; margin-left:550px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p><strong>WEB DEVELOPMENT</strong></p>
</div>
<div style="text-align:center; margin-top:-70px; height:60px; width:150px; margin-left:150px; float:right; margin-right:200px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p><strong>INFOGRAPHIC</strong></p>
</div>
</div>
Snaps...
[ATTACH]15899[/ATTACH]
This is simple ..
Here is when browser shortens...
[ATTACH]15901[/ATTACH]
No doubt it is design problem as I need to over come this problem, need help from some experience one, as I ma using different div but they overlap each other when browser shortens, explanation require in as simple steps....
The attachments of this post were removed during the platform migration in 2018