CODEWITHSUNDEEP
htmlcss
Coder17
Coder17

Reputation: 873

providing space between fields within single div tag

this is my code: html

 <div class="fieldDate">
    <label for="statusEmp">Status of Employee:</label>
    <select  name="statusEmp" id="statusEmp">
        <option value="0">Active</option>
        <option value="1">Inactive</option>
    </select>


        <label  for="fromDate">From:</label>
        <input type="date" name="fromdate" id="fromDate">

        <label for="toDate">To:</label>
        <input  type="date" name="todate" id="toDate">

        <label for="search">Search:</label>
        <input  type="search" name="search" id="search">
        <input type="submit">
    </div>

css :

    .fieldDate{
        float: right;
        margin-right: 200px;
    }

I want to have space between the three fields: status, from/to,search how do i do it? they all appear in the same line( which is what i want) without space in between the fields.

Upvotes: 0

Views: 916

Answers (3)

NoobEditor
NoobEditor

Reputation: 15891

use CSS tables and label for a smarter purpose....wrap your fields inside label and assign css to it...no need to use a separate class or id!! :)

Working demo

Please note that display:table is supported IE8 onwards

CSS

#table {
    display:table;
    width:100%;
}
label {
    display:table-cell;
    white-space:nowrap;
    margin-right:4px;
}

HTML

<div id="table">
    <label for="statusEmp">Status of Employee:
        <br />
        <select name="statusEmp" id="statusEmp">
            <option value="0">Active</option>
            <option value="1">Inactive</option>
        </select>
    </label>
    <label for="fromDate">From:
        <br />
        <input type="date" name="fromdate" id="fromDate" />
    </label>
    <label for="toDate">To:
        <br />
        <input type="date" name="todate" id="toDate" />
    </label>
    <label for="search">Search:
        <br />
        <input type="search" name="search" id="search" />
    </label>

</div>
<input type="submit" />

Upvotes: 0

Dipak
Dipak

Reputation: 125

<style>
#from,#toDate,#search{width: 30%;float:left;}
</style>


<div class="fieldDate">
    <div id="from">

        <label  for="fromDate">From:</label>
        <input type="date" name="fromdate" id="fromDate">
    </div>
    <div id="toDate">

        <label for="toDate">To:</label>
        <input  type="date" name="todate" id="toDate">
    </div>
    <div id="search">

        <label for="search">Search:</label>
        <input  type="search" name="search" id="search">
    </div>
        <input type="submit">
</div>

You have to define three different div(s) and provide width as you require.

Upvotes: 1

user1853181
user1853181

Reputation: 785

Float them all left, and give the first two margin-right (or the last two margin-left) at wish:

<label  for="fromDate">From:</label>
<input type="date" name="fromdate" id="fromDate">

<label for="toDate">To:</label>
<input  type="date" name="todate" id="toDate">

<label for="search">Search:</label>
<input type="search" name="search" id="search">

input#fromDate, input#toDate, input#search {
    float: left;
}

input#fromDate, input#toDate {
    margin-right: 10px;
}

In this example, margin-right will "push" elements on the right of it by "10px", thus creating the empty space as you wanted.

Upvotes: 0

Related Questions