CODEWITHSUNDEEP
htmlcss
hamahama
hamahama

Reputation: 393

How to: 2 variable-width div in a fixed-width div?

I'm trying to style my sub headings, and I have a design where the width of the headings are fixed in a 960 grid.

The title of the headings need to end with a trailing decoration (in this case 2 lines aligned to the bottom). So I create a div to hold the title, and a div beside to hold the decoration, inside the fixed width container.

How do I make it so that when the heading div expands, the div automatically resizes?

Here's an example if it makes it easier:

<h1 class="fixed-width">

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

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

</h1>

Here is an image example:

image example

Upvotes: 0

Views: 497

Answers (2)

Šime Vidas
Šime Vidas

Reputation: 186103

It gets simpler:

h1 {
    background: red;
}

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

Live demo: http://jsfiddle.net/c2sF6/1/

Upvotes: 1

sandeep
sandeep

Reputation: 92863

As per i understand may be that's you want 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;
}

Upvotes: 2

Related Questions