Include an additional Div tag in the existing row

I've been attempting to include an additional div, but it consistently appears as the second row.. I want all of them to be on the same row and aligned with each other.

Here is the HTML code:

        
<div class="content-grids">
  <div class="wrap">
    <div class="content-grid">

      <div class="content-grid-info">
        <h3>All inclusive Packages</h3>
        <p>Airfares + Accommodation (ocean View) + 3 Meals daily + House Beverages + Activities (incl Kids Club)</p>

      <div class="content-grid-info">
        <h3>4 nights $1,299</h3>
      </div>

      <div class="content-grid-info">
          <h3>7 nights $1,189</h3>
      </div>

    </div>

  </div>
</div>

This is the CSS:


.content-grids {
  padding: 3.5em 0 3.7em 0;
  margin: 0 0 40px 0px;
}
.content-grid-info p{
    font-size: 0.875em;
    padding: 5px 0 5px 0;
    line-height: 1.5em;
}
.content-grid-info h3{
    font-size: 1.8em;
    font-weight: 400;

Despite making updates and changes in the style sheet, the issue persists.

htmlcsswidthdivision

Answer №1

there was an issue in the HTML code, as some div tags were missing.

Here is the corrected code that should work properly:

HTML

<div class="content-grids">
    <div class="wrap">
        <div class="content-grid">
            <div class="content-grid-info">
                <h3>All inclusive Packages</h3>
                <p>Airfares + Accommodation (Ocean View) + 3 Meals daily + House Beverages + Activities (incl Kids Club)</p>
            </div>
            <div class="content-grid-info">
                <h3>4 nights $1,299</h3>
            </div>
            <div class="content-grid-info">
                <h3>7 nights $1,189</h3>
            </div>
        </div>
        <div class="content-grid">
            <div class="content-grid-info">
                <h3>All inclusive Packages</h3>
                <p>Airfares + Accommodation (Ocean View) + 3 Meals daily + House Beverages + Activities (incl Kids Club)</p>
            </div>
            <div class="content-grid-info">
                <h3>4 nights $1,299</h3>
            </div>
            <div class="content-grid-info">
                <h3>7 nights $1,189</h3>
            </div>
        </div>
    </div>
</div>

You can view this code in action on this fiddle https://jsfiddle.net/yudi/yvpfxg8h/

Answer №2

Take a look at this code snippet:

  <div class="content-grids">
    <div class="wrap">
        <div class="content-grid float-left">
            <h3 class="content-grid-info float-left">Exclusive Vacation Packages</h3>
            <p class="float-left">Includes Airfare + Ocean View Accommodation + 3 Daily Meals + House Beverages + Activities (including Kids Club)</p>

            <div class="content-grid-info float-left">
                <h3 class="float-left">4 nights for $1,299</h3>
            </div>

            <div class="content-grid-info float-left">
                <h3 class="float-left">7 nights for $1,189</h3>
            </div>
        </div>
    </div>
</div>

For more information, visit: http://codepen.io/anon/pen/pyrraw

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

Displaying images with Javascript when they are clicked

How can I make a speech bubble appear when the image of the person is clicked? <div> <p style="float: left;"><img src="person.png" border="1px"></p> </div> <script> function bubblespeech() { document.getEl ...

javascripthtmlimagebuttonclick

Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto ...

htmlcss

Is concealing a button an effective strategy?

Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes ...

htmlcsstwitter-bootstrapfrontend

What's the best way to toggle the visibility of an input-group in Bootstrap?

Is there a way to properly hide and show a Bootstrap 5 input-group? You can see an example here: https://jsfiddle.net/o08r3p9u I'm facing an issue where once the input group is hidden, it doesn't show correctly when displayed again. How can I e ...

javascripthtmlcssbootstrap-5

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

When working with CSS, it becomes evident fairly quickly that certain styles are not universally compatible across different browsers. For instance, achieving a semi-transparent PNG required a convoluted solution for Internet Explorer like: filter: pro ...

cssstandards-compliance

Ways to adjust the font size in the title using HTML

Looking to adjust the text size within an h4 title. Hoping to make some letters smaller than others while keeping all in capital form. Any assistance is greatly appreciated. Thank you! ...

htmlcsswordpress

What is the best way to maximize the width of this element?

Check out my website: There's a div styled with the color #D9D9D9 This is the CSS code: #full_bar { background: #D9D9D9; width: 100%; height: 100px; } I want the div to span across the full width of the website and be stuck to the footer. An ...

htmlcsswordpress

Tips for eliminating the PHP form redirection issue

Having trouble with data insertion in MySQL and getting redirected to the PHP file after. Not ideal! Any suggestions on how I can display error or success messages within the same HTML file? index.html <form id="form" action="add_article.php" method=" ...

phphtmlmysql

One particular page is having trouble loading CSS, whereas it loads perfectly fine on a different page

I have two pages, 403.html and 404.html, both of which need to load the same style.css file. Strangely, when I visit the 403.html page, the CSS loads perfectly fine. However, when I navigate to the 404.html page, even though it has identical code with only ...

htmlcss

Troubleshooting: Angular 13 input radio not recognizing checked condition

Storing selectedKitchenId in localstorage, and checking if selectedKitchenId === kitchen.id to determine which radio button should be selected. Cannot figure out why the checked condition is not working as expected, even though when I use a strong tag to d ...

htmlangulartypescript

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...

htmlcssoverflow

Make sure that bootstrap is set to disregard the taller column heights

Is there a method to manipulate Bootstrap so that the first column of the second row is positioned just below the height of its corresponding column in the previous row? At present, each row adjusts its height based on the tallest column. <div class=&q ...

htmlbootstrap-4bootstrap-5

How can we eliminate all elements from jQuery except for the first and second elements?

HTML <div class="geo_select"> <h3>header 3</h3> in Above HTML code i want to remove all element except <h3> and default content<div> inside the <div class='geo_select'> in jquery.. How to remove all ...

javascriptjqueryhtmlcss

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Below is the code snippet I am currently using to change the color based on the character's name: I encountered an error indicating that the li tag was not properly closed, although it appears to be closed. However, there seems to be an issue during ...

javascripthtmlcssvue.js

Property float does not account for margin values

Currently delving into the world of the semantic-ui framework, I have been working with segments. Here is a snippet of my code: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery ...

htmlcsssemantic-ui

Can a list be transformed into a toolbar in a responsive design?

Here is my card with a nav section that includes multiple items (although I've only included one here for simplicity). <div class="col-md-3"> <div class="card"> <div class="card-header"> ...

cssbootstrap-4sass

The height of the container is not adjusted correctly after loading data via ajax which causes it to overlap with

My HTML code consists of a container with two columns (content and sidebar) and a footer. The content contains a horizontal list with li elements that are populated via ajax when the "Load More" button is pressed. I am using Bootstrap and testing on Chrome ...

jqueryhtmlcssajaxtwitter-bootstrap

Implementing MySQL in JavaScript code leads to various possibilities

I am working on a web application that requires retrieving values from a MySQL database. The process involves: PHP code generates an HTML page successfully. Clicking a button updates a cookie, which also works. Using the cookie in a MySQL query, which is ...

phpjqueryhtmlmysqlajax

The label and its .input-group in Bootstrap 5 are not aligned on the same line

<div class="input-group mb-3"> <label class="input-group-text form-floating ">Please Share Your Name *</label> <input type="text" class="form-control" placeholder="First Name&quo ...

htmlcssbootstrap-5

Tips for adjusting content that is 900px wide to fit properly on a mobile screen while maintaining its original width

https://i.stack.imgur.com/JELN5.png Despite trying various meta tag variations, I am struggling to get this image properly scaled and displayed in React.js. Any suggestions on how to resolve this issue would be greatly appreciated. ...

cssreactjs