How do I create four equal columns using <li> tag?

HTML & CSS
1

Hello;

I have got a book that has got four translations. I want to show the translations side by side.

The first paragraph needs to be in the English language, horizontally to the right of that the first paragraph needs to be in the German language, horizontally to the right of that the first paragraph needs to be in the French language, and horizontally to the right of that the paragraph needs to be in the Spanish language.

I know how to show the list items in line. The “display: inline;” command does that nicely.

However, I do not know how to get the columns to have an equal width. Each of the columns needs to have a width of 25% of the total.

Here’s how to get the items to display horizontally:

li.inlineList
{
display: inline;
}

<ul class=“inlineList”>
<li class=“inlineList”>Paragraph 1 (English)</li>
<li class=“inlineList”>Paragraph 1 (German)</li>
<li class=“inlineList”>Paragraph 1 (French)</li>
<li class=“inlineList”>Paragraph 1 (Spanish)</li>
</ul>

<ul class=“inlineList”>
<li class=“inlineList”>Paragraph 2 (English)</li>
<li class=“inlineList”>Paragraph 2 (German)</li>
<li class=“inlineList”>Paragraph 2 (French)</li>
<li class=“inlineList”>Paragraph 2 (Spanish)</li>
</li>

<ul class=“inlineList”>
<li class=“inlineList”>Paragraph 3 (English)</li>
<li class=“inlineList”>Paragraph 3 (German)</li>
<li class=“inlineList”>Paragraph 3 (French)</li>
<li class=“inlineList”>Paragraph 3 (Spanish)</li>
</li>

Here’s what I want it to look like:

[SIZE=“1”]Paragraph 1 (English) | Paragraph 1 (German) | Paragraph 1 (French) | Paragraph 1 (Spanish)

Paragraph 2 (English) | Paragraph 2 (German) | Paragraph 2 (French) | Paragraph 2 (Spanish)

Paragraph 3 (English) | Paragraph 3 (German) | Paragraph 3 (French) | Paragraph 3 (Spanish)[/SIZE]

A table could be used for a layout like the one above. However, a table is not permitted for this particular assignment.

My question is as follows:

How do I get each of the list columns to have exactly the same width of 25% of the total so that each of the four paragraph translations are horizontally aligned with each other?

Thanks.

2

Try overflow: hidden; on the ULs.

3

this is the way I did it with some sample text. See if it helps.
I think you just need an “overflow: hidden” style.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
.inlineList {
       border: 1px solid green;
       overflow: hidden;
       clear: both;
       list-style-type: none;
       margin: 10px 0px 0px 0px;
       padding: 0px 0px 0px 0px
}
 
.inlineList li {
       float: left;
       width: 22&#37;;
       margin: 0px 0px 0px 0px;
       padding: 10px 10px 10px 10px
}
 
</style>
 
</head>
<body>
 
<ul class="inlineList">
<li>Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
ante sed, ac turpis dis dui vestibulum aut.
</li>
<li>
Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante 
turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc 
posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede 
voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet 
congue, dictum integer eget sed orci. Suscipit vitae quis, massa elit faucibus massa, interdum nam pharetra nulla sed, sollicitudin 
egestas, magna viverra.
</li>
<li>
Vitae quis risus enim. Suspendisse a nulla a, vestibulum eros suspendisse. Magna wisi a ad molestie dolor. Quam vel mollis nulla 
pharetra. Qui congue inceptos ut vehicula, feugiat ultricies in pellentesque eu, eros aliquid vel nec dis, risus quis feugiat 
vestibulum praesent at.
</li>
<li>
Et elit nunc, aliquam rhoncus, cras ante est ac consequat, vitae lacinia curabitur pellentesque ipsum bibendum gravida. Arcu in nisl. 
Vivamus etiam viverra morbi nunc, neque cras ut placerat id pulvinar eget, dolor vel pede nunc duis. Amet mi egestas porta, leo est 
nec et, suscipit sed ipsum mauris vitae. Libero vulputate massa perspiciatis laborum ipsum, leo parturient dapibus accumsan, nec 
viverra luctus a. Qui sit lorem scelerisque purus lectus, aptent habitant nunc turpis duis, malesuada a nam mi litora. Duis sapien 
felis, eu aute quis, elit dignissim hymenaeos vel.
</li>
</ul>
 
<ul class="inlineList">
     <li>Paragraph 2 (English)</li>
     <li>Paragraph 2 (German)</li>
     <li>Paragraph 2 (French)</li>
     <li>Paragraph 2 (Spanish)</li>
</ul>
 
<ul class="inlineList">
       <li>Paragraph 3 (English)</li>
       <li>Paragraph 3 (German)</li>
       <li>Paragraph 3 (French)</li>
       <li>Paragraph 3 (Spanish)</li>
</ul>
 
</body>
</html>
4

Have you tried this?

li {width: 25&#37;;}

Mind you, I would probably reduce that down to maybe 20% or 22% and have 3% padding on one side, to create some space between columns. Personally, I would also float those LIs rather than go for display: inline, but others may not agree.)

5

without doing your assignment for you

  1. close your <ul>'s properly

  2. I think when you put actual content into your <li>'s you will find that floating them will work better than using “display: inline”

  3. remove the default margins, padding and li symbols on the <ul>'s

  4. set “clear: both” on the <ul> if you decide to float the <li>

  5. set the width for the <li>'s

  6. set appropriate margins and padding on the <ul> and <li>

6

ralph.m, Kalon;

Thanks for the help. I have got it working now.

Thanks again. :slight_smile:

7 
 
.inlineList {
    border: 1px solid green;
    overflow: hidden;
    clear: both;
    list-style-type: none;
    margin: 10px 0px 0px 0px;
    padding: 0px 0px 0px 0px
}
 
.inlineList li {
    float: left;
    width: 22&#37;;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px
}

and 7) remove the class attribute from the <li>'s.

8

Thanks Kalon, ralph.m for responding to my problem. The suggestions helped the problem but there is one more issue.

The red border around the ul.inlineList does not enclose the <li>'s. The red border is up at the top of each of the horizontal list items and is not on either the left or right sides or the bottom. How can I make the red border enclose the horizontal list items?

<html>
<head>

<style type="text/css">

ul.inlineList
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
border-style: solid;
border-color: red;
clear: both;
}

li.inlineList
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 2px;
float: left;
width: 24%;
}

</style>

</head>

<body>

<ul class="inlineList">
<li class="inlineList">Paragraph 1 (English) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 1 (German) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 1 (French) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 1 (Spanish) Mary had a little lame, little lamb, little lamb.</li>
</ul>

<ul class="inlineList">
<li class="inlineList">Paragraph 2 (English) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 2 (German) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 2 (French) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 2 (Spanish) Mary had a little lame, little lamb, little lamb.</li>
</ul>

<ul class="inlineList">
<li class="inlineList">Paragraph 3 (English) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 3 (German) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 3 (French) Mary had a little lame, little lamb, little lamb.</li>
<li class="inlineList">Paragraph 3 (Spanish) Mary had a little lame, little lamb, little lamb.</li>
</ul>

</body>
</html>

Thanks.