Only one instance of a div with a table cell will function properly

I am facing an issue where I created a div with display:table-cell; and it appears as shown in the first picture, which is what I want. However, when I add another div, it changes to look like the second picture. All I want is for the text to be in the middle and the second div to be positioned below the first one.

Here is my code:

<div id="container">

<div id="over_asero">
    <p id="titel_text"> </p>

    <p id="sub_text"></p>

    <p id="sub_text"></p>
</div>

<div id="veiligheid">
    <p id="titel_text"> </p>

    <p id="sub_text"></p>

    <p id="sub_text"></p>
</div>

#container
{
position: relative;
width: 1140px;
height: 1500px;
margin: auto;
background-color: red;
}

#over_asero
{
position: relative;
width: 1140px;
height: 400px;
top: 150px;
z-index: 2;
display: table-cell;
vertical-align: middle;
}
#over_asero p
{
color: white;
font-family: 'Open Sans', sans-serif;
}
#titel_text
{
font-size: 16px;
}
#sub_text
{
font-size: 12px;
}

#veiligheid
{
position: relative;
width: 1140px;
height: 400px;
top: 550px;
z-index: 2;
background-color: blue;
display: table-cell;
vertical-align: middle;
}

Answer №1

Enclose table-cell divs within a parent div and apply the display table property, as illustrated below

<div class="parent_div">
   <div id="over_asero"></div>
</div>

<div class="parent_div">
   <div id="veiligheid"></div>
</div>

.parent_div{
  display: table;
}

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

Utilize Vue.js to sort by price bracket and category

Hello, I am currently new to working with Vue.js and I am attempting to create two filters - one for price range and the other for genre. Any guidance or assistance would be greatly appreciated. Below is a snippet of my code: ul class="filter-wrapper"&g ...

Extract the content within a div element and make changes to it

Here is a scenario: I need to retrieve the content of a div and then make modifications to it before inserting it into another div. See the code below: $("#loupe").on("click", function(){ $('#divBody').empty(); $('#divTitle').e ...

AngularJS: Solving the issue of controllers not exchanging data by utilizing a service

I am working with the following controllers and service: angular.module('myApp', []); angular.module('myApp').factory('ShareService', function() { var information = {}; information.data = ""; information.setD ...

How can I ensure the text remains centered within a div, even when there are buttons aligned to the left or

I have a CSS class called .text-align-center that I used to center text. .text-align-center { text-align:center; } However, I noticed that when there is a left or right arrow icon within the <div>, the text does not appear perfectly centered. Is ...

Ways to set control values with AngularJS

After retrieving a single record from the database for my detail view, I need to assign data to controls. Take a look at my code snippet below: var app = angular.module("MyProductApp", []); app.controller("ProductsController", function ($scope, ...

What could be causing the no-repeat functionality to fail on these background images, and what steps can be taken to prevent the list text from overlapping with the image?

UPDATE EDIT. There is still an unresolved issue with this problem. Although setting the background to no-repeat fixed the image repetition problem, the list item text still overlaps the background image and there is an extra tick to the left. Please refer ...

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

Utilize PHP to generate a table from data

I successfully created a table using information retrieved from my database, and everything is displaying as intended. However, I am facing an issue where adding a background color applies it to every row in the table. How can I add a background color wit ...

Switch between divs based on the current selection

var header = $("#accordion"); $.each(data, function () { header.append("<a id='Headanchor' href='javascript:toggleDiv($(this));'>" + this.LongName + "</a>" + "<br />", "&l ...

browsing through a timeline created using HTML and CSS

I am currently working on a web project that involves creating a timeline with rows of information, similar to a Gantt chart. Here are the key features I need: The ability for users to scroll horizontally through time. Vertical scrolling capability to na ...

Tips for avoiding incorrect data entry in input fields

Is there a way to prevent the input type number from having an undefined value? For instance, like shown in the image below: https://i.sstatic.net/z1pZH.png Any ideas on how to restrict the input to only accept plus or minus values? ...

Achieving targeted text display on specific viewports using the visible class in Bootstrap

I've recently delved into learning Bootstrap, and I'm experimenting with creating a responsive page where certain divs will only be visible on specific viewports. I used classes like visible-xs, visible-sm, visible-md, and visible-lg for the diff ...

What is causing the CSS3 tabbed area to be restricted?

Experimenting with CSS tabs found at http://css-tricks.com/examples/CSSTabs/: Sample six .w3c { min-height: 250px; position: relative; width: 100%; } .w3c > div { display: inline; } .w3c > div > a { margin-left: -1px; position: relative; left: 1 ...

What is the best way to line up three divs horizontally and center the contents inside each one?

I'm brand new to CSS and need some help simplifying things. I am trying to create 3 divs that are all the same size, placed next to each other, with centered content in each one. Currently, I have a central div with a rotating image, and on the left a ...

Suggestions for improving the smoothness of the Bootstrap toggle hide/show feature

Recently completed my bootstrap toggle hide/show feature and everything seems to be functioning correctly, except for the transition between the different contents. The borders appear jagged and not smooth when activating the toggle. I suspect there may b ...

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

Animation that increments to a predetermined value

I'm trying to create a counter animation that dynamically animates a value calculated by the checkboxes selected. The calculation is working fine, but the animation is not happening. http://jsfiddle.net/dbtj93kL/ $('input[type="checkbox"]&apo ...

What is the method for applying a stroke-width:1 to specific sides of SVG shapes?

When setting a stroke-width: 1 on a <rect> element in SVG, typically a stroke is placed on every side of the rectangle. Is there a way to specify a stroke width on just three sides of an SVG rectangle? ...

Concealing or revealing an image with jQuery when hovering

I currently have 3 <a> tags within my html, each containing 2 images. Specifically, the greyscale images are the ones that are visible while the colored ones are set to display:none. I am aiming to achieve a functionality where upon hovering over th ...

Prevent access to website during execution of background tasks

Whenever a user visits the homepage, I need to verify that default values on the database are in place (if this is not the correct location for the check, please advise). Here's what needs to happen: Determine if the database is empty (if not, skip ...