CODEWITHSUNDEEP
htmlcsshtml-lists
iwantlotsofcookies
iwantlotsofcookies

Reputation: 25

Is there a way to put two horizontal html lists on opposite sides of a page on the same line?

I have been trying to put two lists displayed horizontally on the same line. One aligned on the left and the other on the right. I have been using float to make the lists horizontal and to move them to their correct side but no matter what I do, they won't go on the same line.

Thank you in advance if you are able to help me with this problem. My code is below.

img{
  width: 100px;
  height: 100px;
}
#left{
color: black;
font-size: 24px;
}
#left li{
  padding: 10px;
  float: left;
  display: block;
}
#left_list{
  width: 70%;
  clear: right;
}
#right{
  color: black;
  font-size: 24px;
}
#right li{
  padding: 10px;
  float: right;
  display: block;
}
#right_list{
  width: 30%;
  float: right;
  clear: left;
}
ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: hotpink;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <script src="script.js"></script>
    <div id="left_list">
      <div id="left">
        <ul>
          <li><img src=""></li>
          <li><a href="/index">Home</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </div>
    <div id="right_list">
      <div id="right">
        <ul>
          <li><a href="" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li><a href="" target="_blank"><i class="fa fa-instagram"></i></a></li>
          <li><a   href="" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Views: 73

Answers (1)

wangdev87
wangdev87

Reputation: 8751

Use display: flex to wrap left_list and right_list in a row.

Other solution: add display: inline-block; for #left_list and #right_list.

body {
  display: flex;
}
img {
  width: 100px;
  height: 100px;
}

#left {
  color: black;
  font-size: 24px;
}

#left li {
  padding: 10px;
  float: left;
  display: block;
}

#left_list {
  width: 70%;
  clear: right;
}

#right {
  color: black;
  font-size: 24px;
}

#right li {
  padding: 10px;
  float: right;
  display: block;
}

#right_list {
  width: 30%;
  float: right;
  clear: left;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: hotpink;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <script src="script.js"></script>
  <div id="left_list">
    <div id="left">
      <ul>
        <li><img src=""></li>
        <li><a href="/index">Home</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </div>
  </div>
  <div id="right_list">
    <div id="right">
      <ul>
        <li><a href="" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a href="" target="_blank"><i class="fa fa-instagram"></i></a></li>
        <li><a href="" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Related Questions