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

Conceal the initial modal beneath the overlay when the second modal is activated

I have a situation where I am using a modal that contains a button to trigger a second modal. The issue is that the overlay of the second modal does not hide the first modal, it simply darkens the background. How can I make the overlay of the second modal ...

jquerycsstwitter-bootstrapmodal-dialogoverlay

How can I add seconds to the jquery datetimepicker plugin?

Looking to implement the datetimepicker plugin from here, but I'm having trouble finding information on how to include the seconds part. Is there a way to add seconds to this plugin? It's a crucial requirement, so any suggestions for another good ...

javascriptjqueryhtmlnode.jsdatetimepicker

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

Issue with Checkbox Selection In my project, I have implemented two tabbed containers for grid and list view. Each container contains multiple elements called info boxes with checkbox inputs. Whenever a checkbox is checked, the background color of the res ...

jqueryhtmlcss

Tips for eliminating the bottom border on a nav-tab in Bootstrap 4

When a vertical navigation menu item is selected, a border appears below the item. How can I remove this border? .nav-tabs li, .nav-tabs li a { border-bottom: none; } Here is a picture of the border: ...

cssbootstrap-4

Accessing administrator account through mysqli and PHP authentication

I have been working on implementing a member login feature for my website. Everything is functioning properly for regular users, but I am encountering an issue with the admin login credentials. Despite entering the correct details, I am unable to log in as ...

phphtmlmysqliauthentication

Tips on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

My CSS contains IDs that look like this: <style> .HIDE-DISPLAY-k { background-color: orange; position: fixed; width: 100%; height: 100%; top: 10px; bottom: 0px; left: 10px; right: 0px; overflow: hidden; } #SHOW- ...

javascriptjqueryhtmlcss

Using CSS sprites to style text links

I've been attempting to incorporate an image with various icons for text links in an unordered list, but I can't seem to display just one icon with some space next to it for the text. The code I have so far is: http://jsfiddle.net/XyVtq/2/ This ...

htmlcss

Unveiling the Secrets: Scraping HTML Code from a Webpage Dynamically Using Selenium and Python

Learning Selenium has been quite challenging for me as I am just getting started. I have a total of 3 buttons on a webpage, and after each button click, my goal is to retrieve the entire HTML code of the page (I am comfortable using BeautifulSoup for any n ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Pseudo-element fails to display in React when applied to a paragraph tag, even with display block property set

I am experiencing an issue where the pseudo element ::after is not appearing in my browser. I am currently working with React.js and Material UI's makeStyles. Here is the code snippet causing the problem: modalTitle: { borderBottom: '2px sol ...

javascriptcssreactjsmaterial-uijsx

What is the best way to locate the offspring of a parent div using its data attribute?

If I have a container div called dvMainDiv with multiple child divs inside it, all added programmatically, how can I retrieve a specific child div based on its data-id attribute? <div id="dvMainDiv" class="dvMainDiv"> <div id="dvChildDiv" cla ...

javascriptjqueryhtml

What is the best way to rate a particular image?

while ($row = mysqli_fetch_array($result)) { echo ""; echo "<div id='img_div'>"; echo "<i class='fas fa-times'></i>"; echo "<img class='photoDeGallery' s ...

javascriptphpjquerycssajax

Insert image using AJAX

I am attempting to use Ajax to dynamically add an <img> element to a div on my webpage. The image's name needs to be fetched from a database. Although I have successfully added the <img> tag to the div and set the correct source (src) att ...

javascriptjqueryhtmlcssajax

Warning: The DataTables alert has been triggered for table ID DimStatus. It is indicating that an unknown parameter, 'Code', has been requested for row 0 and column 0 during the initialization

https://i.stack.imgur.com/yEpSp.pngI am encountering an error while attempting to display my data in a datatable. The structure of my table is as follows: [Table("DimStatus", Schema = "dmg")] public class PolicyState { [Key] ...

javascripthtmlasp.net-mvcapidatatables

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

No matter how hard I've tried, setting the body with padding: 0 and margin: 0, as well as attempting to set the doc() with setMargin, nothing seems to be effective ...

javahtmlcssitext

Discovering the method to access a file without the standard .html or .php extension on the local host at 127.0.0

Is there a way to access my file without the .html or .php extension? My folder structure looks like this: C:\Apache24\htdocs\search-html\test search-html test low.html high.html ...

phphtml.htaccess

Display an image overlay upon hovering over a div

I've developed an add-on for Elementor that includes a card with the following HTML markup: <div class="card"> <div class="header"> <img src="img.jpg"> < ...

htmlcsselementor

The Best Way to Align a Large Image in the Middle of a Browser Window Using Inline HTML

Currently, I am attempting to center an image that is 1920px wide within the browser window. The challenge lies in not having it fit entirely within the window, so using width:100% will not achieve the desired effect. Furthermore, this needs to be accomp ...

htmlcssimageinline

Difficulty encountered in setting the background image to cover the entire screen

I'm facing difficulties while creating a parallax website. Specifically, I'm having troubles with CSS. Here's the HTML code: <div id="skrollr-body"> <div class="subnav"> <ul id="nav"> ...

jqueryhtmlcss

Adjusting transparency on various DIV elements

Currently, I am working on implementing the 'OnClick' functionality in jQuery. The goal is to have only the parent div and its child divs displayed when we click on the parent div property, while fading out all other divs. Below you can find the ...

jquerycsshtml

Adjusting data points on a radar chart.js through user interaction

I have a radar map generated using chart.js, along with some input fields where users can enter values that I want to reflect in the graph. I am exploring ways to update the chart dynamically as the user types in the values. One option is to have the char ...

javascripthtmlinputchart.jsradar-chart