HTML SPAN tag Stretch to Avaliable Width

css width html

16,536

span{

}
span span{
    width:100%;
    background:#f00;
    display:inline-block;    

}
span input{
    float:left;
}


<span>
    <span>
        <input type="text" /> 
    some text
    </span>
</span>

16,536

Author by

Oliver Spryn

My first programming experience was a trial-by-fire adventure. It wasn't a "Hello World" application but a full-fledged, web-based learning management system. This exposure galvanized my career choice and prepared me to face a myriad of challenges head-on. My unconventional start continues to yield tangible successes in nearly every discipline I touch, whether on the technical, operational, or business level. Since then, I've been on a mission to make technology work seamlessly and feel invisible. I have delivered this continued success with a daily, sleeves-rolled-up approach. Whenever my superiors need their most complex projects to be built and flawlessly delivered, they ask my team. I keep a good rapport with my colleges and managers so that working as a team is flawless. Their confidence in me has enabled me to be at the forefront of the engineering and design efforts necessary to bring applications from 0 to over 600k users. Building projects of this quality becomes a craft. The concepts I've worked to develop, discover, and distill have worked so well that they have been featured on the droidcon blog, home of Europe's foremost Android conference. Whether my work is published on a prominent blog or neatly packed inside of some back-end service, I ensure that I conduct each of these projects with my full measure of integrity. This trait is essential in delivering healthy projects on time, and it sets the good projects apart from the great ones. Prominent Skills: Android, Kotlin, Gradle, Azure Media Services, Azure Functions, Cloudflare Workers, Adobe Premiere Pro, Adobe Illustrator, All Forms of Communication, Videography, Listening, Critical Thinking

Updated on June 04, 2022

Comments

Oliver Spryn about 2 years
I have the following HTML, with a "span" tag which contains an "input" field and a "span" tag side-by-side:
```
<span class="container">
  <input name="firstName" id="firstName" type="text">
  <span class="tip">Enter your first name</span>
</span>
```
I would like the child "span" tag to stretch to fill the avaliable area between the right side of the "input" file and the right side of its parent "span" tag. I do not want it to fill the entire area of the parent "span" tag, and, thus, crowd the "input" field. Is that possible with CSS?

Here is my current CSS, if that helps:
```
span.container {
  font-size:14px;
  border:1px solid #22C3EB;
  border-radius:5px;
  padding:0px 10px 0px 10px;
  width:200px;
  display:block;
}

input[type="text"], input[type="password"], textarea {
  background: none;
  border: none;
  width:200px;
  font-size:14px;
  padding:11px 10px 11px 0px;
}

span.tip {
  position:absolute;
  top:inherit;
  padding:11px 0px 11px 10px;
  display:none;
}
```
Thank you for your time,
spryno724
- Yzmir Ramirez about 13 years
  
  Give the span element the display:block attribute or display:inline-block??? Just thinking off-the-cuff here.
- Blender about 13 years
  
  Why do you use a <span> tag styled with display: block;? Is <div> really that hard to type in? It's one character shorter than <span> (two if you count both tags)!
- Oliver Spryn about 13 years
  
  @Yzmir, not quite. I manipulate this via jQuery, and by default, it has to be display : none. @Blender Trying the <div> idea...
- Oliver Spryn about 13 years
  
  Hmm... the <div> threw the <span> down below. :(
- Oliver Spryn about 13 years
  
  Gah... sorry people. Guess my mind id tired. Removing the "inline-block" took care of the misplaced <span> tag. And, yes, wrapping this inside of a div took care of it. Thanks, Blender and Yzmir.