John Doe John Doe - 6 months ago 9
CSS Question

Why do properties of a SPECIFIC div element spread to other separate div elements?

I made a small practice website.
I came up with a problem that is kind of frustrating.

I made a div as follows:

<div class="work-process">

<div class="container" align="center">

<div class="col-md-12">

<p class="takeaway"> Learn about our creative & unique work process </p>

</div>

<div class="col-md-12 btn-column">

<a href="aboutus.html">

<div class="btn btn-workp">

<p class="button-text"> Learn More </p>

</div>

</a>

</div>

</div>

</div>


I set the background image of this div, but instead of just setting this small div section, it also made the previous div have the same background-image. In mobile format, the previous div no longer shares the image but this div ("work-process") does and is in the middle overlapping the previous div. When I inspected the element in Chrome, "work-process" seems to span across the ENTIRE page. Why is this?

The CSS:

h1, h2, h3{
font-family: 'Raleway', sans-serif;
}
p{
font-family: 'Raleway', sans-serif;
}
a{
font-family: 'Raleway', sans-serif;
}
.top-infobar{
background-color: #1A1C27;
}
.top-infobar p{
color: grey;
font-family: 'Arimo', sans-serif;
padding-right: 2%;
padding-left: 2%;
padding-top: 4px;
margin-top: 2px;
display: inline-block;
}
.top-infobar p:hover{
color: white;
}
.navbar{
margin-bottom: 0;
border-radius: 0
}
.navbar-default a{
color: #2164FF;
}
#external_links a{
font-size: 110%;
}
.icon-bar{
background-color: white;
}
/* Jumbotron */
.humbotron{
background-image: url("images/nyc.jpg");
background-repeat: no-repeat;
background-position: 56% 25%;
background-attachment: fixed;

}
.humbotron h1{
margin-top: 15%;
text-transform: uppercase;
font-size: 500%;
display:inline-block;
color: white;
border: 1px solid white;
padding-right: 5%;
padding-left: 5%;
}

.hook p{
color: white;
font-size: 150%;
margin-top: 1%;
}
.hook2 p{
color: white;
font-size: 150%;
}
@media screen and (max-width: 480px) {
.humbotron h1{
font-size: 350%;
}

}
.lm-row{
margin-top: 5%;
padding-bottom: 5%;

}
.button{
border: 1px solid #ffffff;
padding: 10px;
}
.lm-row a{
text-decoration: none;
color: #ffffff;
font-size: 100%;
}
.button:hover{
background-color: #ffffff;
}
.lm-row a:hover{
color: black;
}

/* Second page */
.desc-page{
height:100vh;
}
.header2{
margin-top: 2%;
text-transform: uppercase;
}
.header-underline{
border-color: #acadad;
max-width: 50%;
}
#laptop-img-sec{
margin-top: 5%;
}
.laptopimg img{
max-width: 100%;
}
.all-descs{
height: 100%;
}
#images-folder{
width: 100px;
float: left;
}
.all-descs:hover #circle{
background-color: #90C3D4;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.all-descs{
margin-bottom: 5%;
}
.complimentary-desc h3{
text-transform: uppercase;
}
/* Work Process advert */
.work-process{
background-image: url('images/paint.jpg');
padding-bottom: 5%;
}
.takeaway{
font-size: 200%;
padding-top: 5%;
color: white;
}
.btn-column{
margin-top: 3%;
}
.btn-workp {
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 10px 20px 0px 20px;
border: solid #ffffff 1px;
text-decoration: none;
}
.btn-workp:hover {
background: #ffffff;
text-decoration: none;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}


All HTML:

<!DOCTYPE html>
<html>

<!-- Head -->
<head>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width">
<title> Coherent </title>

<!-- JQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Bootstrap -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<!-- CSS -->
<link rel="stylesheet" type="text/css" href="home.css">

<!-- Raleway font -->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<script src="js/bootstrap.min.js"></script>

<!-- Other font -->

<link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>

</head>
<!-- End of Head -->

<body>
<div class="top-infobar">

<p> <span class="glyphicon glyphicon-phone"> </span>(647)-550-3998</p>

<p> <span class="glyphicon glyphicon-envelope"> </span> info@coherent.ca </p>

</div>

<!-- Navigation Bar -->
<div class="navbar navbar-default">

<div class="navbar-header">

<a href="home.html" class="navbar-brand"> Coherent</a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation </span>

<div id="collapse-button">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</div>

</div>

<div class="collapse navbar-collapse">

<ul id="external_links" class="nav navbar-nav">

<li><a href="home.html">Home </a></li>

<li><a href="aboutus.html">About Us </a></li>

<li><a href="services.html">Services </a></li>

<li><a href="contactus.html">Contact Us </a></li>

</ul>

</div>

</div>

<!-- Homemade Jumbotron -->
<div class="humbotron col-md-12">

<div class="container">

<div class="row">

<div class="header col-md-12" align="center" id="main_header">

<h1> Coherent </h1>

</div>


<div class="hook col-md-12" align="center" id="first_hook">

<p> Hello from the other side </p>

</div>

<div class="hook2 col-md-12" align="center" id="second_hook">

<p> To tell u I'm sorry </p>

</div>

<div class="lm-row col-md-12" align="center">

<a href="services.html" id="lm-link" class="button">Learn More</a>

</div>

</div>

</div>

</div>

<div class="desc-page col-md-12">

<div class="container">

<div class="row">

<div class="header2 col-md-12" align="center">

<h2 style="font-size: 300%"> <strong> What you get </strong> with Coherent </h2>
<hr class="header-underline">

</div>

</div>

</div>

<div class="row" id="laptop-img-sec">

<div class="laptopimg col-md-6">

<img src="images/adele.png" align="center">

</div>

<div class="img-qualities col-md-6">

<div class="row">

<div class="all-descs col-md-12">

<img id="images-folder" src="images/skilled-team.png">

<div class="complimentary-desc">

<h3> A <strong> skilled </strong> and <strong> reliable </strong> team </h3>

<p> With Coherent, you get a reliable, professional, and experienced team to tend to your graphic design and social media needs </p>

</div>

</div>

</div>

<div class="row">

<div class="all-descs col-md-12">

<img id="images-folder" src="images/professional-services.png">

<div class="complimentary-desc">

<h3> <strong> Professional </strong> services </h3>

<p> You can be assured a professional job and final finish. Take a seat, and let the experts handle this </p>

</div>

</div>

</div>

<div class="row">

<div class="all-descs col-md-12">

<img id="images-folder" src="images/fast-and-efficient.png">

<div class="complimentary-desc">

<h3> <strong> Fast </strong> and <strong> Efficient </strong> services </h3>

<p> When you have made an order, we ensure that you are our top priority until its finished. </p>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="work-process">

<div class="container" align="center">

<div class="col-md-12">

<p class="takeaway"> Learn about our creative & unique work process </p>

</div>

<div class="col-md-12 btn-column">

<a href="aboutus.html">

<div class="btn btn-workp">

<p class="button-text"> Learn More </p>

</div>

</a>

</div>

</div>

</div>


</body>
</html>

Answer

The issue is because your other divs are floating, hence work-process background takes up whole page.

To fix this, disallow any floating elements besides the div work-process, Add below css:

.work-process{
clear: both;
}
Comments