Alignment of text to the left can be achieved by using either relative or absolute

After researching several solutions, none seem to solve the issue I am experiencing. My code is meant to create two red colored boxes as shown below:

.redboxes-horz {
    width: 100%;
    margin-bottom: 50px;
    height: auto;
    top: 0;
    right: 0;
}

.redbox-horz-lg {
    width: 76.05%;
    background: rgba(200, 16, 46, 1);
    padding: 17px 20px;
    top: 0;
    right: 0;
    left: calc(23.95%);
    position: relative;
    height: auto !important;
    text-align: left !important;
}

.redbox-horz-sm {
    position: absolute;
    width: 22px;
    height: 22px;
    background: rgba(200, 16, 46, 1);
    position: absolute;
    bottom: -22px;
    left: calc(23.95% - 22px);
}

.redbox-horz-lg h1 {
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 31px;
    font-weight: normal;
    line-height: 1.1;
}
<div class="redboxes-horz">
    <div class="redbox-horz-sm"></div>
    <div class="redbox-horz-lg">
        <h1>Structural Discovery Branding Standards Heading</h1>
    </div>
</div>

This is the current appearance:

https://i.stack.imgur.com/6aAd0.png

The problem arises when trying to align the heading to the left. Changing the display to inline-block causes the entire CSS layout to malfunction.

htmlcss

Answer №1

If you're working with the class .redbox-horz-lg, consider experimenting with either align-content: justify; or align-content: left;. Alternatively, you can also test out align-items.

Answer №2

To style the .redbox-horz-lg class in CSS, use left:0;.

.redbox-horz-lg {
left:0;
}


.redboxes-horz {
    width: 100%;
    margin-bottom: 50px;
    height: auto;
    top: 0;
    right: 0;
}

.redbox-horz-lg {
    width: 76.05%;
    background: rgba(200, 16, 46, 1);
    padding: 17px 20px;
    top: 0;
    right: 0;
    left:0px;
    position: relative;
    height: auto !important;

}

.redbox-horz-sm {
    position: absolute;
    width: 22px;
    height: 22px;
    background: rgba(200, 16, 46, 1);
    position: absolute;
    bottom: -22px;
    left: calc(23.95% - 22px);
}

.redbox-horz-lg h1 {
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 31px;
    font-weight: normal;
    line-height: 1.1;
}
<div class="redboxes-horz">
                            <div class="redbox-horz-sm"></div>
                            <div class="redbox-horz-lg">
                                <h1>Structural Discovery Branding Standards Heading</h1>
                            </div>
                        </div>

Answer №3

Here are the updates I made, does this look like what you were expecting?:

.redboxes-horz {
  width: 100%;
  margin-bottom: 50px;
  border: solid;
  background-color: white;
  height: 80px;
  position: relative;
}

.redbox-horz-lg {
  width: 76.05%;
  background: rgba(200, 16, 46, 1);
  padding: 27px 10px;
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

.redbox-horz-sm {
  width: 22px;
  height: 22px;
  background: rgba(200, 16, 46, 1);
  position: absolute;
  bottom: -22px;
  left: calc(23.95% - 22px);
}

.redbox-horz-lg h1 {
  color: #fff;
  padding: 0;
  margin: 0;
  font-size: 1em;
  font-weight: normal;
  line-height: 1.1;
}
<div class="redboxes-horz">
  <div class="redbox-horz-sm"></div>
  <div class="redbox-horz-lg">
    <h1>Structural Discovery Branding Standards Heading</h1>
  </div>
</div>

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

Icons on the top banner that adjust to different screen sizes

I am still getting acquainted with Wordpress, so please bear with me if I use incorrect terminology or ask silly questions. I am eager to learn and improve. My website is focused on jewelry (using Kallyas premium), and I have a row of banner icons between ...

phphtmlcsswordpressresponsive

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

Helping individuals identify the HTML5 Geolocation notification

Currently working on a website that requires users to accept the browser prompt for location sharing. Many users seem to overlook this prompt, which can lead to issues. The main problem we are facing is that each browser displays this prompt differently: ...

javascripthtmlgeolocation

Solving dependencies for npm modules

I have a project where I am utilizing a custom library to share Vue components across various applications. To achieve this, I have added my component library as an npm module and included it in the application's package.json file, which is functioni ...

cssnode.jswebpackvue.js

Do HTML buttons without values get sent in a form submission?

When you have a button with the following code: <button class="button yellow" type="submit" name="button">Log in</button> and you submit it, what exactly gets sent to the server for this specific button that has a name attribute but no value ...

html

When the value is removed, it does not revert back to the initial filtered choices

After clearing the input, I want to display all the original li's again. The issue is that even though .value = '' clears the input, the filter remains active. I could really use some help with this as it's starting to get on my nerves ...

javascripthtmlfilter

Designing an interactive HTML table that adapts to various screen

Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...

javascriptjqueryhtmlcss

Styling the file input type in AngularLearn how to customize the

I've come across numerous queries on how to style an input type file, but I'm struggling to implement it in an angular context. So, what is the best way to customize the appearance of an input type file within an angular application? Below is t ...

javascriptjqueryhtmlangularjs

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Can the <v-toolbar-title> be fixed within a <v-navigation-drawer>? <v-card class="d-inline-block elevation-12"> <v-navigation-drawer hide-overlay permanent stateless height="440" value="true"> <v-toolbar color="whi ...

javascriptcssvue.jsvuetify.js

centered text positioned perfectly on a dynamically adjusting background

Seeking help to center text both vertically and horizontally within a circle background link that needs to be responsive. Setting the line-height equal to the height of the link is not an option, here's my code: html <a class="Previous" href="#"& ...

htmlresponsive-designvertical-alignment

Obtain the script's event feedback from the WebView and transfer it to React Native

My HTML script is used to display a module, but I encountered an issue with the eventHandler not responding. How can I ensure that the eventHandler in Web View triggers responses? I am not receiving any logs for the onSuccess, onError, or onClose methods w ...

htmlreactjsreact-nativewebview

Design a food selection with only CSS and HTML

I am working with a menu structure that looks like this: <ul class"menu"> <li> <a>item1</a> <ul> <li><a>subitem1</a></li> <li><a>subitem2</a></li> &l ...

htmlcssmenu

Guide to adding a theme switcher feature to your current React website

Currently, I am faced with a challenge involving two theme files, theme.js and theme-dark.js, within the context of a complex React-based website. Despite having already set up the site, I am struggling to find a way to allow users to seamlessly switch bet ...

cssreactjsmaterial-uithemes

Steps to establish the starting value as 'Concealed'

I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked. My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked? He ...

javascripthtmlcss

configuration of file types

While using Ipage as my web host, I encountered an issue with an Html document on my server. The problem arose because a json.z file was being read by the browser as "text/html" instead of "application/json; charset=UTF-8", as confirmed in fiddler. Is the ...

jsonhtmlmime-typesmime

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

javascripthtml

Turn off automatic HTML correction in Google Chrome

I'm currently developing a NODE.js app that utilizes Nunjucks as its view engine. To ensure the validity of the HTML being generated, I've implemented tests to check if all tags are properly closed. My approach involves spinning up the applicatio ...

htmlnode.jsgoogle-chromegoogle-chrome-headless

Is it possible to convert an image into text using CSS just for the purpose of printing

Imagine having a prominent banner at the top of a webpage that you want to print. Instead of depleting someone's ink by printing the entire banner image, is it possible to utilize CSS to substitute the image with text in H1 size? ...

cssimagetextheaderprinting

Trouble with HTML5 videos not functioning on Apple iOS gadgets

Having trouble playing my HTML5 videos on iOS devices, specifically iPhone 7.0 and iPad 7.0.4. Currently experiencing an issue where the iPad shows only an empty container and the iPhone displays a play button with a line through it. Any thoughts on what m ...

iosiphonehtml.htaccessvideo

Error: The function $(...).froalaEditor is not recognized | This issue is occurring within the $(document).ready(function(){}) block in J

When attempting to set HTML content of the Froala editor within a JSP using $(document).ready(), this error occurs. TypeError: $(...).froalaEditor is not a function | $(document).ready(function(){}) in JSP I read on a GitHub issue that placing jQuery sc ...

javascripthtmljqueryjspfroala