HTML - list items on left and right of page, on same lines

Question

HTML - list items on left and right of page, on same lines

76 Views Asked by timbox90 At 14 September 2023 at 20:21

I am creating a website that is going to be my resume. I have my name centered, I am going to have my contact details below. On the left, I am going to have my address over two lines, and on the right I am going to have my email and phone over two lines. I am using a UL tag for this.

This is my code:

<div class="container">
  <div class="fullName">
    <h1 class="title">My Name</h1>
  </div>
  <div>
    <ul style="float:left;">
      <ul>Address Line 1</ul>
      <ul>Address Line 2</ul>
    </ul>
  </div>
  <div>
    <ul style="float:right;">
      <ul>T: number here</ul>
      <ul>E: [email protected]</ul>
    </ul>
  </div>

As you can see I have used ul, and I did a quick google and thought using float left and right would work. The right works, but the left doesn't; it is indented from the left of the page, whereas the right is all the way over to the right, here is a screen shot:

Screenshot

As you can tell I am a novice and have no background at all in HTML etc.

Original Q&A

There are 3 best solutions below

**Afro Habesha** · Answer 1 · 2023-09-14T20:58:54.980000

The easiest way to achieve the layout you want is to wrap both elements in a and apply flexbox to the . You can set the justify-content property to "space-between" to create space between the two elements. Here's the code:

   <div class="container">
        <ul>
            <!-- List 1 content here -->
        </ul>
        <ul>
            <!-- List 2 content here -->
        </ul>
    </div>

     <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
    </style>

**Will Smithee** · Answer 2 · 2023-09-14T21:27:37.257000

One option would be to use a table:

<!DOCTYPE html>
<html>
    <head>
        <title>
            My Resume
        </title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
        </link>
        <style>
            table,td,th{
                    border:0px solid #000
                }
            table{
                width:100%;
                border-collapse:collapse
            }
            td,th{
                width:50%;
                padding-top:0px;
                padding-bottom:0px
            }
            td.center-spanned{
                text-align:center;
            }
            td.right-aligned{
                text-align:right;
                padding-left:0px;
                padding-right:50px
            }
            td.left-aligned{
                text-align:left;
                padding-left:50px;
                padding-right:0px
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th class="center-spanned" colspan="2">
                    <div class="fullName">
                        <h1 class="title">
                            My Name
                        </h1>
                    </div>
                </th>
            </tr>
            <tr>
                <td class="right-aligned">
                    Address Line 1
                </td>
                <td class="left-aligned">
                    T: number here
                </td>
            </tr>
            <tr>
                <td class="right-aligned">
                    Address Line 2
                </td>
                <td class="left-aligned">
                    E: [email protected]
                </td>
            </tr>
        </table>
    </body>
</html>

**Johannes** · Answer 3 · 2023-09-14T22:50:54.853000

Using uls without li tags inside them is really wrong semantically, and is also invalid HTML (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul). You should use a different structure, using li tags for the entries inside the outermost uls.

Still, to answer the question: Just reset the default padding for uls by adding ul { padding: 0; }

ul {
  padding: 0;
}

<div class="container">
  <div class="fullName">
    <h1 class="title">My Name</h1>
  </div>
  <div>
    <ul style="float:left;">
      <ul>Address Line 1</ul>
      <ul>Address Line 2</ul>
    </ul>
  </div>
  <div>
    <ul style="float:right;">
      <ul>T: number here</ul>
      <ul>E: [email protected]</ul>
    </ul>
  </div>

HTML - list items on left and right of page, on same lines

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-LISTS

Related Questions in CSS-FLOAT

Trending Questions

Popular # Hahtags

Popular Questions