Help request in debugging CSS having a field grow to 100%

I hope somebody can help me with this, I have been beating my brains out for hours. I have some html that in the header is supposed to put the character name on the left, with a label under it, both of them taking no more than 30% of the available space, and the player name on the right with a label under it, also taking 30% of the space. With the logo in the center. &lt;div class="sheet-header"&gt; &nbsp; &nbsp; &lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/30109476/I1Rgkg1T5552Yp9Zs0Jm6Q/max.jpg?1489432634" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/30109476/I1Rgkg1T5552Yp9Zs0Jm6Q/max.jpg?1489432634</a>" style="position:absolute; top:40px; left:35%; width:200px; height:75px; max-width: 30%;" alt="Earthdawn 4th edition RPG Character Sheet" /&gt; &nbsp; &nbsp; &lt;span class="sheet-w30 sheet-label"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_character_name" type="text" title="@{character_name} &nbsp; Full name of character." placeholder="Character Full Name"&gt;Character Name &lt;/span&gt; &nbsp; &nbsp; &lt;span class="sheet-w30 sheet-label sheet-floatRight"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_player-name" type="text" title="@{player-name}" placeholder="Player Name"&gt;Player Name &lt;/span&gt; &lt;/div&gt; What I am getting is the first input (the character name) taking the entire top row, &nbsp;the label below, it, then the text of the player name sharing the row with the character label, and the player label below it. So basically, the character name should be shorter, and the player name should be up one line.&nbsp; Here is the relevant CSS. .sheet-floatRight { &nbsp; &nbsp; float: right; } .sheet-label { font-weight: bold; text-align: center; color: #000; } input[type="text"],&nbsp; select { width: 100%;&nbsp; margin: 0; } .sheet-w30 { &nbsp; &nbsp; text-align: left; &nbsp; &nbsp; width: 30%; } So the way I see it, the spans that wrap the inputs and the labels ought to limit themselves to 30% of the width of the header. I would expect the text input to be 100% of the width OF THE SPAN, ie: 30% of the width of the spans container.&nbsp; However, here is what the inspector finds.&nbsp; This is the first Span Notice that the very first cascading style says width 30%. However for some reason the width is somehow set to "auto" and is taking up the whole width of the header.&nbsp; The width of the text input inside of it is as follows And as you can see the first span is setting itself to 714 px width, which is 100% of the width of the header that contains the span that it is in.&nbsp; Another funny thing is that the other span and text input and label, which looks exactly like it except that it also has a sheet-floatRight is behaving properly and limiting itself to the 30% of the screen it is supposed to be in. I have tried several things, and I simply can't get the first span to limit itself to it's correct length.&nbsp; Why is it growing so huge? How do I keep it down to 30% of the line? Thank you.&nbsp;

spans have display:inline by default, and you cannot manually set the width of inline elements. That's why the input is taking up 100% of the sheet, since its parent has no defined width. The reason this is not happening to the other span is probably that display:inline and float:right are incompatible, so the float takes precedence and the other span is not actually an inline element. There are a bunch of things to consider here for making this layout work, and it's late here, but try replacing the spans by labels (because that's what they are, semantically), and make them display: inline-block or display: block + float (or you can organise your layout with something even better like flexbox, but that's a bit more intricate).

Yup. The width: 30% is being completely ignored, because you're trying to apply it to an inline element. (Don't worry, I've been bitten by inline elements not having their widths set on multiple occasions, and this is the kind of stuff I do for my day job!)

Thank you both, that was indeed the problem and solution.&nbsp; The annoying thing is that have wrestled with the inline vs inline-block problem before, I just ether forgot about it, or it is a slightly different symptom. Thanks a lot.&nbsp;