Jyotishmoy Jyotishmoy - 4 months ago 9
CSS Question

How to display contents of several div tags in a same line

I have written code to display an image inside an div tag and text related to it below the image in different div. But i have now 4 div tags and 2 images. but i want to align them in the same row. but it is getting displayed below the other div tags like this.. In the screenshot u can see i have added a image and below the image, text saying browse base layouts. both of them are in different div tags.. and then u can see i have added another image and text below the image as easy matchmaking strategy. and these two are also in different div tags.

but now i want to align both images on the same line. but they are now aligned one below the other.. can anyone please help me how to arrange them in the same line.?? it would be of great help..
here is the html code:-

<!doctype html>
<html>
<head>
<link href="Layout.css" rel="stylesheet" type="text/css" />
<link href="Menu.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<div id="Holder">
<div id="Header"></div>
<div id="Heading1"><center><font size="+2" color="#FBFBFB">-Follow Us At-</font></center></div>
<div id="Heading1content"><center>
<a href="#"><img src="images/download.png" alt="Facebook" width="60" height="55" title="Facebook"/> </a> &nbsp;
<a href="#"><img src="images/images.jpg" width="60" height="60" alt="Google+" title="Google+"/></a> &nbsp;
<a href="#"><img src="images/download.jpg" width="64" height="60" alt="Twitter" title="Twitter"/></a> &nbsp;
</center></div>
<div id="Navbar">
<nav>
<ul>
<li><a href="#"> HOME</a> </li>
<li><a href="#">LOG IN</a></li>
<li><a href="#">BLOGS</a></li>
</ul>
</nav>
</div>
<hr/>
<div id="Heading2"><center><font size="+2" color="#FFFFFF">-Hi Clasher! What Are You Looking For?-</font></center> </div>
<div id="polaroid" align="center">
<a href="#"><img src="images/IMG-20160802-WA0012.jpg" alt="Base Layouts" title="Base Layouts"/></a>
</div>
<div id="text" align="center"><center><font size="+2" color="#F7F4F4"><a href="#">Browse Base Layouts</a></font></center></div>
<div id="polaroid">
<a href="#"><img src="images/IMG-20160802-WA0014.jpg" alt="War Strategy" title="Easy War Matchmaking Strategy"/></a></div>
<div id="text"><center><font size="+2" color="#F7F4F4"><a href="#">Easy War Matchmaking Strategy</a></font></center></div>
<hr/>
<div id="footer1">
</div>
<div id="footer2">
<center>
<font color="#F7F4F4" size="+1">Made With Love For All Clashers <br/>
&copy; Brothers Gaming 2016</font>
</center>
</div>
</div>
</body>
</html>


Here is the css codes..
Layout.css:-

#Holder {
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
}
#Header {
height:200px;
background-image:url(images/main.jpg);
background-color:#CCCCCC;
background-repeat:no-repeat;
background-position:center;
margin-bottom: 5px;
}
#Heading1 {
height: 36px;
line-height: 32px;
background-color:#0B6D96;
margin-bottom: 11px;
}
#Navbar {
height: 55px;
margin-top: 8px;
margin-left:24%;
background-color:rgb(13, 13, 13);
width: 450px;
padding: 3px;
}
#Heading2 {
height: 36px;
background-color: #0B6D96;
margin-bottom: 11px;
line-height: 32px;
}
#polaroid{
width:45%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#text{
height:35px;
background-color:#253FB7;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom:11px;
width:45%;
line-height:32px;
}
#text a{
text-decoration:none;
color:#F7F4F4;
display:block;
}
#footer1{
height:200px;
width:900px;
background-color:#f0e6ff;
margin-top: 11px;
}
#footer2{
height:55px;
width:900px;
background-color:#000000;
line-height: 27px;
}


And Menu.css:-

nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
float: left;
display: block;
width: 150px;
height: 55px;
text-align:center;
line-height: 57px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:22px;
}
nav ul li a {
text-decoration:none;
color:#FFF;
}
nav ul li:hover {
background-color:rgb(242, 242, 242);
}
nav ul li:hover a {
display:block;
color:#000000;
}


Here is the site: http://www.brothersgaming.16mb.com/Home.html

Answer

You should use a container div that contains the image and text, and that use the css float property. Also remember that you should use classes for objects that you use multiple times and id's for objects that only occur once.

HTML

<div class="container">
<div id="polaroid" align="center">
<a href="#"><img src="images/IMG-20160802-WA0012.jpg" alt="Base Layouts" title="Base Layouts"/></a>
</div>
<div id="text" align="center"><center><font size="+2" color="#F7F4F4"><a href="#">Browse Base Layouts</a></font></center></div>
</div>
<div class="container">
<div id="polaroid">
<a href="#"><img src="images/IMG-20160802-WA0014.jpg" alt="War Strategy" title="Easy War Matchmaking Strategy"/></a></div>
<div id="text"><center><font size="+2" color="#F7F4F4"><a href="#">Easy War Matchmaking Strategy</a></font></center></div>
</div>

CSS

#polaroid{
width:100%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#text{
height:35px;
background-color:#253FB7;   
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom:11px;
width:100%;
line-height:32px;
}
.container{
width:45%;
  float:left;
} 

CSS float Property Documentation