How to achieve automatic width with absolute positioning in Bootstrap 4 within a display flex layout

My HTML code includes a div with the display set to flex using Bootstrap 4. I then inserted another div inside it and applied position: absolute along with a transform: rotate property. Here is an example:

<div class="container">
  <div class="area d-flex position-relative">
    <div class="title">
      title
    </div>
    <div>
      content
    </div>
  </div>
</div>

CSS:

.inner {
  background: #f1f1f1;
}

.title {
  transform: rotate(-90deg) !important;
  position: absolute;
  left: -20px;
  top: 43px;
  text-align: center;
  font-size: 12px;
  background-color: #000;
  width: auto;
}

Although I have set the width property to auto in order to resize the div with an absolute position automatically, it does not seem to be working as intended. How can I resolve this issue?

I aim for the result shown in this image: https://i.sstatic.net/DUFnv.jpg

Here is the updated DEMO link:

Demo Here

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

In my opinion, achieving the desired outcome can be accomplished using border-left instead of d-flex. Both methods may seem similar and provide the same result.

The approach I suggest is applying a border-left to the <div>content</div>, creating a black vertical rectangle, and then utilizing rotate on the <div>title</div> with a value of 270deg. Centering this element can be done by adding 

top:50%; transform: translateY(-50%);
, while ensuring its position is set to absolute.

.wrapper{
  padding-left: 1rem;
  border-left: 40px solid black;
  position: absolute;
}

.title{
  position: absolute;
  color: white;
  letter-spacing: 2px;
  font-size: 12px;
  left: -5%;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}
<div class="container">
  <div class="wrapper">
      <div class='title'>title</div>
    <div>
      content content content content content content ...
    </div>
  </div>
</div>

Updated: Responsive Design Code

For proper sizing, JavaScript can be utilized to assign the height of .content as the width for .title. The necessary script has been added in the following code snippet since achieving this solely through CSS is not feasible.

let eleHeight = document.getElementById('content').offsetHeight;
let titleEle = document.getElementById('title');
titleEle.style.minWidth = eleHeight+"px";
.wrapper{
    padding: 4rem;
}

.inner{
    display: flex;
   position: relative;
}

.side-text{
    color: white;
    position: absolute;
    transform: rotate(90deg);
    transform-origin: top left;
}

.title{
    text-align: center;
    background-color: black;
    margin: auto; 
}

.content{
    padding-left: 1rem;
}
<div class='wrapper'>
    <div class='inner'>
          <div class='side-text'>
              <div id='title' class='title'>title title title</div>
          </div>
          <div id='content' class='content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit...
          </div>
    </div>
</div>

Answer №2

To achieve the desired layout, you can utilize the flex-row class along with d-flex, eliminating the need for using transform.

.inner {
  background: #f1f1f1;
}

.title {
  background-color: #000;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d4ced6ced0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c18021a021c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="inner d-flex flex-row">
    <div class="title">
      title
    </div>
    <div>
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content ...
    </div>
  </div>
</div>

Reference

Bootstrap - Flex

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

What strategies can I employ with flexbox to achieve my design goals?

How can I achieve my design requirements using flexbox? design requirements The current code that I have implemented follows the flexbox approach to meet the design requirements. However, the output of this code does not match the screenshot of my design ...

htmlcssflexboxcss-grid

Troubles with Placing Image on WordPress

Working on a Wordpress component for a website where I placed a "SOLD OUT" image over text. However, the issue arises when viewing the site on mobile devices, as the images are smaller and not in their correct positions due to using absolute positioning. ...

htmlcsswordpress

Tips for customizing layout with an Asp.net Repeater

I have a database table with the columns "Car" and "Color". In my Asp.net application, I am using a repeater inside a table to display the data. The repeater code is as follows: <asp:Repeater ID="repeater_CarsColors" runat="server"> ...

htmlasp.netrepeater

Tips for displaying content in a stacked format when hovering, similar to a list item (<li>), using jquery/javascript

I am attempting to display different content on hover over text, specifically listing various HTTP error codes. My setup includes 3 icons and text that will reveal specific content based on the text hovered over: success error blocked Below is the JS cod ...

javascriptjquerycss

Ensuring seamless functionality across all browsers for both hyperlinks and buttons

<input type="button" onclick="staff.updateDetail({$T.list.id},'staffno');" title="Change Details" value="{$T.list.staff_no}"> <a href="#" title="Change Details" style="color: #000" onclick="staff.updateDetail({$T.list.id},'staffno& ...

javascriptphpjqueryhtml

Limit not reached by substring function

When the character limit exceeds 20 characters, the substring function extracts the first 20 characters typed in the input. It replaces any additional characters that are entered after reaching the max limit of 20. In my program, however, I am able to con ...

javascripthtmlcharactercounting

What could be the reason my SVG images are not displaying?

My website contains SVGs that are not loading consistently. I acquired some from freeicons/icon8 and created a couple using Inkscape. Initially, I inserted them using HTML but switched to CSS after doing research online on how to ensure they load properly ...

htmlcsssvg

What is the best way to ensure that the sidebar appears after the content on mobile devices, even when there are full-width blocks within

I attempted to enclose fixed-width content and sidebar within a common container, but when it came to mobile devices, I could only come up with a solution where the sidebar is positioned after the content and before the full-width content. However, this ar ...

htmlcssresponsive-design

Why is my HTML5 class unable to locate the contents of my observable array?

Any help would be greatly appreciated. I've been coding for over fifty years, but I'm relatively new to JavaScript, HTML, and knockout. This project seems promising if I can just get it to function correctly. What follows is one of the many appro ...

htmlajaxknockout.js

What is the best way to make IE reload a flash.swf file each time the page is accessed?

Upon visiting our site, users are greeted with a dynamic coverflow display. For those who are not logged in, the images remain invisible. However, upon logging in, users should be able to see the images in the coverflow. Unfortunately, due to caching, the ...

c#asp.nethtmlflashinternet-explorer

Find out the index of a div within an array

Curious about determining the position of a div in an argument? For instance, if there are multiple divs with the same name: <div class="woot"></div> <div class="woot"></div> <div class="woot"></div> <div class="woot ...

javascriptjqueryhtmljquery-selectors

Animate the chosen text via specialized effects

I am trying to implement a show/hide feature for specific text using jQuery. The challenge I am facing is having multiple instances of the same text tag with identical ids. I want to trigger the animation on a particular child element when hovering over it ...

jqueryhtml

Is there a method in Django that allows for the display of asterisks (*) instead of text through filtering?

Curious to find out if there is a filter that can be used to display all the text as * like this myword = 'jungle' {{ myword|hidden }} will display **** Is there a way to achieve this? ...

pythonhtmldjangodjango-templates

Make the header stretch to the top of the page using CSS rounded edges

I'm trying to eliminate the white space above my blue header on a webpage with rounded corners. The header is at the top of the wrapper, but there's some empty space before it starts. Is there a way to make the header start right at the top edge ...

htmlcss

Balancing spaces in flexbox

In this scenario, no matter what value is assigned to justify-content, it is difficult to horizontally align the elements around their gaps. * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body, div { display: f ...

htmlcssflexbox

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

cssnpmsassnode-modulesnode-sass

Popup window displaying website content upon DOM loading, ensuring compatibility across various browsers

I am facing a challenge with my HTML popup window where I need to add text after opening the window using a specific function: var win = window.open('private.php', data.sender_id , 'width=300,height=400'); win.win ...

javascriptjqueryhtmlpopup

Issue with the button border not functioning correctly upon hover

I'm currently practicing my HTML and CSS skills, with a focus on creating buttons. I have encountered an issue where I want a colored border to appear around the button when hovered over. Unfortunately, I seem to be stuck and unable to achieve the des ...

htmlcsspseudo-element

issues with functionality in purecss drop down menu

I have been struggling to create a vertical drop-down menu using the purecss library without success. purecss.io/menus/ This is what my CSS code looks like: <div class="pure-menu custom-restricted-width"> <ul class="pure-menu-list"> ...

htmlcss

Is there a way that I can move data input from one page to another using a form table?

Currently, I am developing a practice task manager using Bootstrap-4 and Vue.js. Although this is all relatively new to me, I have made significant progress. The only thing left to do is figure out how to transfer the input data from one html page to anoth ...

vue.jsbootstrap-4dynamic-tables