go to
ForumEasy.com
Community Sandbox
Home
» Sandbox
Play your own code in the sandbox
Edit Your Code:
<!DOCTYPE html> <html> <head> <style> /* edit or add your own CSS code here */ .box { border: 1px solid red; } #div1 { width: auto; /* default */ } #div2 { width: 400px; /* fixed */ } #div3 { min-width: 300px; /* min */ } #div4 { max-width: 500px; /* max */ } </style> </head> <body> <h2>CSS Dimension Example</h2> <p>In this example, the dimension of block elements are demonstrated.</p> <br> <DIV class="box" id="div1">This block has the width set as <b>auto</b> -- which should changes accordingly when you resize the window. </DIV> <br> <DIV class="box" id="div2">This block has the width set as a fixed value of <b>400px</b> -- which should remain unchanged when you resize the window. Also notice that the content inside this box is very stable.</DIV> <br> <DIV class="box" id="div3">This block has the <b>min-width</b> set as a fixed value of 300px -- which means that the block cannot shrink in width less than 300px when you continue to shrink the window. </DIV> <br> <DIV class="box" id="div4">This block has the <b>max-width</b> set as a fixed value of 500px -- which means that the block cannot go beyond 500px in width when you continue to increase the size of the browser window. </DIV> </body> </html>
Run »
Result Output:
Back
Powered by
ForumEasy
© 2003-2005, All Rights Reserved. |
Privacy Policy
|
Terms of Use
Get your own forum today. It's easy and free.