Creating overlapping Divs with HTML and CSS

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.

Answer №1

To begin, simply delete

* {
   box-sizing: border-box;
}

and insert the following instead

.pricecontainer {
   display: inline-block;
}

So your updated code will be:

.pricecontainer {
  display: inline-block;
}

/* Generate three columns of equal width */
.pricecontainer .columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

/* Customize the list */
.pricecontainer .price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Apply shadows on hover */
.pricecontainer .price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Style for pricing header */
.pricecontainer .price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

/* Design for list items */
.pricecontainer .price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

/* Grey colored list item */
.pricecontainer .price .grey {
    background-color: #eee;
    font-size: 20px;
}

/* Styling for "Sign Up" button */
.pricecontainer.info {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Adjusting column width 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;
}

Your HTML code remains unchanged.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React: Issue with CSS heights in grid-container not updating when state changes

In a container div, I have three elements: headerContainer, diagramContainer, labelContainer. The container has a fixed height and I want all elements to fill it. The diagramContainer should adjust its height dynamically based on the labelContainer's ...

Challenges surrounding the password input type within HTML

On my ASP website, there is a section for adding user accounts after logging in. However, I am facing an issue where the fields for email and password are being auto-populated with values from the login page. The image below illustrates this problem. Any r ...

Attach bread crumbs to the top of the page

I want to attach breadcrumbs to the top of the navbar. Currently, I am developing an application using Angular and Bootstrap 4. app.component.html <nav class="navbar navbar-expand-lg navbar-toggleable-lg navbar-dark bg-dark sticky-top" style="position ...

Unveiling the mystery: Revealing a hidden input value post file upload

var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' &g ...

I'm having trouble with my carousel. I suspect it's the "link-rel" in the head tag that's causing the issue

Having trouble with my carousel - it's not navigating properly. When I check the console, it shows: Failed to find a valid digest in the 'integrity' attribute for resource '' with computed SHA-256 integrity 'YLGeXaa ...

I'm encountering a ReferenceError: CodeMirror is not defined, even though I've made sure to include all necessary elements. Do you have any suggestions on how to

I attempted various solutions for the issue at hand to no avail, prompting me to seek assistance here My goal is to format JSON and XML code in a textarea using CodeMirror. I downloaded the CodeMirror zip file and added it to my project folder, resulting ...

A limited-width div located on the right side

When I tried to align the div on the right with a max-width of 1200px on a page with an available width of 1600px, it did not work as expected. .csystem { display: flex; max-width: 1200px; flex-direction: column; justify-content: flex-end } < ...

Sending arguments from JavaScript to PHP via ajax

I am facing a challenge where I need to send a JavaScript variable to a PHP function. While I was successful in doing this with hard-coded values, I'm struggling when it comes to using variables. Here's an example of what worked for me: <butt ...

Instructions on how to change database entries utilizing text input fields, enabling users to apply modifications by selecting the 'update' button

I'm a beginner when it comes to PHP and MySQL. Right now, I have a webpage with multiple text boxes that display data from my database. I am looking for guidance on how to update this data by allowing users to make changes in the textboxes and then cl ...

Developing an interactive single-page website

My goal is to develop a PHP web application with an overlay container that features dynamic fields/forms. The idea is for users to fill out the form without being redirected from the main page they are on. Imagine being able to report a page error on a w ...

Troubleshooting Spring's difficulty in locating resource files (css, jsp...)

Currently, I am integrating a jsp file as a model from a Controller and aiming to incorporate CSS styles and JS libraries into the project structure. Project Structure Webcontent assets WEB-INF jsp For the configuration in web.xml: <web-app versio ...

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Currently, I am utilizing bootstrap cards in my project. The number of cards within a card-deck varies dynamically. However, I have encountered an issue where each card should occupy a width of col-md-4 (33%). Everything works fine when there are more than ...

Several iFrames embedded on the website automatically adjust to the same pre-set height

Apologies if this question has already been addressed, but I am struggling to properly articulate it. Here's the issue: I have a client's holiday accommodation website that uses three embedded iFrames for a Calendar, Booking Enquiry, and floorpla ...

Is it possible to execute JavaScript within an Android application?

Is there a way to utilize the javascript provided by a website on an Android device to extract and analyze the emitted information? Here is the javascript code: <script type="text/javascript" src="http://pulllist.comixology.com/js/pulllist/5b467b28e73 ...

What is the best way to personalize the HTML Filter in Power-Mezz?

I've been playing around with the HTML Filter feature in the PowerMezz library and I'm interested in customizing the filtering rules for a specific use case. Is this something that can be done? For instance, the default settings allow the style ...

What could be the reason that my Bootstrap dropdown menu is not appearing on my website

I am currently utilizing Angular in my project. I have incorporated bootstrap and jQuery via NPM install, and specified them as dependencies in angular.json. The navbar on my site contains a dropdown menu. When I hover over the dropdown menu, it should di ...

Sending iOS nowPlayingInfo data to web service

I am looking to create a solution for retrieving the currently active audio track on an iOS device and transmitting that data to a remote web service. Is there a way to achieve this using HTML 5 code that is compatible with Safari, or are dedicated apps d ...

Arranging the placement of list-group-item buttons

Looking for a way to create a list-group-item with two buttons that are equal in height and aligned to the right? Take a look at this example below: https://i.sstatic.net/II2nl.png While I have the basic structure in place, I'm having trouble gettin ...

What is the best way to conceal panels while a bootstrap is being utilized?

I have been working on a bootstrap panel that consists of three panels: Panel 1, Panel 2, and Panel 3. The functionality of this panel is working correctly under normal circumstances. My Approach: Clicking on Panel 1 should display its content while hid ...

Learn how to perform a post request in node js without triggering a page redirect or refreshing the form, all without using the preventdefault method

Is it possible to prevent the page from refreshing after sending data through an HTML form hitting a specific endpoint? I'm unsure about the best solution as there is no prevent default in nodejs, and I don't want the same page to redirect or re ...