Mia Legaspi Mia Legaspi - 7 months ago 14
HTML Question

Pushing elements through left won't work properly

I'm just new learning HTML form elements. How can I properly push my input and select elements to the left? I align my elements to left

float: right
and align my text to the right
align-text: left
but it didn't pushing to the left.

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 --->


so I wrap my
div class = "addBooks"
with
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'm planning to push my elements to the mid-left like this. Thanks for the help!

Screenshot

Answer

You don't need to use float: right; to do this but you can use margin-left instead :

.addBooks input
{
    width: 150px;
    text-align: left;
    margin-left: 200px
}

.addBooks select
{
    text-align: left;
    margin-left: 200px
}

See this fiddle