I've spent countless hours trying to properly display and align multiple divs. Despite extensive research, I just can't seem to get it right.
What I'm aiming for is to have the title of a section in the top left corner, an info box to the left of the title, and below both of those elements, a table within that section.
Right now, my main priority is creating a basic webpage where I can develop the layout before integrating it into WordPress.
|-----------------------------------------|-------------------------------------------| |.......................Title......................|...........................Info.....................| |-----------------------------------------|-------------------------------------------| |..........................................................................................................| |.................................................Table.................................................| |..........................................................................................................| |-------------------------------------------------------------------------------------|
It's frustrating how challenging this seemingly simple task has become.
Another issue I'm facing is ensuring the layout appears consistently across different browsers and devices, including desktop computers, tablets, and phones. Achieving this may require some extra effort, but I wanted to address it nonetheless.
The PHP-generated HTML code is as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Knights Tour</title>
<link rel="stylesheet" type="text/css" href="http://bmfmain/kt/game.css">
<script src="http://bmfmain/kt/jquery.min.js"></script>
</head>
<body>
<div id="header">
<div id="title">
<h1>Knight's Tour</h1>
</div>
<div id="info">
<p>adsf</p>
</div>
</div>
<div id="section">
<table id="game">
<!-- Table rows and cells here -->
</table>
</div>
<script src="http://bmfmain/kt/game.js"></script>
</body>
</html>
Please excuse the slight formatting discrepancies caused by copying and pasting.
Current CSS being utilized (subject to change):
html, body
{
margin: 0;
padding: 0;
}
#header
{
width: 800px;
margin: 0 auto;
float: top;
padding: 5px;
}
#title
{
width: 400px;
text-align: center;
float: left;
position: absolute;
}
#info
{
width: 400px;
text-align: center;
float: right;
position: absolute;
}
#section
{
width: 800px;
height: 800px;
margin: 0 auto;
float: bottom;
}
table
{
width: 100%;
height: 100%;
}
table, th, td
{
border: 1px solid #0000cc;
border-spacing: 0.0rem;
}
th, td
{
width: 8%;
height: 8%;
text-align: center;
background-color: transparent;
}
The questions at hand are: - How can I achieve the desired appearance of the divs as shown in the diagram? - How can I ensure consistent display on various platforms such as computers, tablets, and phones?
Thank you.
Link to current live example