How can I change the link lists position? - html

Question

I am designing the footer of my website and have following Question:
How can I change my CSS so that it looks like this:
footer{
background-color: #e0ebeb;
list-style-type: none;
display: inline;
}
#Questions {
margin: auto;
text-align: center;
display: block;
padding: 0;
}
<footer>
<div class="Newsletter">
<h1>Get our Newsletter</h1>
<h2>Stay tuned and new gadgets everday!</h2>
</div>
<div class="secondpt" >
<div id="Questions">
<h1>Do you have a question </h1>
<ul>
<li>Contact us</li>
</ul>
</div>
<div id="Menu">
<ul>
<li>Home</li>
<li>Who are we ?</li>
<li>Newest</li>
<li>The Best</li>
</ul>
</div>
<div id="languages">
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Français</li>
</ul>
</div>
</div>
<hr>
<div>
<h1>Connect with us</h1>
</div>
</footer>

Answer 1

you can achieve this using float property :
*{
font-size:15px;
}
ul {
list-style:none;
}
footer{
background-color: #e0ebeb;
list-style-type: none;
display: inline;
}
.secondpt {
width: 100%;
}
div#Menu {
float: left;
}
div#languages {
float: right;
}
.right{
float:right
}
.left{
float:left
}
<footer>
<div class="Newsletter">
<h1>Get our Newsletter</h1>
<h2>Stay tuned and new gadgets everday!</h2>
</div>
<div class="secondpt" >
<div class="left">
<div id="Questions">
<h1>Do you have a question </h1>
<ul>
<li>Contact us</li>
</ul>
</div>
</div>
<div class="right">
<div id="Menu">
<ul>
<li>Home</li>
<li>Who are we ?</li>
<li>Newest</li>
<li>The Best</li>
</ul>
</div>
<div id="languages">
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Français</li>
</ul>
</div>
</div>
</div>
<hr>
</footer>

Answer 2

You have to set the width of div tags inside the #Questions to 30% and display them as inline-flex
footer{
background-color: #e0ebeb;
list-style-type: none;
display: inline;
}
ul{
list-style: none;
}
div#Questions div{
width: 30%;
display: inline-flex;
}
#Questions {
margin: auto;
text-align: center;
display: block;
padding: 0;
}
This will set the div tags side-by-side. Changes in html are mentioned in the comments.
<footer>
<div class="Newsletter">
<h1>Get our Newsletter</h1>
<h2>Stay tuned and new gadgets everday!</h2>
</div>
<div class="secondpt">
<div id="Questions">
<h1>Do you have a question </h1>
<div id="contact"> <!-- Add a new div tag -->
<ul>
<li>Contact us</li>
</ul>
</div> <!-- Closing #contact -->
<div id="Menu">
<ul>
<li>Home</li>
<li>Who are we ?</li>
<li>Newest</li>
<li>The Best</li>
</ul>
</div>
<div id="languages">
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Français</li>
</ul>
</div>
</div> <!-- Close #Questions here -->
</div> <!-- Close .secondpt here -->
<hr>
<div>
<h1>Connect with us</h1>
</div>
</footer>