As I embark on my coding journey, I am faced with the challenge of creating a website that features full-width (100%) containers with fixed-width containers nested inside. Despite my efforts to experiment with both figures and divs, I have not been successful.
This image showcases the mockup of the site: https://i.sstatic.net/HYOAb.jpg
Below is the snippet of code that I currently have:
HTML:
<div id="wrapper">
<header>
<div class="header">
.logo
.searchbar
.phone numbers insert
</div> <!--closes header div-->
</header>
<div class="navband">
<nav>
<ul class="nav">
<li><a href="#">Engineered Integrated Solutions</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Employment</a></li>
</ul>
</nav>
</div> <!--closes navband div-->
<div class="content">
<h2>Header</h2>
<p>Content Here</p>
</div> <!--closes content div-->
CSS:
#wrapper {
width: 950px;
margin: 0 auto;
}
header {
width: 100%;
height: 175px;
background-color: #ff8400;
}
#nav {
margin-top: 280px;
width: 100%;
}
.nav {
list-style: none;
margin: 0;
text-align: left;
background-color: #08172d;
padding: 5px 0;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
color: #fff;
font-family: arial;
font-weight: bold;
text-decoration: none;
}
.nav a:hover{
display:inline-block;
padding:10px;
color: #ff8400;
font-family: arial;
font-weight: bold;
}
The code provided above renders a layout with fixed width (while leaving the rest of the body white), but it fails to include separate full-width parent divs for the header, navigation bar, and content area without disregarding the wrapper entirely. When attempting to use a figure method, the issue persisted. Any suggestions on how to tackle this problem would be greatly appreciated?