Css Align Div next to another Div

Question

Can someone please help me with this css? I am very new and for some reason cannot figure something out that seems to be extremely simple. What I am trying to do is have gvw_field align next to the ew_field. I am not sure how to align the <div> 's next to each other.

http://jsfiddle.net/r45xfbex/

#gvw_field {
 text-align:center;
}

<div class="clearfix">

 <div id="ew_field">
  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" value="">
    </div>
    
    <div id="gvw_field">     
  <label for="gvw" >Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" value="">
    </div>
    
    <div id="ft_field">     
  <label for="ft">Feet:</label>
  <input type="text" name="ft" id="ft" value="">
    </div>
    
</div>

Please search a little before post ...just with your tittle you get good resources from google... Try searching about `float or inline-block` — DaniP, Dec 11 '14 at 14:00
This question appears to be off-topic because this doesn't show any effort or research to solve the problem — DaniP, Dec 11 '14 at 14:02
possible duplicate of [CSS two divs next to each other](http://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other) — radiovisual, Dec 12 '14 at 12:44
This question has been answered all over SO, and all over the web. I recommend that you google for the solution before you use SO, and only post questions that truly have you stumped even after your research. — radiovisual, Dec 12 '14 at 12:46

Rahul Desai · Accepted Answer · 2014-12-11T14:59:17.103

1

Working jsFiddle Demo

The display: inline property will do it.

#gvw_field, #ew_field{
  display: inline;
}

Readup about display property on MDN.

Working code snippet:

#gvw_field {
 text-align:center;
}

#gvw_field, #ew_field{
  display: inline;
}

<div class="clearfix">

 <div id="ew_field">
  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" value="">
    </div>
    
    <div id="gvw_field">     
  <label for="gvw" >Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" value="">
    </div>
    
    <div id="ft_field">     
  <label for="ft">Feet:</label>
  <input type="text" name="ft" id="ft" value="">
    </div>
    
</div>

edited Dec 11 '14 at 14:59

answered Dec 11 '14 at 14:01

Rahul Desai

15,242
19
83
138

what if I wanted like 3 spaces in between them? I only know how to do it with ` ` – Dec 11 '14 at 14:25
@Vicki You can add blank pixels in between them. Just do: `#gvw_field { margin-left: 5px;}` or any number of blank pixels that you want. Note that if you add too many pixels that do not fit those elements in a single line, the second element will come on the next line. – Rahul Desai Dec 11 '14 at 14:35

Sleek Geek · Answer 2 · 2014-12-11T14:13:52.270

0

You you need a display value of inline and also a given width.

 #ew_field, #ft_field, #gvw_field  {
    text-align: center;
    display: inline-block;
    width: 150px; /* Adjust as needed */
}

See working demo here

edited Dec 11 '14 at 14:13

answered Dec 11 '14 at 14:00

Sleek Geek

4,638
3
27
42

score 0 · Answer 3 · answered Dec 11 '14 at 14:01

Use floats to align each <div>

#gvw_field {
 text-align:center;
}

.column{
    width: 33.33%;
    float: left;
}

<div class="clearfix">

 <div class="column" id="ew_field">
  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" value="">
    </div>
    
    <div class="column" id="gvw_field">     
  <label for="gvw" >Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" value="">
    </div>
    
    <div class="column" id="ft_field">     
  <label for="ft">Feet:</label>
  <input type="text" name="ft" id="ft" value="">
    </div>
    
</div>

score 0 · Answer 4 · answered Dec 11 '14 at 14:05

use float and don't use same id for many items:

CSS:

.ft_field
{
    float: right;
        width: 50%;

}

label {
    display: inline-block;
  width: 170px;
}

.gvw_field {
    float: right;
    width: 50%;
}

HTML:

<div class="clearfix">

    <div class="ew_field">
        <label for="ew">Empty Weight:</label>
        <input type="text" name="ew" id="ew" value=""/>
    </div>

    <div class="gvw_field">     
        <label for="gvw" >Gross Vehicle Weight:*</label>
        <input type="text" name="gvw" id="gvw" value=""/>
    </div>

    <div class="ft_field">     
        <label for="ft">Feet:</label>
        <input type="text" name="ft" id="ft" value=""/>
    </div>

</div>

jsfiddle

Css Align Div next to another Div

4 Answers4