الكود:

float

كيف يمكن فعل ذلك؟

الكود:

   <div id="picture">
      <img src="bill.jpg" alt="Bill Gates">
   </div>

   <p>causas naturales et antecedentes,
   idciro etiam nostrarum voluntatum...</p>
   

الكود:

float

الكود:

   #picture {
      float:left;
      width: 100px;
   }
   

• شاهد المثال
  

مثال آخر: الأعمدة

الكود:

<div>

الكود:

   <div id="column1">
      <p>Haec disserens qua de re agatur
      et in quo causa consistat non videt...</p>
   </div>

   <div id="column2">
      <p>causas naturales et antecedentes,
      idciro etiam nostrarum voluntatum...</p>
   </div>

   <div id="column3">
      <p>nam nihil esset in nostra
      potestate si res ita se haberet...</p>
   </div>
   

الكود:

float

الكود:

   #column1 {
      float:left;
      width: 33%;
   }

   #column2 {
      float:left;
      width: 33%;
   }

   #column3 {
      float:left;
      width: 33%;
   }
   

• شاهد المثال
  

الكود:

float

الخاصية clear

الكود:

clear

الكود:

clear

الكود:

clear

الكود:

   <div id="picture">
      <img src="bill.jpg" alt="Bill Gates">
   </div>

   <h1>Bill Gates</h1>

   <p class="floatstop">causas naturales et antecedentes,
   idciro etiam nostrarum voluntatum...</p>
   

الكود:

   #picture {
      float:left;
      width: 100px;
   }

   .floatstop {
      clear:both;
   }