CODEWITHSUNDEEP
htmlcss
user3386779
user3386779

Reputation: 7185

css for display the 3 div tag in one line

I want to display 2 div tag and ul tag list in same line.now It is displayed one by one.(ie.)I want to display menu,social meedia and address in same line.

enter image description here 

.footercolor {
    background: rgba(19, 64, 121, 1);
    background: -moz-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19, 64, 121, 1)), color-stop(55%, rgba(73, 155, 234, 1)), color-stop(100%, rgba(19, 64, 121, 1)));
    background: -webkit-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    background: -o-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    background: -ms-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    background: linear-gradient(to right, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#134079', endColorstr='#134079', GradientType=1);
	height: 100px;
	padding: 50px 100px 100px;
	margin-bottom: 0px;
}
footer a{
	color: #fff;
}
footer a:hover{
	color: #aaa;
}
.address{
float:right;
}
 <footer class="footercolor">
                <div class="down">
                 menu
                </div>
                 <ul class="list-inline ">
		<li><a href=><i class="fa fa-3x fa-facebook-square"></i></a></li>
		<li><a href="#"><i class="fa fa-3x fa-instagram"></i></a></li>
		<li><a href="#"><i class="fa fa-3x fa-twitter-square"></i></a></li>
		</ul>
		<div class="address">
		      <p>address</p>
		</div>
    </footer>

Upvotes: 0

Views: 179

Answers (3)

Aibek Kendirbaev
Aibek Kendirbaev

Reputation: 15

try using 

display:table-cell

for 

.down, .list-inline, .address

Upvotes: 0

RAJ
RAJ

Reputation: 552

body {
	margin:0;
}
.footercolor {
	background: rgba(19, 64, 121, 1);
	background: -moz-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19, 64, 121, 1)), color-stop(55%, rgba(73, 155, 234, 1)), color-stop(100%, rgba(19, 64, 121, 1)));
	background: -webkit-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
	background: -o-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
	background: -ms-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
	background: linear-gradient(to right, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
 filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#134079', endColorstr='#134079', GradientType=1);
	height:100px;
	padding: 50px 100px 100px;
	margin-bottom: 0px;
}
footer a {
	color: #fff;
}
footer a:hover {
	color: #aaa;
}
.address {
	margin:0;
	padding:0;
	float:right;
	display:inline;
}
.address p {
	display:inline;
}
div.down {
	display:inline;
	margin:0;
	padding:0;
}
ul.list-inline {
	display:inline;
	margin:0;
	padding:0;
	margin-left:50px;
}
ul.list-inline li {
	display:inline;
	margin:0;
	padding:0;
}
ul.list-inline li a {
	display:inline;
	margin:0;
	padding:0;
	text-decoration:none;
}
footer span.copyright {
	width:100%;
	display:inline-block;
	text-align:center;
	padding:10px 0px;
}
<footer class="footercolor">
  <div class="down"> menu </div>
  <ul class="list-inline">
    <li><a href=><i class="fa fa-3x fa-facebook-square">f</i></a></li>
    <li><a href="#"><i class="fa fa-3x fa-instagram">i</i></a></li>
    <li><a href="#"><i class="fa fa-3x fa-twitter-square">t</i></a></li>
  </ul>
  <div class="address">
    <p>sample</p>
    <p>demo</p>
    <p>trail</p>
    <br>
    <p>p.7868 </p>
    <p>f.7868 </p>
    <br>
    <p>[email protected]</p>
  </div>
  <span class="copyright">@ all rights reserved</span> </footer>

Upvotes: 2

G.L.P
G.L.P

Reputation: 7217

Try like this: Updated Demo

CSS:

.address {
}
.down, .list-inline, .address {
    display:inline-block;   
    vertical-align:text-top;
    width:30%;
    margin-right:10px;
    background-color:#ccc;
}
ul{
    padding:0;
    margin:0;
    list-style-position: inside;
}
li{
    padding:10px;
}

Upvotes: 1

Related Questions