HTML/CSS is something with which I'm not experienced. Do I'm having a bit of a problem getting my buttons to line up in 2 side-by-side UL columns in CSS. The buttons of the second column start BELOW and to the RIGHT of the first column of buttons instead of at the top and even with the first column. The only way I seem to be abe to do it is to use a float: right, a margin: top with a high negative value and a margin: right with a high value. I thought about using a table instead, but I'm not sure if it's possible to style a table to appear I'd want it on the page using CSS. At any rate, below is the code. Any thoughts and advice would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head></head>
<style>
/* <<<<<<<<<< DIV1 >>>>>>>>>> */
.div1 ul {
list-style: none;
}
.div1 ul li a {
text-decoration: none;
height: 45px;
width: 250px;
background-color:#855C33;
display:block;
padding:5px;
border-top: 4px solid #CEBEAD;
border-left: 4px solid #CEBEAD;
border-right: 4px solid #0E0900;
border-bottom: 4px solid #0E0900;
text-align: center;
line-height: 2;
font-family:Times;
color:#E0D1B2;
font-size:1.25em;
margin: 10px;
}
.div1 a:hover
{
color: forestgreen;
background-color: black;
}
/* <<<<<<<<<< DIV2 >>>>>>>>>> */
.div2 ul {
list-style: none;
float: right;
margin-top: -673px;
margin-right: 800px;
}
.div2 ul li a
{
margin-top: 10px;
text-decoration: none;
height: 45px;
width: 250px;
background-color:#855C33;
display:block;
padding:5px;
border-top: 4px solid #CEBEAD;
border-left: 4px solid #CEBEAD;
border-right: 4px solid #0E0900;
border-bottom: 4px solid #0E0900;
text-align: center;
line-height: 2;
font-family:Times;
color:#E0D1B2;
font-size:1.25em;
margin: 10 px;
}
.div2 a:hover
{
color: forestgreen;
background-color: black;
}
</style>
<!-- <<<<<<<<<< END CSS >>>>>>>>>> -->
<body>
<!-- BEGIN FIRST COLUMN -->
<div class="div1">
<ul>
<li><a href="https://www.google.com/">DIV 1 BUTTON 1</a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 2 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 3 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 4 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 5 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 6 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 7 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 8 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 9 </a></li>
</ul>
</div>
<!-- BEGIN SECOND COLUMN -->
<div class="div2">
<ul>
<li><a href="https://www.google.com/">DIV 2 BUTTON 1</a></li>
<li><a href="https://www.google.com/">DIV 2 BUTTON 2</a></li>
<li><a href="https://www.google.com/">DIV 2 BUTTON 3</a></li>
</ul>
</div>
<!-- END COLUMNS -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head></head>
<style>
/* <<<<<<<<<< DIV1 >>>>>>>>>> */
.div1 ul {
list-style: none;
}
.div1 ul li a {
text-decoration: none;
height: 45px;
width: 250px;
background-color:#855C33;
display:block;
padding:5px;
border-top: 4px solid #CEBEAD;
border-left: 4px solid #CEBEAD;
border-right: 4px solid #0E0900;
border-bottom: 4px solid #0E0900;
text-align: center;
line-height: 2;
font-family:Times;
color:#E0D1B2;
font-size:1.25em;
margin: 10px;
}
.div1 a:hover
{
color: forestgreen;
background-color: black;
}
/* <<<<<<<<<< DIV2 >>>>>>>>>> */
.div2 ul {
list-style: none;
float: right;
margin-top: -673px;
margin-right: 800px;
}
.div2 ul li a
{
margin-top: 10px;
text-decoration: none;
height: 45px;
width: 250px;
background-color:#855C33;
display:block;
padding:5px;
border-top: 4px solid #CEBEAD;
border-left: 4px solid #CEBEAD;
border-right: 4px solid #0E0900;
border-bottom: 4px solid #0E0900;
text-align: center;
line-height: 2;
font-family:Times;
color:#E0D1B2;
font-size:1.25em;
margin: 10 px;
}
.div2 a:hover
{
color: forestgreen;
background-color: black;
}
</style>
<!-- <<<<<<<<<< END CSS >>>>>>>>>> -->
<body>
<!-- BEGIN FIRST COLUMN -->
<div class="div1">
<ul>
<li><a href="https://www.google.com/">DIV 1 BUTTON 1</a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 2 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 3 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 4 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 5 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 6 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 7 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 8 </a></li>
<li><a href="https://www.google.com/">DIV 1 BUTTON 9 </a></li>
</ul>
</div>
<!-- BEGIN SECOND COLUMN -->
<div class="div2">
<ul>
<li><a href="https://www.google.com/">DIV 2 BUTTON 1</a></li>
<li><a href="https://www.google.com/">DIV 2 BUTTON 2</a></li>
<li><a href="https://www.google.com/">DIV 2 BUTTON 3</a></li>
</ul>
</div>
<!-- END COLUMNS -->
</body>
</html>
