Marta Marta - 6 months ago 18
CSS Question

Aligning HTML elements with CSS

I have to style a simple HTML document. The two labels have to be positioned on the left, the dropdown boxes have to be center and the image has to be positioned on the right. So far I tried it with but it does not work properly. There is always an element that is not correctly aligned. Please help me? Thanks in advance.



.fist_section label {
position: left
width: 30%;
}

.fist_section select {
position: center;
width: 40%;
}

.first_section img {
float: right;
}

<form>
<div class="first_section">
<img src="../img/img.jpg">
<label>Automobile:</lable>
<select class="fist_section_dropdown">
<option value="bmw">BMW</option>
</select>
<br>
<label>Automobile:</label>
<select class="fist_section_dropdown">
<option value="mercedes">Mercedes</option>
</select>
</div>
</form>




Answer

There are too many typos here, such as .fist_section should be .first_section, <\lable> should be <\label>, and so on.

position is not used for alignment but for define absolute or relative positioning. What you really need to write here is float: left.

.first_section label {
    float: left;
    width: 30%;
}

.first_section select {
    width: 40%;
}

.first_section img {
    float: right;
}
<form>
  <div class="first_section">
    <img src="../img/img.jpg">
    <label>Automobile:</label>
    <select class="first_section_dropdown">
      <option value="bmw">BMW</option>
    </select>		
    <br>	
    <label>Automobile:</label>
    <select class="first_section_dropdown">
      <option value="mercedes">Mercedes</option>
    </select>
  </div>
</form>