Can't get fields to fit in one row using CSS - html

Question

EDIT: To clarify, I want all 4 elements in a single row, fit 100%. I know I can change the % but I want them flush with the edge of the div
I'm trying to make my labels and input fields fit in a single row and be % based to resize when required.
Problem is, I can't get them to all fit in one row - I think it has something to do with the padding or margins somewhere but can't figure it out.
I've made a JSfiddle here http://jsfiddle.net/ZxRAu/
And here's the relevant CSS
.generalcontainer {
width:65%;
margin:5%;
height:600px;
float:left;
background-color: #CCCCCC;
border: 0px;
}
.generalcontainer > span {
font-family: Calibri;
font-size: 14px;
padding: 4px;
margin: 0px;
.generalcontainer > span.label {
color: #000000;
font-weight: normal;
display: inline-block;
width:25%;
}
.smallentryfield {
color: #000000;
font-weight: bold;
width: 25%;
padding: 4px;
margin: 0px;
}
select.smallentryfield {
box-sizing: content-box;
}

Answer 1

There can be many reasons why the 25% is not working exactly as you expect. One of the reasons is, you have an element that has its width set in percentile but the padding is in pixels. Another reason could be the input elements disregarding the width applied on them because of their borders, margins and padding. While you can set all of these to 0, you ll still face some challenges when you set the display to inline-block coz that will add some space at the bottom of the element in such a way that it will show invisible margin after the element unless of course you use some combination of vertical-align set to top and font-size or line-height.
A possible solution is to have a container element for each of the form elements and set the width of the container to 25% and set it to display: block along with float: left. Then you can set the inner element's widths to 100% and remove their padding and margins.
For example:
<div class="container">
<label>First name</label>
</div>
<div class="container">
<select>
<option selected="selected" value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div class="container">
<span>First name</span>
</div>
<div class="container">
<input type="text"></input>
</div>
I m calling it 'container' just as an example. You can change it to whatever. You can set the CSS something for the container something like this:
div.container {
color: #000000;
font-weight: normal;
display: block; /*you need this only if you use a span (as per your example)*/
width:25%;
float: left;
padding: 0px;
margin: 0px;
}
And finally for the CSS for the inner elements, you could do something like:
div.container input[type=text], div.container select {
width: 100%;
padding: 0px;
margin: 0px;
border: 0px;
}
This is just a suggestion as to what direction you can take to solve this issue. Here s a jsfiddle to start playing with this concept in your particular scenario:
http://jsfiddle.net/f8dUC/3/
Hope that helps!

Answer 2

I guess, it just required a <br> tag there, look at the example:
http://jsfiddle.net/afzaal_ahmad_zeeshan/ZxRAu/1/
Or if you want this:
http://jsfiddle.net/afzaal_ahmad_zeeshan/ZxRAu/2/
I just lessen down the width to 20%. And it works :)
There were margins and paddings, which were causing the problem. Due to which 25% for four elements would be 100% and the remaining margins. This way the row was broken and formed 2 rows.
So adding 20% removed the issue. You can have the look in the fiddles.

Answer 3

Started again and used Walmiks guidance for containers within the data. Also set % based padding to get it perfect.
I.E.
form {
width:98%;
line-height:24px;
padding: 1% 1% 0 1%;
}
Check out the JSfiddle below
http://jsfiddle.net/FYdhz/