I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this:
| | | | | |
| | | | | |
| | div1 | |div2| |
| | | | | |
| | | | | |
The goal is to have "Div 2" perfectly centered between "Div 1" and the edge of the page. Despite my efforts, none of the methods I've tried seem to work.
Here is a snippet of my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="teste.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="teste.js"></script>
<title>Example</title>
</head>
<body>
<div id="header">
<div class="title"">Example</div>
</div>
<div id="main-body">
<ul class="nav-tabs">
<li class="active-tab"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
<div id="right-menu"></div>
<footer>
</footer>
</body>
</html>
And here is a part of my CSS styling:
/* Font Nunito used for the title */
@import url(http://fonts.googleapis.com/css?family=Nunito);
/*----------------------------------------------*/
/* Background color of the page */
body {
background-color: #cccccc;
}
/*----------------------------------------------*/
/* Header */
/* Color and size */
#header {
background-color: #669966;
background-size: cover;
height: 100px;
width: 100%;
clear: both;
margin: 0;
padding: 0;
position: relative;
}
/* Title */
#header .title {
color: #cccccc;
font-family: Nunito;
font-size: 50px;
font-style: italic;
line-height: 46px;
left: 60px;
top: 30px;
position: absolute;
}
/*----------------------------------------------*/
/* Tabs */
.nav-tabs {
background-color: #cccccc;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
/* Tab cells */
.nav-tabs li {
background-color: gray;
color: white;
font-size: 1.2em;
padding: 10px 90px 10px 90px;
border-radius: 8px 8px 0 0;
}
/* Active tab */
.active-tab {
background-color: white;
color: red;
font-size: 1.2em;
padding: 10px 90px 10px 90px;
border-radius: 8px 8px 0 0;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
/*----------------------------------------------*/
/* Main body (this is "div 1")*/
#main-body {
background-color: white;
height: 100vh;
width: 900px;
margin: 5px 0 5px 100px;
display: inline-block;
}
/*----------------------------------------------*/
/* Right menu (this is "div 2") */
#right-menu {
border: 2px solid red;
background-color: yellow;
height: 30px;
width: 50px;
display: inline-block;
}
/*----------------------------------------------*/
/* Footer */
footer {
background-color: #333333;
height: 200px;
width: 100%;
margin: 0;
padding: 0;
}
If anyone can offer some assistance, I would greatly appreciate it!
[EDIT] Thank you to everyone who provided solutions. The issue has been successfully resolved!