Reputation: 195

How to make these two <div> inline?

I'm editing someone other's code, there's an existing form and css file, what I did is that I added 5 "select" tags into the form, and I want to make the selects inline.

Each select has a label, so I put them two in a div, thus I have 5 divs. I want to put the first 3 div in one row, and last 2 in another row. I was working on the css file for hours to get things work, but still failed.

The problem I'm getting now is that I cannot put the s in the same line, each of them occupies a separate line, so I have 5 rows in the form now... but I just need 2 rows.

Please help me on that, not quite familiar with CSS.

<html>
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
        <link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
    <form id="add_room" class="form_admin" action="addsystem.php" method="post">
      <fieldset>
      <legend>Add System</legend>

 <div id="sdw-div" style="white-space:nowrap; display:inline">     
    <label for = "sdw">sdw:</label>
    <select id="sdw" name="sdw" style="display:inline">
        <option selected="selected" value="0">0</option>
       <option  value="1">1</option>
       <option  value="2">2</option>
       <option  value="3">3</option>
       <option  value="4">4</option>
     </select>
</div>

 <div id="etl-div" style="white-space:nowrap; display:inline">       
    <label for = "etl">etl:</label>
     <select id="etl" style="display:inline" name = "etl">
        <option selected="selected" value="0">0</option>
        <option  value="1">1</option>
        <option  value="2">2</option>
        <option  value="3">3</option>
        <option  value="4">4</option>
    </select>
</div>

<div id="hdm-div" style="white-space:nowrap; display:inline">       
    <label for = "hdm">hdm:</label>
     <select id="hdm" style="display:inline" name = "hdm">
        <option selected="selected" value="0">0</option>
        <option  value="1">1</option>
        <option  value="2">2</option>
        <option  value="3">3</option>
        <option  value="4">4</option>
    </select>
</div><strong>

.........other two are just the same....

</form>
</html></strong>

and here is the css file for form_admin

form.form_admin {float: left; clear: left; margin: 2em 0 0 0}
.form_admin fieldset {float: left; width: auto; border: 1px solid <?php echo $admin_table_border_color ?>; padding: 1em}
.form_admin legend {font-size: small}
.form_admin div {float:left; clear:left;}
.form_admin label {
    display: block; float: left; clear: left;
    width: <?php echo $admin_form_label_width ?>em; min-height: 2.0em; text-align: right;
}
.form_admin input {
    display: block; float: left; clear: right;
</strong>    width: <?php echo $admin_form_input_width ?>em;
    margin-top: -0.2em; margin-left: <?php echo $admin_form_gap ?>em;
    font-family: <?php echo $standard_font_family ?>; font-size: small;
}
.form_admin select {
    display: block; float: left; clear:right; margin-left: 1.0em;
}

.form_admin input.submit {
    width: auto; margin-top: 1.2em; margin-left: <?php echo number_format(($admin_form_gap + $admin_form_label_width), 1, '.', '')?>em
}

Upvotes: 3

Answers (4)

Kai Hayati

Reputation: 59

try :

display:inline-block

i find it works better than elseware options

Upvotes: 1

kuldeep.kamboj

Reputation: 2606

Add style float:left for all five div. Also add a

<div style="clear:all"></div>

after third div. Also needed a parent container with proper width;

Upvotes: 0

Manish Mishra

Reputation: 12375

your divs are already display:inline, besides , you also have float:left-ed them.

still if they don't appear in the same line,then there is just one thing, your parent container doesn't have proper width to accommodate all the divs in same line.

so give appropriate width to your parent container

see this fiddle. everything's working!

Upvotes: 0