I have two boxes. One on the left and one on the right of the page.
The one on the left has login + register.
One on the right has two images.
I'm trying to align the left one to the center of the page with its contents aligned horizontally i.e. one one line.
I'm trying to get the right box to the right side of the page with its contents on one line, too.
My Fiddle
#topjob {
width: 100%;
text-align: center;
}
#left {
float: left;
width: 500px;
height: 50px;
background: #ff0000;
}
#right {
width: 100%;
display: inline-block;
margin-right: auto;
margin-left: 100px;
width: 100px;
height: 50px;
background: #00ff00;
}
#center ul li {
float: right;
width: 200px;
height: 50px;
background: #0000ff;
}
<div class="header_top">
<!--header_top-->
<div class="container">
<div class="row">
</div>
<div id="topjob">
<div id="left">
<ul>
<li><a href="#"><i class=""></i>LOGIN</a>
</li>
<li><a href="#"><i class=""></i>REGISTER</a>
</li>
</ul>
</div>
<div id="right">
<ul>
<li>
<a href="index.html">
<img src="images/mastercard.png" alt="" />
</a>
<li>
<a href="index.html">
<img src="images/visa.png" alt="" />
</a>
</ul>
</div>
</div>
</div>
</div>
</div>
You can efficiently accomplish this task with CSS Flexbox.
#topjob {
display: flex; /* make container a flexbox */
justify-content: center; /* center child elements ("flex items") */
position: relative; /* establish nearest positioned ancestor for
absolute positioning. */
}
#left {
width: 500px;
height: 50px;
background: #ff0000;
}
#right {
width: 100px;
height: 50px;
background: #00ff00;
position: absolute; /* remove box from the normal flow */
right: 2%; /* position to the right */
}
#left > ul,
#right > ul {
display: flex; /* will align flex items (li) in a row by default */
justify-content: flex-start; /* align li's starting from the left edge */
list-style-type: none;
padding: 0;
}
#left > ul li,
#right > ul li {
margin: 10px;
}
<div id="topjob">
<div id="left">
<ul>
<li><a href="#"><i class=""></i>LOGIN</a></li>
<li><a href="#"><i class=""></i>REGISTER</a></li>
</ul>
</div>
<div id="right">
<ul>
<li>
<a href="index.html">
<img src="images/mastercard.png" alt="">
</a>
<li>
<a href="index.html">
<img src="images/visa.png" alt="">
</a>
</ul>
</div>
</div>
jsFiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With