After designing the home page as a separate index.html file, I have multiple other pages that perform certain operations but lack a UI design. To address this, I decided to include the index.html file on all these pages. However, I encountered an issue where increasing the content width of some pages did not reflect changes in the index.html width.
The current layout looks like this:
--------------------
| index.html |
| --------------------
| | |
| | |
| | other page |
| |__________________|
--------------------
I want the width of index.html to automatically adjust when I increase the width of the other pages. How can I achieve this?
Code snippet for index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>X---todo---X</title>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="frame">
<div class="backbody">
<div class="header">
<img src="images/logo.png" class="logo">
<table border="0" class="tabs">
<tbody>
<tr>
<td>
<div class="mitem1"><span class="mitem"><a href="#">mq</a></span>
</div>
</td>
<td>
<div class="mitem1"><span class="mitem"><a href="#">mb</a></span>
</div>
</td>
<td>
<div class="mitem1"><span class="mitem"><a href="#">m6</a></span>
</div>
</td>
<td>
<div class="mitem2"><span class="mitem"><a href="#">ml</a></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
</html>
Relevant CSS for index.html:
body{
}
.header{
background:rgba(10, 10, 10, 0.64);
height:110px;
width:100%;
}
.backbody{
background:url(../images/aya.jpg);
width:100%;
height:520px;
}
.footer {
background: none repeat scroll 0 0 #333333;
color: white;
height: 60px;
position: relative;
width: 100%;
}
.body{
width:100%;
height:700px;
}
.frame {
box-shadow: 3px -2px 10px;
height: auto;
position: relative;
width: 100%;
}
.mitem > a {
color: white;
font-size: 80%;
font-weight: bold;
text-decoration: none;
}
.mitem1:hover{
background:#E07F1D;
width:auto;
color:black;
border-radius:10px;
}
.mitem2{
background:#E07F1D;
width:auto;
border-radius:10px;
}
.mitem1,.mitem2 {
padding: 6px 20px 7px 20px;
}
.tabs {
position:relative;
top:48px;
left:-15px;
float:right;
}
.logo{
position:relative;
left:20px;
}