skip to Main Content

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.

3

Answers


  1. 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>
    
    Login or Signup to reply.
  2. 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>
    
    Login or Signup to reply.
  3. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search