Vertical alignment is somewhat functioning but not completely

Could someone help me figure out why my green DIV is not vertically aligned in the middle of the red DIV and suggest a solution? Thank you! Link to JSFiddle

.wrapper-alt {

    margin-right: auto;
    margin-left: auto;
    width: 980px;
    display:table;
    border: 1px solid #000;
}   

.bigtext {
    color: #124191;
    font-weight: 600;
    font-size: 53px;
    text-align: right;
    line-height: 53px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.block-left-alt, .block-right-alt {
    display:table-cell;
    vertical-align:middle;
    padding:30px 0;
    height:100%;
    box-sizing: border-box;
}

.block-left-alt {
float: left;
background: red;
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width: 50%;
    text-align: right;
    padding-right: 10px;
}

.block-right-alt {
float: left;
background: green;
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width: 50%;
}

<div class="wrapper-alt">
<div class="block-left-alt bigtext">Why Choose<br>Our Services?</div>
<div class="block-right-alt"><ul class="bullets1-alt">
      <li><i class="fa fa-check"></i> Reason 1</li>
        <li><i class="fa fa-check"></i> Reason 2</li>
        <li><i class="fa fa-check"></i> Reason 3</li>
      </ul>
</div>
</div><!-- End Wrapper -->

Answer №2

Check out the Unique Demo Here!

In order to manipulate the position of the <div>, you can utilize the float property. By using float, the <div> is taken out of the normal flow of objects, making it difficult to set its height to 100%.

To address this issue creatively, consider matching the background color of the parent <div> with that of the smaller child <div>. You can achieve this by adding background: green; to the CSS styling of the .wrapper-alt class.

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

How can we develop play buttons for Facebook timelines similar to those found on Spotify?

Is it possible to create an HTML5 player that can be embedded on Facebook timelines, similar to the way Spotify has special privileges as a Facebook partner? I'm looking to provide a list of play buttons that, when clicked, will play songs sequentiall ...

Customizing colors in React Material UI

Can colors in Material UI be overridden without the use of JS? Is it possible to override colors using CSS alone? ...

Is it possible to stop Angular requests from being made within dynamic innerhtml?

I have a particular element in my code that looks like this: <div [innerHtml]="htmlContent | sanitiseHtml"></div> The sanitiseHtml pipe is used to sanitize the HTML content. Unfortunately, when the htmlContent includes relative images, these ...

Adjusting the width of a nested iframe within two div containers

I am trying to dynamically change the width of a structure using JavaScript. Here is the current setup: <div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px"> <div style="width:800px;"> <iframe id="notReliable_C ...

5 horizontal navbar with dropdown menu in Bootstrap

I am currently utilizing bootstrap 5. Is it possible to display my navbar menus horizontally like the image provided? show submenus horizontally as shown in this picture I would also like to implement submenu for other submenus up to 4 levels deep. Any ...

Accessing a specific segment of HTML using Java

Attempting to navigate through a bunch of HTML, I'm aiming to isolate specific sections. I'm specifically looking to retrieve 'THISISTHEBITIWANT' from the following HTML code. <li class="aClass"> <a href="example/THISISTHEB ...

Utilize the appendTo() function and make a switch to dynamically insert content stored in variables into a specified

I am working on developing a page with a central content div, where users have the ability to choose various options that will introduce different additional content. This added content will then present more opportunities for adding new elements, ultimate ...

What are some ways to style an image that has been added using JavaScript using CSS?

I utilized a JavaScript function to add an image, which looked like this: function show_image(src) { var img = document.createElement("img"); img.src= src; document.body.appendChild(img); } But when I attempt to change its style using CSS: img ...

What is the best way to eliminate a CSS style from a div?

I have implemented jQuery Autosize to automatically adjust the height of textarea elements. It works perfectly when I focus on the textarea element. However, when I blur out of the textarea, I want to reset the height to its default value. I am unsure of ...

Conceal content with transparent layer

Recently, I've been working on an animation where the logo is unveiled as a div moves downward. The div itself has a transparent background. I'm curious if it's feasible to hide parts of the logo behind the transparent div? <div class=" ...

Tips for incorporating a personalized touch to your radio buttons

Is there a way to customize the appearance of radio buttons in React or HTML elements, such as the screenshot below? I want to maintain the display of the number No.01 followed by the label next to it. If you have any suggestions or solutions, please shar ...

Tips for avoiding the initial rendering of react components on a page when styled-components are not yet loaded

I have developed a unique custom component library using React and styled-components for creating reusable components. I then imported this library into my nextJS project, but I noticed that the styles from the custom component library are not applied duri ...

What steps can be taken to add a radio button group to a form in order to choose between the smoking and non-smoking sections of a restaurant?

I'm trying to replicate the functionality of radio buttons within a bootstrap form-group, where a line in a form contains multiple buttons ("btn btn-success" for example) that can be selected, but only one at a time. I am aiming for an output like thi ...

What could be causing the read-only error in my presentation?

My website has always had a small slider that worked perfectly, but now an error message keeps popping up: Error: "myIndex" is read-only This is the JavaScript code in question: const myIndex = 0; carousel(); function carousel() { let i; const x = ...

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

As a relatively new user to Laravel with previous experience using older versions of Foundation, I am currently in the process of setting up a new Laravel project. My goal is to integrate the Foundation framework into my project, but I find myself a bit co ...

ways to halt a noise once an animation is complete

I don't have much experience with coding in general, but somehow I've made it this far. Now I'm stuck on the final piece of the puzzle. This is related to a Twitch alert that I'm setting up through 'Stream Elements'. The iss ...

Access the value of a variable passed from the view to the controller

Is there a way to retrieve a dynamically generated value from the view to the controller in AngularJS? <ng-option ng-repeat="w in details track by $index"> <div class="program-grid-row table-row" > <div> <a class= ...

An error occurs when trying to access data from the cities of a specific state. The error message reads: "Unable to retrieve property 'data

An error occured: Cannot read property 'data' of undefined at Object.city The issue I am facing is that I am dynamically calling the state parameter. When I use cities.UP.data, it displays the correct result. However, when I try to add cities.st ...

Learn how to utilize Jquery to create a dynamic slide effect that toggles the

I am looking to change a banner on click functionality. Currently, I have hidden the 2nd banner and banner 1 is displayed. When the arrow is clicked, I want banner 1 to hide and banner 2 to show. The challenge is that I attempted using HTML for this task. ...

Having issues with implementing Bootstrap 4 dynamic nav-pills in PHP CodeIgniter

When I select different product categories, only the items from the active category are displayed. When I click on another nav-item, the previously displayed items remain unchanged and I'm unable to change the class "show active" in the tab-panes. Co ...