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. There is no issue between the columns. Would you please help me to fix the issue and complete my project?
I asked a similar question here. But I didn’t find the complete solution, which you can find in my comment in the selected right answer. That’s why, I have posted a new question here.
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-sm-4">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="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 id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="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 id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="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">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="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">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="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">
<img id="properties-image" src="https://i.pinimg.com/originals/5b/9b/45/5b9b451db9428e06be9b3af900cfefc4.jpg">
<h4>RM 1500</h4>
<div id="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-sm-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>
</body>
</html>
Here is the CSS code:
.property-store-container {
height: auto;
width: 100%;
}
#proterties-h2-p {
margin-bottom: 400px;
}
#properties-image {
height: 25%;
}
#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%;
}
/*-- //footer --*/
#footer-real-estate {
background-color: #464646;
height: 15%;
}
#visit-our-store-heading,
#contact-a-specialist-heading {
color: #f5f5f5;
}
Here is the CodePen.io link:
https://codepen.io/kanan292/pen/RBxboO
For some reason, the codes on CodePen.io is not generating web page as this one:
https://drive.google.com/open?id=1U_l3ls4e7uxdJntDGL8dtts3zE3wHIjD
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.
2
Answers
Change your
<img id="properties-image src="..."/>to<img class="properties-image src="..."/>you shouldn’t have more than one ID of an element on a page then add this to your cssEvery where you have
<div id="property-content></div>should be changed to<div class="property-content></div>Also change all
col-sm-4tocol-md-4The problem should be on your nested columns, bootstrap organize the space in 12 sections so you should use that 12 sections this way
This way you got the three columns well distribuited, but you have columns inside columns, thats not the idea