How to showcase a div outside of its container with a responsive layout

I am currently facing an issue where I need some floated elements to be displayed outside of a container on a Drupal page using an Omega-based theme. My current page structure is as follows:

<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
  <div class="container-12">
    <div class="pricing-main-background">
      <div class="grid-4 plan-box-orange">
      </div>
      <div class="grid-4 plan-box-green">
      </div>
      <div class="grid-4 plan-box-orange">   
      </div>
    <div class="pricing-subtext">
      some more text down here            
    </div>
  </div>
 </div>
</div>

Here is a concept of what I am aiming for (note the smaller boxes positioned outside the container):

Visual Aid

Could anyone provide guidance on how to achieve this without needing excessive CSS when the boxes stack at 480px?

cssresponsive-designoverflow

Answer №1

Is this the style you're looking for?

h2
{
    width:60%;
    border:1px solid black;
    border-bottom:0;
    margin:0 auto;
    text-align:center;
}
.grid-12
{
    width:60%;
    border:1px solid black;
    margin:0 auto;
    text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
    display:inline-block;
    width:30%;
    height:50px;
    margin-top:25px;
}
.grid-4:nth-of-type(1)
{
    position:absolute;
    left:-10%;
}
.grid-4:nth-of-type(3)
{
    position:absolute;
    right:-10%;
}

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

Is there a way to shift a background image pattern?

After searching extensively, I came up empty-handed and am seeking guidance on how to achieve a specific effect. Specifically, I am in need of a JavaScript or jQuery script that can smoothly shift a background image to the right within a designated div con ...

javascriptjqueryhtmlcss

Utilizing CSS flex to perfectly align buttons

Struggling to master the art of aligning buttons using flex. On desktop, everything looks perfect: https://i.sstatic.net/vpdXn.png Even in portrait mode on mobile: https://i.sstatic.net/jAAAk.png But when it comes to landscape view, things get a littl ...

htmlcssbootstrap-4flexbox

The information is not being stored in Excel despite the fact that the Excel document has been generated with a header

I have been working on a project that involves fetching book details from the Google Books API and using generative AI to create descriptions for them. I have successfully created an Excel file, but I am facing an issue with saving data inside it. It' ...

htmlcssflaskgoogle-books-apidata-handling

Requesting footer details to be displayed within the header section using jQuery dataTables

I'm currently working with jQuery dataTables and facing an issue. Due to a large number of records, I need to display footer information "Showing 1 to 2 of 2 entries (filtered from 3352 total entries)" in the header section right after the "Show Entri ...

phpjqueryhtmlcssdatatables

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action

I have a question regarding the Angular Material Sidenav component. I noticed that in the code below, when I increase the border-radius property to a certain value, the element seems to disappear. <mat-drawer-container class="example-container" ...

javascripthtmlcssangularangular-material

What is the best way to create a layout with two images positioned in the center?

Is it possible to align the two pictures to the center of the page horizontally using only HTML and CSS? I've tried using this code but it doesn't seem to work: #product .container { display: flex; justify-content: space-between; flex-w ...

javascripthtmlcssfrontend

Inline-block elements are cascading downwards following the initial sibling div

I have encountered an issue that I am struggling to identify the root cause of. Initially, I had three boxes aligned in a horizontal line as intended. However, upon adding titles and descriptions inside the boxes, they now appear staggered. What could be c ...

htmlcss

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

htmlcssangularangular-material

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

javascripthtmlcss

What is the method for converting a JSON string into an [object][object] format using Angular 6?

Is there a way to transform the data shown below into the [[object][object]] structure using Angular 6? resultArray = [{Q_id: "5bbee2fbbb34b98be0464c73", opt_id: 111},{Q_id: "5bbee2fbbb34b98be0464c73", opt_id: 113}] ...

htmlcsstypescriptangular6

Unable to access the suggestion list within the modal

I incorporate the PrimeNG AutoComplete feature within a PrimeNG Dialog, displaying a list of elements below the AutoComplete in the dialog. My objectives are: To set the max-height of the modal dialog to 300, and have a visible scrollbar if the total ...

javascripthtmlcssangularprimeng

How can I modify the font size of h1 and h2 elements in CSS?

I am currently working with a WordPress twenty eleven theme and I am trying to adjust the size of my headings. Specifically, when I enclose my headings in h1 and h2 tags like so: <h1>My h1 heading </h1> <h2> My h2 heading </h2> The ...

csswordpresshtml-heading

How can CSS files be shared among multiple projects within Visual Studio 2012?

I am working on a Visual Studio Project Solution that includes 3 separate projects. To streamline the process and avoid duplication, I aim to have a shared CSS file for all 3 projects since they all follow the same CSS rules. Despite trying the Add As Lin ...

c#cssvisual-studio-2010

Elements overlapped with varying opacities and responsive to mouse hovering

In this Q/A session, we will explore a JS solution for managing the opacity of overlapping elements consistently during hover. Objective Our goal is to create two transparent and overlapping elements, similar to the red boxes showcased below. These eleme ...

javascriptjqueryhtmlcssopacity

Arranging the placement of an arrow within an HTML dropdown menu

I'm struggling with positioning my custom arrow in select elements. Each select has a different width, and I need to ensure that the distance from the right edge of the select to the arrow is consistent across all of them. Currently, I am using backg ...

htmlcss

Issue with background image repeating incorrectly when resizing

I've recently added an image as the background for my website using the following style: #whole_wrapper{ background-image: url(../images/wrapper_bg.jpg); background-repeat: repeat-x; width: 100%; float: left; height: 116px; } ...

htmlcss

What is the best way to split a semicircular border radius in two equal parts?

Is there a way to halve the yellow line or remove it from above the red box, while keeping it below? Can this be achieved using just HTML and CSS, or is JavaScript necessary? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1 ...

javascripthtmlcsscss-animations

Responsive Text Carousel in Bootstrap 4

My attempt to create a carousel with text inside is not turning out as expected. When I resize the screen or view the website on a smartphone, the text becomes misaligned. Can anyone advise on how to resolve this issue? I've searched numerous websites ...

htmlcsstwitter-bootstrapbootstrap-4

The latest approach to creating a layout with a full 100% height using HTML5 and CSS3

After taking a break from coding websites, I've realized that HTML5 and CSS have introduced a lot of new features. I typically design sites with a fixed size header and footer, with the main content area in between. The default page should take up 100 ...

csshtmllayout

What are the steps to personalize Twitter Bootstrap with Less for changing the height of the Navbar?

I recently stumbled upon some interesting articles that explain how to customize various elements of Twitter Bootstrap using LESS. You can check out one of the articles here and find more information about Twitter Bootstrap here. However, I am still unsure ...

csstwitter-bootstrapless