CODEWITHSUNDEEP
htmlcssinputwidth
D'Arcy Rail-Ip
D'Arcy Rail-Ip

Reputation: 11975

Does the width of inputs take more space than other elements?

I'm not positive on how to ask the question, but if you take a look at this jsfiddle, you can tell that the widths of my spans vs the width of my inputs is different, although they're all expressed as 14% of 500px parent element. (7 x 14% = 98%).

HTML:

<div class="timesheet-subheader-weekdays-div">
    <span id="timesheet-subheader-monday" class="timesheet-subheader-weekday">Mon<br /></span>
    <span id="timesheet-subheader-tuesday" class="timesheet-subheader-weekday">Tue<br /></span>
    <span id="timesheet-subheader-wednesday" class="timesheet-subheader-weekday">Wed<br /></span>
    <span id="timesheet-subheader-thursday" class="timesheet-subheader-weekday">Thu<br /></span>
    <span id="timesheet-subheader-friday" class="timesheet-subheader-weekday">Fri<br /></span>
    <span id="timesheet-subheader-saturday" class="timesheet-subheader-weekday">Sat<br /></span>
    <span id="timesheet-subheader-sunday" class="timesheet-subheader-weekday">Sun<br /></span>
</div>
<div class="timesheet-daily-entry-fields-container">
    <input id="TimesheetMondayHours" class="timesheet-daily-input timesheet-monday-hours"/>
    <input id="TimesheetTuesdayHours" class="timesheet-daily-input timesheet-tuesday-hours"/>
    <input id="TimesheetWednesdayHours" class="timesheet-daily-input timesheet-wednesday-hours"/>
    <input id="TimesheetThursdayHours" class="timesheet-daily-input timesheet-thursday-hours"/>
    <input id="TimesheetFridayHours" class="timesheet-daily-input timesheet-friday-hours">
    <input id="TimesheetSaturdayHours" class="timesheet-daily-input timesheet-saturday-hours"/>
    <input id="TimesheetSundayHours" class="timesheet-daily-input timesheet-sunday-hours"/>
</div>​

CSS:

.timesheet-subheader-weekdays-div {    
    position:relative;
    float:left;
    width:500px;
}
.timesheet-subheader-weekday {
    position:relative;
    float:left;
    width:14%;
    text-align:center;
    line-height:15px;
    font-size:11px;
}
.timesheet-daily-entry-fields-container {
    position:relative;
    float:left;
    width:500px;
}
.timesheet-daily-input {
    position:relative;
    float:left;
    width:14%;
    text-align:center;
}​

Upvotes: 0

Views: 130

Answers (3)

MarioDS
MarioDS

Reputation: 13073

The width of the input boxes is without the borders that every browser draws around them (they're the only actual thing that makes them visible). You can see that when you put a 1px solid black border around your span elements. This is how the CSS box model works, which is simply represented like this:

| < margin > | (border) < padding > | < width > | < padding > (border) | < margin > |

Additionally if you put border:none on the textboxes, they will seemingly have disappeared when the background color matches that of the container.

Upvotes: 0

joko13
joko13

Reputation: 640

assuming your body bg is white, the easiest way to keep the width:14% working is to give your spans a 1px border #fff.

jsfiddle.net/5ay3J/11/

Upvotes: 0

mcriecken
mcriecken

Reputation: 3297

It's because of the border on the input boxes. The border on the input is 1px by default. So the extra width added by the borders is causing your last element to bump below the rest.

Updated your fiddle so you can see that by removing the border they flow how you want.

Updated jsFiddle

.timesheet-daily-input {
    position:relative;
    float:left;
    width:14%;
    text-align:center;

    // Added these
    border: none;
    background: red;
}​

Upvotes: 4

Related Questions