Guide: Placing two divs with variable widths inside a fixed-width container

Question

Guide: Placing two divs with variable widths inside a fixed-width container

Currently, I am working on customizing my subheadings to fit within a 960 grid layout design.

The challenge is that the headings need to have a trailing decoration (in this scenario, two lines aligned at the bottom). To achieve this, I created a div for the title and another div next to it for the decoration, both inside the fixed-width container.

I am looking for a way to ensure that when the heading div expands, the accompanying div automatically resizes as well. Any suggestions on how to accomplish this?

For better understanding, here is an example:

<h1 class="fixed-width">

    <span class="auto-width">text expands her...</span>

    <span class="auto-decor-width">this is the text decoration</span>

</h1>

Additionally, you can refer to the image below for a visual representation of what I am working towards:

html css

Answer 1

Answer №1

From my understanding, it seems like this is what you're looking for: http://jsfiddle.net/sandeep/c2sF6/

span{
    display:block;
}
.fixed-width{
    width:960px;
}
.auto-width{
   float:left;
   background:green;
}

.auto-decor-width{
    overflow:hidden;
    background:red;
}

Answer 2

From my understanding, it seems like this is what you're looking for: http://jsfiddle.net/sandeep/c2sF6/

span{
    display:block;
}
.fixed-width{
    width:960px;
}
.auto-width{
   float:left;
   background:green;
}

.auto-decor-width{
    overflow:hidden;
    background:red;
}

Answer 3

Answer №2

It becomes easier:

h1 {
    background: red;
}

.auto-width {
    float: left;
    background: green;
}

Try it out yourself: http://jsfiddle.net/c2sF6/1/

Answer 4

It becomes easier:

h1 {
    background: red;
}

.auto-width {
    float: left;
    background: green;
}

Try it out yourself: http://jsfiddle.net/c2sF6/1/

Guide: Placing two divs with variable widths inside a fixed-width container

Answer №1

Answer №2

Similar questions

Trouble with displaying theme modifications in Liferay

How to Blend Pseudo-classes in CSS?

Troubleshooting a Navigation Styling Issue in HTML and CSS

The Angular routing feature seems to be malfunctioning as the URL is showing up but the page fails to load

Designing the appearance of a button in a filefield xtype

Adjust the dimensions of the embed code to specify a width and height

Problems with updating HTML/Typescript in Visual Studio and Chrome are causing frustration

How to enhance the animation of the Material-UI right side persistent drawer

`The search bar and search button`

Is there a way to obtain metadata for a specific link?

clicking on internal links in the bootstrap side menu causes it to jump

My Django template isn't displaying the data from my backend on the HTML page

Troubleshooting CSS Display Problem on Chrome and Firefox

Tips for implementing this code for effective DAO and CRUD operations

The hover effect is not functioning properly after loading jQuery with load();

Creating a two-column post loop in Wordpress is a great way to display content in a

Issue encountered while compiling CSS for a map with @each function in Sass

Help! The CSS height property is not working properly and I'm not sure how to resolve

Implementing a Function Triggered by Clicking Text in Angular 8

Is it possible to make an element draggable after it has been prep