CODEWITHSUNDEEP
html
fc123
fc123

Reputation: 918

placing elements in one line html

I have following div and there are many html elements in side it

<div id="master">....<option><option>  <input type="file"/>.<div></div>...</div>

What I want is all the elements inside master div should be in one line and when the first line is occupied then it should start placing elements in second line

It it possible?

Upvotes: 0

Views: 151

Answers (3)

Aru
Aru

Reputation: 1870

Try the css below to get all the elements inside the div master inline

CSS

#master > *{
    display:inline-block;
}

you can check a sample here..

Fiddle Demo

Upvotes: 2

Rahul Munjal
Rahul Munjal

Reputation: 2693

if you want all the childs to be in line wth eaach other you can do it by using float:left property.

check this code:(i think this is what you want)

<div>
        <select style="float:left">
            <option>--select--</option>
        </select>
        <input type="text" style="float:left"/>
        <div style="float:left;position:relative;border:1px solid black">
            dummy Text
        </div>
        <select style="float:left">
            <option>--select--</option>
        </select>
        <input type="text" style="float:left"/>
        <div style="float:left;position:relative;border:1px solid black">
            dummy Text  dummy Text  dummy Text  dummy Text  dummy Text  
        </div>
        <select style="float:left">
            <option>--select--</option>
        </select>
        <input type="text" style="float:left"/>
        <div style="float:left;position:relative;border:1px solid black">
            dummy Text dummy Text dummy Text dummy Text dummy Text dummy Text dummy Text dummy Text
        </div>
    </div>

Upvotes: 0

Jill
Jill

Reputation: 693

 #master {
width: 200px;
display: inline-block;
vertical-align: top;
}

Or Click here

Upvotes: 0

Related Questions