css - Float and margin -


i need know why following code:

<!doctype html> <html>     <head>         <title></title>         <style type="text/css">             *             {                 margin:0px;                 padding:0px;             }             #right             {                 float:right;             }             #content             {                 margin-top:20px;             }         </style>     </head>     <body>         <div id="right">a</div>         <div id="content">b</div>     </body> </html> 

applies 20px margin top @ #right div.

two things missing: 1) clear:right; within #content. 2) widths need specified able apply clear:right without div's stacking.

<html>     <head>         <title></title>         <style type="text/css">             *             {                 margin:0px;                 padding:0px;             }             #right             {                 float:right;                 width:24%;                 border:1px solid red;             }             #content             {                 margin-top:20px;                 width:74%;                 clear: right;                 border:1px solid aboue;             }         </style>     </head>     <body>         <div id="right">a</div>         <div id="content">b</div>         <div style="clear:both;"></div>     </body> </html> 

i've added borders easier view.


Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -