CODEWITHSUNDEEP
htmlcss
user1355300
user1355300

Reputation: 4987

automatic span width

I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?

<h1>
    <span class="left"></span>
    <span class="text">Text</span>
    <span class="right"></span>
</h1>

I'm trying following CSS which does not work:

.left{
    background: yellow;
    width: 30px;
    height: 20px;
    display: inline-block;
}

.right{
    display: inline-block;
    background: blue;   
}

Here's the JSFiddle link: http://jsfiddle.net/jMR8u/

Here's what I'm trying to get:enter image description here

The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.

Upvotes: 1

Views: 13692

Answers (5)

Raji
Raji

Reputation: 1

If I understood your requirement correctly. you should change your markup a little bit as below

h1 {
  background: #660000;
  padding-left: 30px;
  line-height: 1.1;
}
h1 span {
  background: #fff;
  padding: 0 3px;
  color: #600;
}
<h1>
  <span>
  Lorem, ipsum dolor. you are doing great  
  </span>  
</h1>

and CSS goes here below

Upvotes: 0

Andres Riofrio
Andres Riofrio

Reputation: 10357

This version will stretch to fit the contents of .text and should be cross-browser.

You can fake the blue (right) background by making it a border of .text:

.text { border-right: 1000px solid; }

Then, shift .right to the left by 1000px:

.right { margin-left: -1000px; }

Give a width to .left, make each element inline-block, hide the extra blue border on the right, and make sure .text and .right do not wrap to a new line:

.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }

And give it color!

body { background: green; }
.left { background: red; }
.text { border-color: blue; }

Here is a JSFiddle demonstration:

Screenshot from the JSFiddle

Upvotes: 2

Sergiy T.
Sergiy T.

Reputation: 1453

if you can set width to the .text span and h1 element.

body{
background:green;
}

h1{
    border: 1px solid red;
    display:table;
    width:100%;
}

.left{
    background: yellow;
    width: 30px;
    display: table-cell;
}

.right{
    display: table-cell;
    background: blue;
}
.text {
    display:table-cell;
    width: 150px;   
}

Upvotes: 1

Mik
Mik

Reputation: 1703

if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/

h1{
    border: 1px solid red;
    position: relative; 
}

.left{
    background: yellow;
    width: 30px;
    height: 20px;
    display: inline-block;
}

.right{
    display: inline-block;
    background: blue;
    position: absolute; 
    z-index: 99;
    height: 20px;
    width: 100%;
}
​.text {
    height: 20px;
    width: 150px;
    display: inline-block;
    position: relative;
    z-index; 101;
}​

ok, then use layers .. with z-index and positioning

Upvotes: 1

Andres Riofrio
Andres Riofrio

Reputation: 10357

You could use flexbox (but use the new syntax). Sadly, it only works on Chrome and Opera for now, so this has limited usefulness:

h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }

Here is a JSFiddle demonstration: http://jsfiddle.net/FN7vQ/

Upvotes: 1

Related Questions