Manipulating the arrangement and alignment of div elements within a designated container

Here is the markup I am working with:

<div class="container">
    <div class="left-rect"></div>
    <div class="text">Lorem ispum</div>
    <div class="right-rect"></div>
</div>

.left-rect,
.right-rect { 
    background-color: #EEE;
    width: 9px;
}
.container {
    background-color: #555;
    height: 20px;
}

I want it to have this appearance:

It is essential that the width of the .rect elements adjusts based on the width of the .text element, which automatically adapts to fit its content.
Therefore, if a longer text is added to .text, the .rect should widen accordingly while the left and right rects remain at the edges. The .rect div can be dynamically positioned using JavaScript.
I am completely lost on how to achieve this.
I hope my explanation makes sense.

htmlcss

Answer №1

Remember to set display: inline-block for div

CSS Tips:

.rectangle { 
    background-color: #EEE;
    width: 9px;
    height: 13px;
}

.container-box {
    background-color: #555;
    width: 165px;
    padding: 2px 5px;
    height: 20px;
    line-height: 20px;
    display: block;
}

.rectangle, .text-content {
    display: inline-block;
}

.text-content {
    color: #EEE;
    margin: 0 30px;
}

Check out the LIVE DEMO here

Answer №2

Utilize the display:inline-block property for the div element

CSS Code:

.left-rect,
.right-rect { 
    background-color: white;
    width: 9px; 
    display:inline-block
}
.container {
    background-color: #555;
    height: 20px;
    padding:4px;
     display:inline-block;
    color:white
}
.text{
    display:inline-block
}
​

View DEMO

You can experiment by inserting lengthy text, as it will expand based on the length of the text.

Answer №3

You can accomplish this task with ease.

Implement the following CSS code:

.left-rect{
float:left;
  margin-left:16px;
}
.right-rect{
float:right;
  margin-right:16px;
}
.left-rect,
.right-rect { 
    background-color: #EEE;
    width: 9px;
  height:16px;
  margin-top:2px;
}
.container {
    background-color: red;
    height: 20px;
 }

Use this HTML code:

<div class="container">
    <div class="left-rect"></div>

    <div class="right-rect"></div>
   <div class="text">Lorem ispum</div>
</div>

Check out the live demo here

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

Using JavaScript, generate table rows and cells

Hey there, I'm struggling with formatting my table correctly within the designated section. Currently, it's printing the rows one below the other instead of creating a 'tr' and multiple 'td' elements for each input field. The ...

javascripthtmljson

What is the best way to create a transparent section within a div to reveal the content below?

My goal is to create a user interface that resembles the design shown in this image https://i.stack.imgur.com/GfiZ8.png One issue I'm facing is how to make the center of the top div circular and transparent, just like in the reference image. I consi ...

htmlcssvue.jsnuxt.js

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

javascriptjqueryhtmlcss

Footer that sticks in a vuejs application

I am facing a challenge in implementing a sticky footer in my vuejs application. Vuejs and similar frameworks require the presence of a root element in the template. This requirement is causing complications when trying to use Flex to create a sticky foo ...

htmlcssvue.jsflexbox

Tips on utilizing radio buttons in place of check boxes

How can I create a dynamic menu with multiple categories and submenus that toggle open and close when clicked? I currently have a menu structure with "What's New" and "Categories", and within the "Categories" section, I have three main categories each ...

htmlcsslistcheckboxradio-button

Extracting outer td data from a td element containing an inner table using JSoup

Currently, I am utilizing JSoup for the purpose of web scraping. Within my webpage, there is a table with the classname .chart, containing rows (tr) and data cells (td). However, some of these td elements also include nested tables with additional rows and ...

htmljsoup

Need a clearfix solution for Internet Explorer 6/7?

While developing a website, I have come across the micro clearfix hack from here. It's working well, but I do have a question regarding it that I'd like some clarification on. Within the clearfix hack on the webpage, there is the following code ...

csscss-float

displaying the JSON output from a PHP script within an HTML table

Here's the scenario: I have an HTML file that involves the following steps: Accepts a card number input from the user using an HTML form, Sends this input to a PHP file and receives a JSON-formatted response through xmlhttp.responseText, Needs to di ...

phphtmlajaxjson

HTML - various incorrect horizontal alignments

I'm having trouble getting the site logo, site name, and site header to align horizontally on my website. They keep ending up in different places.https://i.stack.imgur.com/5yL5f.jpg I'd like it to look similar to this: https://i.stack.imgur.com/ ...

htmlcss

Experiencing difficulties when trying to incorporate PHP file

Having an issue including the header.php file in my index.php file, both located in the same folder. Unfortunately, it's not functioning as intended. This is the content of my index.php file: <!doctype html> <html lang="en"> <head&g ...

phphtmlcssbootstrap-4

Adjust the width of the flex columns?

In one of my columns, I have a list that I'm splitting using CSS to wrap the data in the next column after a specific height. However, in the demo, you'll notice there's a lot of white space between the first and second columns. I'm uns ...

javascriptcssvue.jsvuetify.js

Tips for filling the offset space with a column

Having a bit of trouble phrasing my question, but here's the issue I'm facing: Currently, I need to develop two different views, the first being the mobile view However, I'm experiencing some difficulties with the second view, which can be ...

htmlcssbootstrap-4flexboxgrid

What is the best way to horizontally center a div while ensuring the content within the div stays aligned?

I'm attempting to align a div in the center while maintaining the position of its contents. Check out my code snippet: <style> .wrap{ position: relative; } .character{ position: absolute; bottom: -10%; left: 0; heigh ...

htmlcss

Is there a way to center a div vertically without specifying the screen height?

Trying to create a slider that aligns both horizontally and vertically can be a tricky task. To achieve this alignment, I have implemented the use of display: flex; within the following code: body { display: flex; flex-direction: column; justify-c ...

htmlcssflexboxpositioning

Disable list-group-item-action clicking

I'm looking to maintain the list-group-item-action hover effect that changes the background color while eliminating the click effect that activates it. Is there a way to achieve this? I've already removed the href="#" from the If I remove list-g ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Instructions on creating an input field and a slider simultaneously

Currently, I am exploring the world of CSS 3D transforms and I am particularly interested in creating sliders to manage these transforms. I recently stumbled upon the Three.js editor and was impressed by how it handles the positioning, rotation, and scalin ...

javascriptjqueryhtmlinputthree.js

Wrapping text around a container element

Is there a way to make the text wrap around a div when you want the div positioned at the bottom of a container? I've been able to align the text properly with the div when it's on top, but when I attempt to move it to the bottom of the page, th ...

csshtmltext

Enhance a link using jQuery to allow it to expand and collapse

I am currently working on an MVC view that features a 3-column table showcasing a list of products. The first column, which contains the product names, is clickable and directs users to a specific product page. I am looking to implement functionality where ...

javascriptjqueryhtmlcss

When the height expands, the div spills over and engulfs the following div

I am facing an issue with my divs on a page that have a "see more details" link. When clicked, the div expands and should fit the height of the parent div seamlessly. However, currently, each div overflows onto the next parent div until I scroll, at which ...

jqueryhtmlcss

Viewing a document generated using the Google Drive API using the Google Drive Viewer

Using the Google Drive API, I am able to generate a document and receive some URLs: alternateLink : https://docs.google.com/document/d/xxxsome_idxxxxx/edit?usp=drivesdk embedLink https://docs.goo ...

javascripthtmlgoogle-drive-api