Ways to stack multiple DIV IDs on top of each other

Not quite sure how to phrase the title, but here it is.

https://i.sstatic.net/d2dYB.png

I want to shift the tables so that the headings are on the blue part of my page, while the body of the table remains in the grey section. I attempted using margin-bottom:-50px;, and as expected, this was the outcome. Below is the CSS and HTML code for my attempt so far!

How can I achieve this?

Blue section:

#section2 {
    background-color: #2aa3ef; /**blue**/
    padding-top:80px;
    padding-bottom:80px;
}

Grey section:

#section1 {
    background-color: #e6ecf0;
    padding-top:20px; padding-bottom:20px; /**bluey white**/
}

        <div class="col-md-4 col-sm-12">        
    <table class="points_table">
        <thead>
            <tr>
                <th><h4>Premium domains</h4></th>
            </tr>
        </thead>

        <tbody class="points_table_scrollbar">

              <!-- Table content goes here -->

        </tbody>
    </table>
htmlcsstwitter-bootstrap-4

Answer №1

To implement the changes needed, follow these instructions:

#section1 {
    background-color: #e6ecf0;
    padding-top: 0px; 
    padding-bottom: 20px; /**bluey white**/
    position: relative;
}

Replace with:

.points_table{
  top: -50px;
  position: absolute;
}

Adjust the 'top' value based on how much you want your table head to move up.

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

The color change functions are functional in IE9 and Firefox, but may not be compatible with earlier versions of IE or Chrome

A JavaScript function is used to change the colors of CSS rendered images in Internet Explorer 9 and Firefox. Is there a workaround for this issue or is it related to the code on the page? You can see this in action at . <!DOCTYPE html PUBLIC &quo ...

javascriptcssdom-events

Tips for accessing the names of subdirectories and files on a website

If we have the URL, is it possible to access the names of the files within the parent directory? Similar to how we can do in DOS by using the command "DIR" to view the list of files inside a folder. For example, if we have a URL like , I am curious to kno ...

php.nethtmlcss

What is the best way to compile an array of permissible values for a specific CSS property?

One interesting aspect of the CSS cursor property is its array of allowed values, ranging from url to grabbing. My goal is to compile all these values (excluding url) into an array in JavaScript. The real question is: how do I achieve this without hardco ...

javascriptcss

Limit the maximum height of a list within a fluid-width content container

I came across this link The layout works fine when the elements are limited in the #commentWrapper, but adding more items pushes everything downwards. Copying additional <li>test</li> items clearly demonstrates the issue. I want the input box ...

jqueryhtmlcssheightfluid-layout

Display the worth in a pop-up box

I am looking to display the form value in a pop-up window that opens after clicking the submit button. How can I achieve this? Here is my form: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> &l ...

javascriptphpjqueryhtmlajax

Is there a way to position my character at the exact center of my mouse click coordinates instead of the top left corner?

In my game, players can click on a 2D HTML5 canvas to set a point for their character to move to. However, I've noticed that when I click, the character appears in the lower right corner of where my mouse is clicked. After some research, I realized th ...

javascripthtml

Is it possible to utilize a contenteditable div in place of a textarea?

Is it possible to replace a textarea with a content editable div? Will the behavior be the same? Can data processing be done in the same way as with textarea data? ...

jquerycsshtml

Displaying photos locally in HTML is not supported

I've encountered an issue with my HTML code. I'm trying to load images from my local drive, and the path to the folder seems correct because I can open the images by ctrl + clicking on them. However, when I open my page using a live server or hos ...

htmlcssimage

Display a close button for every individual item and use JavaScript to conceal the current item

I have a list that contains input fields along with delete link elements. I want to display the delete link element when the user hovers over the respective input field. Additionally, clicking on the close button (X) should hide the entire list item (li) f ...

javascripthtmlcsseventsdom

Utilizing identical ID values multiple times to link to the identical location

I am currently working on a horizontal grid project with 3 image squares. My goal is to create an action where clicking on any grid section will anchor the user down to a slideshow box displayed below the grid. Below is an example of one grid section and ...

javascriptjqueryhtmlcss

What is the complete pathway in CSS?

Consider this scenario: within my CSS file, there is a line of code used to display an image - specifically, a label icon located in the sidebar. background-image:url(../assets/images/icons/arrow_state_grey_expanded.png); However, due to its relative pat ...

cssrelative-pathfilepathcodeigniter-2

The vertical alignment feature seems to be malfunctioning in Bootstrap 4

My goal is to center multiple images within their respective divs, but I am facing issues with vertical alignment not working as intended. Even the CSS classes d-flex justify-content-end and text-center are failing to align the icons side by side. I need t ...

htmlcssbootstrap-4

Bootstrap not functioning properly in selecting gallery items

Looking for some help with my website's gallery page development. I've included the HTML and JavaScript files below. However, I seem to be missing a selector ID as none of the pictures are changing and the categories aren't working. Any help ...

javascripthtmlcssbootstrap-4selector

Iterating over a range of values with _.each()

Can someone help me figure out why my syntax is incorrect for applying two values from different iteratees (day.classes and event.part) on line 5? <div class="days"> <div class="headers"> <% _.each(daysOfTheWeek, function(day) { %&g ...

javascripthtmlunderscore.jsclndr.js

CSS Tutorial: Creating a Dynamic Gradient Bar

I am looking to create a dynamic colored bar with a moving color gradient effect. Without using JavaScript, I want to achieve this effect using CSS 3 properties such as gradients and animations. This is a snippet of what I have tried so far: HTML: <b ...

htmlcss

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

javascriptcsssecurityfirefox

Presentation: Positioning Next Buttons Beside Slide Images While Maintaining Responsiveness

I am facing a challenge with my slideshow project. The slideshow consists of images and text on each slide, along with previous and next buttons that are aligned within the parent container. I am trying to align these buttons at the midpoint of each image ...

htmlcssresponsive-designslideshow

What is the best way to change the orientation of the Product List in WooCommerce to landscape

Is there a way to change our product list display to landscape orientation? The current portrait layout is not visually appealing due to excessive white space. I would greatly appreciate any guidance on how to resolve this issue. You can view our website ...

csswordpress

Place the collapsible button on the right side of the navigation bar

Looking to position the collapsible button to the right of the navbar in Bootstrap v4, I attempted wrapping the button in: <div class='nav navbar-nav navbar-right'> I also tried adding the float-xs-right class without any luck. A sample ...

csstwitter-bootstraptwitter-bootstrap-4

issues with rounded corners not functioning properly within frameset

I'm trying to display rounded corners in IE frameset, is there a way to do this? Check out the example below: index.html: <html> <head><title></title></head> <frameset rows="*,64" style="margin:0; padding: 0;" frame ...

css