CODEWITHSUNDEEP
htmlcss
JohnDizzle
JohnDizzle

Reputation: 1338

Display list with heading in line

How to display the following code in line with a heading and one list per column?

I tried it with the following code and with a style-attribute display:inline-block; at the header tag but none of them worked for me.

Thanks for your help.

<!doctype html>
<html lang="en">
  <body style="display: inline-block"> 
    <div>
      <h2>Members</h2> 
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>	
      </ul>
    </div>
    <div>
      <h2>1st shift</h2>
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>
        <li>person_4</li>	
      </ul>
    </div> 
    <br style="clear:both"> 
  </body>
</html>

Upvotes: 3

Views: 280

Answers (3)

Ivin Raj
Ivin Raj

Reputation: 3429

try this one:

.text{
  float: left;
  padding: 10px;
}

.text ul{
  margin: 0;  
  padding-left: 20px;
}

DEMO HERE

Upvotes: -1

Gerico
Gerico

Reputation: 5169

Or floats would suffice for such a task. Although it would be wise to add a div wrapping them both to which you can apply a clear. The clear is necessary due to the fact using floats with remove the elements from the document flow. A clear will negate this problem and restore page flow.

Please find a rough dirty example below (minus the clear). 

.list{
  float: left;
  padding: 10px;
  border: 1px solid red;
  margin: 0 20px 0 0;
}

.list ul{
  margin: 0;  
  padding-left: 20px;
}
<!doctype html>
<html lang="en">
  <body style="display: inline-block"> 
    <div class="list">
      <h2>Members</h2> 
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>	
      </ul>
    </div>
    <div class="list">
      <h2>1st shift</h2>
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>
        <li>person_4</li>	
      </ul>
    </div> 
    <br style="clear:both"> 
  </body>
</html>

Upvotes: 3

Shomz
Shomz

Reputation: 37701

Your divs actually need to be displayed using inline-block (and width of at most 50% of the container, so they both can fit), see here:

div {width: 40%; display: inline-block; vertical-align: top}
<!doctype html>
<html lang="en">
  <body> 
    <div>
      <h2>Members</h2> 
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>	
      </ul>
    </div>
    <div>
      <h2>1st shift</h2>
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>
        <li>person_4</li>	
      </ul>
    </div> 
    <br style="clear:both"> 
  </body>
</html>

Upvotes: 2

Related Questions