CODEWITHSUNDEEP
htmlcss
Thomas
Thomas

Reputation: 543

Fluid CSS container without spaces

Wrong: enter image description here

Correct: enter image description here

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">
        <a href="#" class="classname">Reset</a>
        <a href="#" class="classname2">Search</a>
    </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 ?

Upvotes: 1

Views: 412

Answers (4)

Andy1210
Andy1210

Reputation: 144

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">
              <a href="#" class="classname">Reset</a>
              <a href="#" class="classname2">Search</a>
            </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!

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28437

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;
}

Upvotes: 0

Sebastien Axinte
Sebastien Axinte

Reputation: 127

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;
}

Upvotes: 2

matewka
matewka

Reputation: 10148

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 -->
          <a href="#" class="classname">Reset</a>
          <a href="#" class="classname2">Search</a>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions