Help CSS align elements

Asked

Viewed 30 times

-1

I am new to Web development and am having difficulty in a situation here.

I want to align a button to the left of the div I created by CSS, but so far I could not.

Can you help me? Thank you in advance!

Follows the code: 


    <header><h1>Vamos Contar!</h1></header>


    <section>

        <div id="box1">

            <table>
            <table id="tb1">
                <tr>
                    <th>Inicio:</th>
                </tr>

                <tr>    
                    <th>Fim:</th>
                </tr>

                <tr>
                    <th>Passo:</th>
                </tr>

            </table>

            <table id="tb2">

                <tr>
                    <th><input type="number" name="pas" id="n1"></th>
                </tr>

                <tr>    
                    <th><input type="number" name="pas" id="n2"></th>
                </tr>

                <tr>
                    <th><input type="number" name="pas" id="pas"></th>
                </tr>
            </table>
        </table>
        </div>

        <div id="box2">

           <input type="button" value="Contar" name="btn1" id="btn1">





        </div>



    </section>


    <footer><h6>Atividade 1</h6></footer>

    <script src="script.js">

    </script>
</body>```


_______________________________________________________________________________


```body{
    font: normal 15pt Arial;
    background: rgb(228, 70, 96)
}

header{
    color: #ffffff;
    margin: 30px;
    text-align: center;


}

section {
    background: #ffffff;
    border-radius: 25px;

    padding: 15px;
    width: 500px;
    height: auto;
    margin: auto;
    box-shadow: 5px 5px 10px rgba(7, 7, 7, 0.534);


}



#tb1 {
    border-spacing: 10px;
    border: 0px solid black;
    text-align: left;
    float: left;


}



#tb2{

    border: 0px solid black;
    border-spacing: 9px;
    text-align: left;





}

#box2{
    align-items: left;
    justify-content: left;



}


#btn1{





}

footer{
    color: #ffffff;
    margin: auto;
    text-align: center;
    font-style: italic;
    margin: 30px

}```
html css html5 css3

  • Cara takes advantage that he is learning now and follow new practices, it has been many time that developing layout with tables is no longer practiced, gives a researched in flexbox, grid-layout.

1 answer

0

Put a 10px padding-left on your #box2 which is the div that contains the button, like this:

 #box2{
   padding-left:10px;
 }

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.