https://i.sstatic.net/EC1X3.png
Can someone assist with why these divs are overlapping? I have the pricing divs within a single div element pricecontainer
. The issue seems to be that the green background of the div
Start with your personalized quote here
is being 'underlapped'.
The layout should look like this, but with the price containers positioned above it:
https://i.sstatic.net/FC2SD.png
Here is the CSS code:
<!--
Styling for the pricing info box
-->
* {
box-sizing: border-box;
}
/* Create three columns of equal width */
.pricecontainer .columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.pricecontainer .price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.pricecontainer .price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* Pricing header */
.pricecontainer .price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.pricecontainer .price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.pricecontainer .price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.pricecontainer.info {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
.pricecontainer .columns {
width: 100%;
}
}
<!--
End of styling for pricing info box
-->
.quote {
margin-top: 100px;
width: 100%;
}
.quoteheader {
font-size: 30px;
font-color: white;
background-color: #00A63F;
color: white;
text-align: center;
}
.quotebody {
margin-top: 5vh !important;
width: 50%;
margin: 0 auto;
}
.button {
text-align: center;
}
Now, let's take a look at the appropriate HTML code:
<div class="pricecontainer">
<div class="columns">
<ul class="price">
<li class="header">Blogs</li>
<li class="grey">$ 74.99</li>
<li>One page designed just for a blog.</li>
<li>Simple admin page to update blog.</li>
<li>Register and Login page to give access to post updates on blog.</li>
<li>Pick the colors you want us to design with.</li>
<li>+ More</li>
<li class="grey"><a href="#" class="info">Sign Up</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Personal</li>
<li class="grey">$ 89.99</li>
<li>Home page designed for you.</li>
<li>Make your skills look even better online.</li>
<li>Image slideshow's</li>
<li>Pick the colors you want us to design with.</li>
<li>+ More</li>
<li class="grey"><a href="#" class="info">Sign Up</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Small Business</li>
<li class="grey">$ 199.99</li>
<li>Home page with navigation bar and your graphics.</li>
<li>Allow online purchases.</li>
<li>Register and Login page to allow online purchases.</li>
<li>About-Us/Contact pages.</li>
<li>Pick the colors you want us to design with.</li>
<li>+ More</li>
<li class="grey"><a href="#" class="info">Sign Up</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Forums</li>
<li class="grey">$ 249.99</li>
<li>Home page with navigation links.</li>
<li>Simple admin page to give special access.</li>
<li>Register and Login page.</li>
<li>Create topics and sub-topics.</li>
<li>Pick the colors you want us to design with.</li>
<li>+ More</li>
<li class="grey"><a href="#" class="info">Sign Up</a></li>
</ul>
</div>
</div>
<div class="bodycontainer">
<div class="quote">
<div class="quoteheader">
Start with your personalized quote here!
</div>
<div class="quotebody">
<form action="quote/quote.php" method="post">
<?php
if(!isset($_SESSION["active"])){
?>
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name...">
</div>
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name...">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email...">
</div>
<?php
}
?>
<div class="form-group">
<label for="reason">What is this quote for?</label>
<input type="text" class="form-control" id="reason" name="reason" placeholder="Describe what type of website this will be for...">
</div>
<div class="button">
<button type="submit" name="start" class="btn btn-default">Lets Start!</button>
</div>
</form>
</div>
</div>
</div>
If anyone can provide assistance or feedback, it would be greatly appreciated. Thank you.