CODEWITHSUNDEEP
htmlcss
ghost
ghost

Reputation: 39

How can I put these two unordered lists side by side using CSS?

<div class="container"



    <h3>Note template</h3>

So these two "s" below are what I'm trying to put side by side. I have tried using a float, display: inline-block, but I can't seem to figure it out.

    <p>
        <ul>
            <li>Name: </li>
            <li>Account#: </li>
            <li>Meter: </li>
            <li>Phone: </li>
            <li>Issue: </li>
            <li>Resolution: </li>
            <li>KB: None</li>
        </ul>

    <h3>Note Template(Other)</h3>
        <ul>
            <li>Name: </li>
            <li>Primary Contact: </li>
            <li>Account#: </li>
            <li>Meter: </li>
            <li>Phone: </li>
            <li>Primary Phone#: </li>
            <li>Issue: </li>
            <li>Resolution: </li>
            <li>KB: None</li>
        </ul>
    </p>
</div>

Upvotes: 2

Views: 1161

Answers (3)

sol
sol

Reputation: 22919

Wrap each heading and list together, and make .container a flexbox or grid container.

Grid example: Class .grid added

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
<div class="container grid">
  <div>
    <h3>Note template</h3>
    <ul>
      <li>Name: </li>
      <li>Account#: </li>
      <li>Meter: </li>
      <li>Phone: </li>
      <li>Issue: </li>
      <li>Resolution: </li>
      <li>KB: None</li>
    </ul>
  </div>
  <div>
    <h3>Note Template(Other)</h3>
    <ul>
      <li>Name: </li>
      <li>Primary Contact: </li>
      <li>Account#: </li>
      <li>Meter: </li>
      <li>Phone: </li>
      <li>Primary Phone#: </li>
      <li>Issue: </li>
      <li>Resolution: </li>
      <li>KB: None</li>
    </ul>
  </div>
</div>

Upvotes: 1

Agniveer
Agniveer

Reputation: 371

Simplest possible way to do it:

<html>
<head>
<style>
.container{ 
width: 100%;
display: flex;
}
.c1{
 width: 50%;

 }
.c2{
 width: 50%;
 }
 </style>
</head>

<body>
<div class="container">
<div class="c1">
    <h3>Note template</h3>
        <ul>
            <li>Name: </li>
            <li>Account#: </li>
            <li>Meter: </li>
            <li>Phone: </li>
            <li>Issue: </li>
            <li>Resolution: </li>
            <li>KB: None</li>
        </ul>
</div>
<div class="c2">
    <h3>Note Template(Other)</h3>
        <ul>
            <li>Name: </li>
            <li>Primary Contact: </li>
            <li>Account#: </li>
            <li>Meter: </li>
            <li>Phone: </li>
            <li>Primary Phone#: </li>
            <li>Issue: </li>
            <li>Resolution: </li>
            <li>KB: None</li> 
        </ul>
</div>
</div>
</body>
</html>

Upvotes: 1

Pandiyan Cool
Pandiyan Cool

Reputation: 6565

Here you go

https://jsfiddle.net/jfn605gp/

<div class="container" style="width: 100%; display: table;">


  <div style="display: table-row">
    <div style="width: 50%; display: table-cell;">


      <h3>Note template</h3>


      <ul>
        <li>Name: </li>
        <li>Account#: </li>
        <li>Meter: </li>
        <li>Phone: </li>
        <li>Issue: </li>
        <li>Resolution: </li>
        <li>KB: None</li>
      </ul>
    </div>

    <div style="display: table-cell;">
      <h3>Note Template(Other)</h3>
      <ul>
        <li>Name: </li>
        <li>Primary Contact: </li>
        <li>Account#: </li>
        <li>Meter: </li>
        <li>Phone: </li>
        <li>Primary Phone#: </li>
        <li>Issue: </li>
        <li>Resolution: </li>
        <li>KB: None</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions