My page is off, and Idk what I did! I needed my innermain to cover my page, and the content one picture, right next to the written content. All this should be inside the inner main, but it is not the case! 
Also, I have my top nav correct inside the design mode, however, it is not in the live version. Can any one take a look at my coding and see what I am doing wrong? Thank you in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>InVoke Studios</title>
<style>
body {
font-family:Verdana, Geneva, sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #333333;
}
#container {
height: 768px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
header {
font-family:Verdana, Geneva, sans-serif height: 125px;
width: 1024px;
background-color: #000;
color: #FFF;
}
#TitleBar {
height: 50px;
width: 1024px;
}
#Main {
height: 448px;
width: 1024px;
}
#Main #contentOne {
height: 448px;
width: 512px;
float: left;
}
#Main #ContentTwo {
height: 448px;
width: 512px;
float: right;
}
#innerMain {
background-color: #33C;
height: 376px;
width: 512px;
border-radius: 15px;
padding-top: 72px;
padding-left: 72px;
}
#TitleBar { background-color: #6FC; }
#TopNav {
height: 45px;
width: 1024px;
}
footer {
height: 100px;
width: 1024px;
}
footer #BottomNav {
height: 40px;
width: 1025px;
color: #FFF;
text-align: center;
display: block;
padding-top: 10px;
border-bottom-style: solid;
border-bottom-width: 2px;
}
h1 { font-family: "Comic Sans MS", cursive; }
h2 { margin: 0px; }
h1 { font-size: 4em; }
h2 { font-size: 1.5em; }
header {
padding: 35px 0 0 35px;
min-height: 95px;
width: 989px;
}
#TitleBar {
text-align: center;
height: 35px;
padding-top: 15px;
}
#TopNav a {
color: #F63;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
margin-right: 15px;
padding: 10px 0 0 15px;
width: 1009px;
height: 35px;
}
#TopNav a hover {border-bottom: 2px solid #F63;}
#TitleBar {background-color: #33C;}
#TitleBar h2 {color: #FFF;}
#BottomNav a {
margin-right: 15px;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>InVoke Studios</h1>
</header>
<div id="TitleBar">
<h2>Creative Minds +</h2>
</div>
<nav id="TopNav">
<p><a href="#">Home</a> <a href="https://www.youtube.com/channel/UCeloVM6iK0SHFLKhy8oUkuA">Youtube</a> <a href="#">Art</a> <a href="#">Podcast</a> <a href="file:///E|/Invoke Contact us.html">Contact Us</a></p>
</nav>
<div id="Main">
<div id="innerMain"></div>
<div id="contentOne">Content for id "contentOne" Goes Here <img src="InVoke Studios Website/Images/skyline_zpswb7kjlil.jpg" width="1024" height="495" alt="Cleveland"></div>
<div id="ContentTwo">
<div data-tower-id="1456935922904-0" data-automation-hook="row-pip">
<div data-automation-hook="title-pip" data-tower-id="1456935922904-0-0">
<h2 data-automation-hook="title">
<div>
<p><span data-color="#b31f28"><span data-color="#ee2143">Welcome To Our Studio</span></span></p>
</div>
</h2>
</div>
</div>
<div data-tower-id="1456935922904-1" data-automation-hook="row-pip">
<div data-automation-hook="paragraph-pip" data-tower-id="1456935922904-1-0">
<div>
<p>InVoke Studios is a space for creative minds to explore. Started as an idea around the kitchen table, founder Chad Smith found it frustrating that accessing a one-stop-shop for all things Media and Communication was nearly impossible to find. As a solution, him and his team strive to offer the best services themselves, as well as assisting clients in finding the outside resourcing they need, all in one place. With experience in Public Relations and Filmography and Photography, InVoke Studios provides pre- and post-production services such as planning and creating projects via film, photo, and writing, as well as editing. InVoke Studios also promotes and produces all the projects that clientele present. The InVoke Studios team prides itself on being a quality driven team, not a profit driven team. Whatever you need, InVoke Studios will deliver the quality and efficiency you need to make your vision come true!</p>
</div>
</div>
</div>
</div>
<!--/main--></div>
<footer>
<nav id="BottomNav"><a href="#">Terms of Service</a> <a href="#">Privacy Policy</a> <a href="#">Partners</a> <a href="#">Contact Number: 1-440-258-9704</a></nav>
</footer>
<!--/container--></div>
</body>
</html>
1 Correct answer
To contain floats, use overflow:hidden on the parent container.
#Main {
height: 448px;
width: 1024px;
overflow: hidden /**control floats better**/
}
You have a mistake in your CSS code below. Can you tell me why this is wrong?
header {
font-family:Verdana, Geneva, sans-serif height: 125px;
width: 1024px;
background-color: #000;
color: #FFF;
}
I should also mention that using explicit height values is a very bad practice. This will come back to bite you later when the actual content
...
3
Replies
AdChoices