"Struggling with vertical alignment in my scenario, any tips on how to achieve

Question

"Struggling with vertical alignment in my scenario, any tips on how to achieve

I'm trying to vertically align my texts while ensuring that the green background div covers the entire height of the red color div. Right now, the green div only covers 90% of the red div and I'm not sure why. Can someone please explain what's happening and help me out?

Here is my HTML code:

<div id='wrapper'>
   <div class='head'></div>
   <h2 class='title'>Warm-Up</h2>
</div>

And here is my CSS code:

.title{
    display: inline;   
    padding-left: 15px;
    vertical-align: middle;    
    margin: 0;
}

.head{
    width: 30px;
    height: 50px;
    display: inline-block;
    background-color: #A9D075;
}

#wrapper{
    width:200px;
    background-color: red;
}

You can also view it on this link.

Thank you.

html css

Answer 1

Answer №1

Tutorial http://example.com/tutorial

To improve your html structure, you should make some style changes:

.header {
    display: inline-block;
    padding-left: 60px;
    vertical-align: middle;
    margin: 0;
    line-height:50px;
}
.topbar {
    position:absolute;
    left:0;
    width: 40px;
    height: 100%;
    display: inline-block;
    background-color: #FAC748;
}
#container {
    position:relative;
    width:250px;
    height:50px;
    background-color: blue;
}

Answer 2

Tutorial http://example.com/tutorial

To improve your html structure, you should make some style changes:

.header {
    display: inline-block;
    padding-left: 60px;
    vertical-align: middle;
    margin: 0;
    line-height:50px;
}
.topbar {
    position:absolute;
    left:0;
    width: 40px;
    height: 100%;
    display: inline-block;
    background-color: #FAC748;
}
#container {
    position:relative;
    width:250px;
    height:50px;
    background-color: blue;
}

"Struggling with vertical alignment in my scenario, any tips on how to achieve

Answer №1

Similar questions

Create a scrollable div within a template

Having trouble with applying a custom class to React Bootstrap tabs?

Determine the hue of the scrollbar

Can a Chrome App access a user's files on their hard drive with proper permissions?

Leveraging AJAX for implementing PHP scripts

Add a touch of shadow to a stationary top banner as you scroll through the page

Creating layered images in HTML 5 Canvas using multiple images

When resizing the browser window, this single horizontal page website does not re-center

How can you create an ordered list with letters and parentheses using HTML5 and CSS?

Retrieving the class ID when clicked

The correct way to modify the VB property name for display in Razor

How can I replicate the functionality of a div mimicking a select element using javascript upon clicking away from the element?

issue with retrieving HTML data from PHP and converting it to JSON

The integration of Express server with static ejs files, CSS, and JavaScript is experiencing technical difficulties

Can the presence of buttons and links improve mobile responsiveness?

What is the method for aligning an <img> to the right within a Bootstrap 4 card-body?

Issues with Firefox's flexbox functionality are preventing it from working

Issue arises when attempting to submit multiple form fields with identical 'name' attributes, preventing the fields from being posted

The `class="d-none d-lg-block"` is a handy feature in Bootstrap for hiding elements

Hiding a button based on the visibility of another button in the user's viewport