I'm encountering some layout issues with my HTML page. The titles are displaying in two columns as intended, but there seems to be inadequate spacing between them. Additionally, the submit button is not properly positioned below the form.
Below is a snippet of the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Subscription Management System</title>
<link rel="stylesheet" type="text/css" href="../styles/style1.css" />
</head>
<body>
<div id="logo">
<div class="left_part">
<a href="index.php"><img src="../images/demo.gif"></a>
</div>
<div class="right_part">
<div class="bigHead">Comic Subscription Management</div>
<div class="littleNavi">
<a href="../index.php?logout=1">LOG-OUT</a>
</div>
</div>
<nav>
<ul>
<!-- more navigation items here -->
</ul>
</nav></div>
<div id="contents">
<h2>Add New Titles</h2>
<form action="" method="post">
<ul>
<!-- input fields for adding new titles -->
<br><input type="submit" value="Add New Title(s)" name ="submit" id="submit">
</form>
</div>
<div id="footer">
<p>Administrator Control Panel </p>
</div>
</body>
</html>
The issue might be related to the CSS implementation. Here is the relevant CSS code that defines the layout:
/* Two Column Layout for Updates */
.col1 {
position: relative;
float: left;
width: 250px;
}
.col2 {
float: right;
position: relative;
width: 550px;
}
input[type="submit"] {
background-color: black;
border: 2px solid rgb(255, 255, 255);
border-radius: 7px;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 13pt;
font-weight: bold;
margin: 10px 0;
outline: none;
padding: 5px 15px;
}
#contents {
background:#fff;
width:900px;
padding:20px;
padding-top:5px;
}
<!-- more CSS styles -->
An image illustrating the current display situation is shown above. Let me know if you need further assistance or clarification on this matter.