Question posted in 
I am working on a real estate website project. I have already created Photoshop template and uploaded it on Behance. https://www.behance.net/csc103falld848
Right now, I am creating the static version of the real estate store template. I am facing an issue. I can’t keep the buttons side by side. I have tried my best. But I can’t align them properly side by side. Please, take a look at this image to realize the issue:
https://drive.google.com/open?id=1ZEaVUx9LhakYUhgedZYgfzIrjj22zEU1
Here is the HTML code:
<html>
<head>
<title>Kanon's Smartphone Store</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/dummy.css" rel="stylesheet">
<!-- FontAwesome icon fonts -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<!-- Custom Theme files -->
<!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />-->
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />-->
<link href="css/fasthover.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- Website Logo -->
<link rel="icon" href="assets/img/KS%20Large.jpg">
<!-- Animate.css -->
<link href="assets/css/animate.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section id="right-property">
<!-- HEADER
=================================================== -->
<header class="site-header" role="banner">
</header>
<div class="container property-store-container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="proterties-h2-p">
<h3 id="properties-h2">Luxurious Apartments in Malaysia</h3>
<p id="properties-p">Starting from RM 2000</p>
</div>
</div><!-- end col -->
</div><!-- row -->
</div><!-- container -->
</section>
<section id="properties-list" >
<div class="container ">
<div class="property-list-container">
<div class="row">
<div class="col-sm-10">
<div class="col-sm-8">
<div class="col-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div class="col-sm-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div class="col-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<div id="column-margin-top" class="col-md-4">
<img class="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div class="property-content">
Platinum Splendor, Putra Jaya Apartment<br>
<div id="font-awesome-icons-store-first">
<i id="icon-store" class="fa fa-bed"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-bath"></i><div id="icon-value">3</div>
</div>
<div id="font-awesome-icons-store">
<i id="icon-store" class="fa fa-square"></i><div id="icon-value">3</div>
</div>
<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<button class="button-call">Call</button>
<button class="button-email">Email</button>
</div>
</div>
<!--
<div id="column-margin-top" class="col-sm-4">
Pages
</div>
<div id="column-margin-top" class="col-sm-8">
<i class="fa fa-forward"></i>
<i class="fa fa-arrow-left"></i>
1 2 3 4 5
<i class="fa fa-arrow-backward"></i>
<i class="fa fa-arrow-right"></i>
</div>
-->
</div>
</div>
<aside class="col-sm-2">
<br>
<div id="rectangle">
<div class="col-md-4 search-rectangle" id="search-rectangle">
<i id="search" class="fa fa-search"></i>
</div>
<div class="col-sm-8" id="search-here-rectangle">
<input id="search-field" type="text" name="Search Here" value="Search Here" size="20">
</div>
</div>
<br>
<br>
<h3>Categories</h3>
<input type="checkbox" name="categories" value="Duplex">Duplex
<br>
<input type="checkbox" name="categories" value="Duplex">Apartments
<br>
<input type="checkbox" name="categories" value="Duplex">Townhouses
<br>
<input type="checkbox" name="categories" value="Duplex">Detached Houses
<br>
More...
<h3>Room</h3>
<input type="checkbox" name="room" value="1">1
<br>
<input type="checkbox" name="room" value="2">2
<br>
<input type="checkbox" name="room" value="3">3
<br>
<input type="checkbox" name="room" value="4">4+
<br>
<h3>Bath</h3>
<input type="checkbox" name="room" value="1">1
<br>
<input type="checkbox" name="room" value="2">2
<br>
<input type="checkbox" name="room" value="3">3
<br>
<input type="checkbox" name="room" value="4">4+
<br>
<h3>Price</h3>
<input type="checkbox" name="room" value="1">RM 500 - RM 1000
<br>
<input type="checkbox" name="room" value="2">RM 1000 - RM 1500
<br>
<input type="checkbox" name="room" value="3">RM 1500 - RM 2000
<br>
<input type="checkbox" name="room" value="4">RM 2000 - RM 2500
<br>
<h3>Purpose</h3>
<input type="checkbox" name="room" value="1">Purchase
<br>
<input type="checkbox" name="room" value="2">Rent
</aside>
</div>
</div>
</div>
</section>
<!-- FOOTER
=================================================== -->
<section id="footer-real-estate">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">MENU</h4>
<h4 id="visit-our-store-heading">BLOG / CONTACTS / AGENTS</h4>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">CONTACT</h4>
<h4 id="visit-our-store-heading">148, KUALA LUMPUR</h4>
<h4 id="visit-our-store-heading">MALAYSIA</h4>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-xs-12" id="no-1">
<h4 id="visit-our-store-heading">SOCIAL</h4>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-linkedin"></i>
<h5 class="copy">© Md. Ehsanul Haque Kanan</h5>
</div>
</div>
</div>
</div>
</section>
Here is the CSS codes:
.property-store-container {
height: auto;
width: 100%;
}
#proterties-h2-p {
margin-bottom: 400px;
}
#properties-image {
height: 25%;
}
img.properties-image{
display:block;
width: 100%;
height: 30%;
margin:0 auto;
}
#properties-list {
background-color: #c0c0c0;
}
.property-list-container {
padding-top: 20px;
}
#font-awesome-icons-store-first {
float: left;
}
#font-awesome-icons-store {
float: left;
margin-left: 20px;
}
#icon-store {
margin: 2px 0 0 0;
}
#icon-value {
float: left;
margin-left: 2px;
}
.button-call {
background-color: #464646;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin-top: 2px;
}
.button-email {
background-color: #170b0b;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin-top: 2px;
margin-left: 4px;
}
#column-margin-top {
margin-top: 20px;
margin-bottom: 20px;
}
/* #properties-list {
margin-bottom: 30px;
} */
.property-store-container {
height: auto;
width: 100%;
}
#icon-store {
margin: 2px 0 0 0;
}
#icon-value {
float: left;
margin-left: 2px;
}
/*-- //footer --*/
#footer-real-estate {
background-color: #464646;
height: 15%;
}
#visit-our-store-heading,
#contact-a-specialist-heading {
color: #f5f5f5;
}
</body>
</html>
Here is the CodePen.io link:
https://codepen.io/kanan292/pen/WKdrRP
I am really passionate about coding. I really need your help to complete this project. Then I will be able to move on backend development either with WordPress or Django or ASP.NET Core.
Looking forward to getting a great solution from you.
3
Answers
There is no room for them to be side by side. Make them smaller or make the parent element wider.
You can use bootstrap
This will align it side by side, then put width 100% and reduce your padding little bit
Try to wrap the buttons inside a div
Buttons are inline tags so they align themselves with the text you place before.
The div will place them in another row.