I'm currently learning about HTML form elements and I'm having trouble aligning my input and select elements to the left. Even though I tried using float: right for alignment and text-align: left for text alignment, they are not pushing to the left as intended.
Code:
<div id="container">
<div class="addBooks">
<h1>Add Books</h1>
<hr>
<form action="#">
<fieldset>
<label for="bookname">Book Name:</label>
<input type="text" id="bookname" name="bookname">
<br />
<label for="category">Category:</label>
<select name="category">
<option value="value1">Value 1</option>
</select>
<br />
<label for="author">Author:</label>
<select name="author">
<option value="value2">Value 2</option>
</select>
</fieldset>
</form>
</div><!--- end of addBooks --->
</div><!--- end of container --->
Therefore, I decided to enclose my div class = "addBooks" within a div id = "container.
Css:
.addBooks {
clear: both;
width: 800px;
margin: 0 auto;
margin-top: 10%;
}
.addBooks label {
float: left;
width: 150px;
text-align: right;
}
.addBooks input {
float: right;
width: 150px;
text-align: left;
}
.addBooks select {
float: right;
text-align: left;
}
I aim to position my elements towards the middle-left like shown in this image. Appreciate any assistance provided!