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:
As you can tell I am a novice and have no background at all in HTML etc.
3
Answers
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:
One option would be to use a table:
Using
ul
s withoutli
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, usingli
tags for the entries inside the outermostul
s.Still, to answer the question: Just reset the default padding for
ul
s by addingul { padding: 0; }