I need assistance with structuring my HTML page, which consists of header, main, and footer sections.
Below is the HTML and CSS code I'm utilizing:
HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/ico" href="/static/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="/static/css/eGirvi.css">
<title>eGirvi ERP for jewellers</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<img src="/media/logo.png">
</div>
</div>
<div id="main">
<div id="content">content</div>
<div id="right-sidebar">right-sidebar</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
CSS code :
/*Header div start here*/
#header{
border: 1px dotted;
height: 100px;
}
/*Header div end here*/
/*Logo start here*/
#logo{
width: 100px;
height: 100px;
}
/*Logo start here*/
/*Main start here*/
#main{
min-height: 800px;
border: 2px solid;
}
/*main end here*/
/*content start here*/
#content{
min-height: 800px;
border: 2px dashed;
float: left;
}
/*content end here*/
/*right-sidebar start here*/
#right-sidebar{
min-height: 800px;
width: 100px;
border: 2px solid;
float: right;
}
/*right-sidebar end here*/
/*footer start here*/
#footer{
clear: both;
border: 1px dotted;
height: 100px;
}
/*footer end here*/
I am looking to set the 'content' div to occupy the remaining width of the page, which would be (total page width minus the width of the right-sidebar). Can anyone provide insights or suggestions?