put these two unordered lists side by side using CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

put these two unordered lists side by side using CSS

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--   w w  w  . j a v  a 2 s.c o m-->
 <body> 
  <div class="container" style="width: 100%; display: table;"> 
   <div style="display: table-row"> 
    <div style="width: 50%; display: table-cell;"> 
     <h3>Lorem ipsum d</h3> 
     <ul> 
      <li>Lorem </li> 
      <li>Lorem ipsu</li> 
      <li>Lorem i</li> 
      <li>Lorem i</li> 
      <li>Lorem i</li> 
      <li>Lorem ipsum </li> 
      <li>Lorem ip</li> 
     </ul> 
    </div> 
    <div style="display: table-cell;"> 
     <h3>Lorem ipsum dolor si</h3> 
     <ul> 
      <li>Lorem </li> 
      <li>Lorem ipsum dolor</li> 
      <li>Lorem ipsu</li> 
      <li>Lorem i</li> 
      <li>Lorem i</li> 
      <li>Lorem ipsum dolo</li> 
      <li>Lorem i</li> 
      <li>Lorem ipsum </li> 
      <li>Lorem ip</li> 
     </ul> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials