Fluid CSS container without spaces - html

Question

Wrong:
Correct:
How to achieve that (without spaces between elements) ? They also must be centered.
HTML:
<div class="header container">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div>
<div class="col col-2">
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div>
<div class="col col-3">
Reset
Search
</div>
</div>
CSS:
.header {
display: table;
width: 100%;
height: 120px;
text-align: center;
}
.header > div {
display: table-cell;
vertical-align:middle;
}
.col {
width:20%;
}
Anyone can help with that ?

Answer 1

Simply set all div.col with inline-block positioning and set 'text-align:center' on your container to center it horizontally.
.container {
text-align:center;
}
.container .col {
display:inline-block;
}

Answer 2

Use display: inline-block.
.header {
width: 100%;
height:120px;
text-align:center;
}
.col {
display: inline-block;
vertical-align:middle;
}
Also, to remove spaces between each .col, make sure that there is no white space between each opening and closing div tag.
<div class="header container">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div><div class="col col-2"> <!-- THIS LINE - no white-space -->
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div><div class="col col-3"> <!-- THIS LINE - no white-space also -->
Reset
Search
</div>
</div>
</div>

Answer 3

To get exactly what you want, you'll need an extra HTML wrapper.
http://jsfiddle.net/h37J4/
.header {
width: 100%;
height:120px;
}
.header > .row {
max-width: 360px;
margin: 0 auto;
overflow: hidden; /*quick cleafix hack */
}
.col {
float: left;
}

Answer 4

yoou need a wrapper for the content like this:
<div class="header container">
<div class="wrapper">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div>
<div class="col col-2">
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div>
<div class="col col-3">
Reset
Search
</div>
<div class="wrapper">
</div>
And then style the wrapper with css, something like this:
.header .wrapper {
width: 70%; /* or any in px */
margin: 0 auto; /* for centering */
}
Or you can just replace your ".header" element's 100% width with smaller number!