the html is like this 1.css .box1 { background-color: black; border: 15px; color: rgb(255, 0, 43); height: 600px; padding-top: 10px; position: absolute; left: 50px; text-align: center; top: 150px; width: 350px; } .box2 { background-color: blue; border: 15px; color: rgb(255, 115, 0); height: 600px; padding-top: 10px; position: absolute; right: 150px; text-align: center; top: 150px; width: 350px; } #borrow { border-color: white; bottom: 10px; left: 0; margin: 0 auto; position: absolute; right: 0; width: 350px; } #return { border-color: white; bottom: 10px; left: 0; margin: 0 auto; position: absolute; right: 0; width: 350px; } html books library page 《tomandjerry》 author tom 《THIS IS A BOOK LIST 》 author LIST 《MARKHAM》 author MARK 《DONT GO ANYWHERE 》 author ANNY 《SDRWGB》 author GHI 《BOOK LIST 1 》 author KOLG 《BOOK LIST 2》 author KOWLG 《ANNY BOOKS 》 author JUMP 《HOW TO RUN 》 author RUN 《HOW TO SWIM》 author SWIM 《HOW TO JUMP 》 author JUMP borrow {{username}} Log Out return the CSS have some mistake ,how could i change it to make the box 1 shows in the left ,box 2 in the right side of the page ?
the html is like this
1.css
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel ="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="1.css">
<title>books </title>
</head>
<body>
<br>
<label class="index"> library page </label>
<br clear="all">
<br><br>
<article class="box1">
<section id="books page">
<form method="POST" action="/booklist">
</form>
<label class="books" for="BOOKS" title="BOOKS">
《tomandjerry》 author tom <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
<label class="books" for="BOOKS" title="BOOKS">
《THIS IS A BOOK LIST 》 author LIST <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
<label class="books" for="BOOKS" title="BOOKS">
《MARKHAM》 author MARK <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
<label class="books" for="BOOKS" title="BOOKS">
《DONT GO ANYWHERE 》 author ANNY <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
<label class="books" for="BOOKS" title="BOOKS">
《SDRWGB》 author GHI <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
</label>
<label class="books" for="BOOKS" title="BOOKS">
《BOOK LIST 1 》 author KOLG <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
<label class="books" for="BOOKS" title="BOOKS">
《BOOK LIST 2》 author KOWLG <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
<label class="books" for="BOOKS" title="BOOKS">
《ANNY BOOKS 》 author JUMP <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
</label>
<br clear="all">
</label>
<label class="books" for="BOOKS" title="BOOKS">
《HOW TO RUN 》 author RUN <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
</label>
<label class="books" for="BOOKS" title="BOOKS">
《HOW TO SWIM》 author SWIM <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
</label>
<label class="books" for="BOOKS" title="BOOKS">
《HOW TO JUMP 》 author JUMP <input type="checkbox" name="BOOK1" id="1111" value="tomand jerry by tom ">
</label>
<br clear="all">
</label>
</div>
<br>
<br>
<br>
<br>
<button id="borrow" disabled="">borrow</button>
</div>
<article class="box2">
<section id="loggedUser">
<form method="POST" action="/logout">
<label id="logName">{{username}}</label>
<button id="logOut">Log Out</label>
</form>
<br>
<br>
<br>
<button id="return" disabled="">return</button>
</section>
</div>
</body>
</html>
</html>
the CSS have some mistake ,how could i change it to make the box 1 shows in the left ,box 2 in the right side of the page ?
Step by step
Solved in 3 steps with 1 images
