I face the problem that when I put float to my #middle-content. The float doesn't display. Moreover, this removes its background too. I want the middle-content to be at the right of #leftcontent. Help please!!
<body>
<div id="page">
<div id="banner">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" /> </div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div> <!--banner-->
<div id="maincontent">
<div id="leftcontent">
<div class="navigation">
Home
</div><!--navigation-->
<div class="navigation">
About Us
</div><!--navigation-->
<div class="navigation">
Products
</div><!--navigation-->
<div class="navigation">
Contact
</div><!--navigation-->
<div class="navigation">
ABOUT US
</div><!--navigation-->
</div> <!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div> <!--middle-content-->
</div> <!--maincontent-->
</div> <!--page-->
</body>
And this is my CSS
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align:center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
#leftcontent {
width: 150px;
display: table;
}
#middle-content {
width: 400px;
float: left;
}
You need to float the #leftcontent, and to fix the background, add a clear fix
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align: center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
.clear:after {
content: '';
display: block;
clear: left;
height: 0;
}
#leftcontent {
width: 150px;
display: table;
float: left;
}
#middle-content {
padding-top: 1px;
width: 400px;
float: left;
}
<div id="page">
<div id="banner" class="clear">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
<div id="maincontent" class="clear">
<div id="leftcontent">
<div class="navigation">
Home
</div>
<!--navigation-->
<div class="navigation">
About Us
</div>
<!--navigation-->
<div class="navigation">
Products
</div>
<!--navigation-->
<div class="navigation">
Contact
</div>
<!--navigation-->
<div class="navigation">
ABOUT US
</div>
<!--navigation-->
</div>
<!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div>
<!--middle-content-->
</div>
<!--maincontent-->
</div>
<!--page-->
I have also added 1px top padding to middle-content to stop the h2 margin causing a gap above maincontent
Update
Sounds like your dreamweaver does not support pseudo elements, see if this fixes your clear problem:
change css .clear:after to:
.clear {
display:block;
height:0;
overflow:hidden;
clear:both;
}
and then in the html above, find the divs with the clear class and remove the class, then at the end of those divs, add a physical div to see if it fixes your problem:
<div class="clear"></div>
try this
#leftcontent {
width: 150px;
float:left;
}
#middle-content {
width: 400px;
float: left;
}
also I have added
#maincontent:before,
#maincontent:after{
clear:both;
display:table;
content:"";
}
to fix the background color
working code is here
For your problems, i have the following solutions:
#maincontent can't show its background because its height is 0. You can fix it :
#maincontent {
background-color: #A6D2FF;
height:250px;
}
#leftcontent must have float:left so the middle-content to be at the right of #leftcontent
#leftcontent {
width: 150px;
display: table;
float: left;
}
Related
I am html/css beginner and Created this webpage in which there is three main divs header,boxcontainer,footer.
there is some problem with footer div that its background is not showing before its text. i have used float in box container divs.
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white;
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
div#footer {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Clear the float for the footer using clear:both
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
div#footer {
clear: both;
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events
<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Always set layout of parent element while using float on child
elements.
You haven't set layout of parent element in your code.
There are many ways of setting layout. You can use overflow: hidden i.e:
#boxcontainer {
overflow: hidden;
}
Alternatively you can use :after pseudo element as well:
#boxcontainer:after {
display: block;
content: '';
clear: both;
}
div#header {margin-left:1%;background-color:lightblue;height:30px;width:95%;}
ul#menu li {margin:10px;color:black;font-size:25px;display:inline;margin-top:100px;}
ul#menu li:hover{color:white}
div.box { background-color:lightblue;height:200px;width:200px;float:left;margin:10px;width:35%;}
div.boxhead {background-color:yellow;height:30px;padding:0px;width:100%;}
div.boxhead p {font-size:150%;text-align:center;color:lightblue;height:30px;width:200px;padding:0px;-webkit-margin-before: 0.0em;-webkit-margin-after:0.0em;}
div#footer {margin-left:1%;background-color:lightblue;width:95%;}
#boxcontainer {overflow: hidden;}
<div style="margin: auto;width: 95%;"id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
Instead of using a <div>, try using the tag <footer>.
html
<footer class="footer">
<p>Your content</p>
</footer>
css
.footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
Here are two solutions for your case:
Remove the float of the footer div
#footer {
float:none;
}
or
2.Add helper class clearfix to your footer div:
<div id="footer" class="clearfix">
with the following style, which will clear the float
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
hi you can add this code for footer : clear:both
div#footer {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
clear: both;
}
and for more reference see this link : https://jsfiddle.net/
thanks
Add .clearfix class to the parent of float elements:
<div id="boxcontainer" class="clearfix">...</div>
CSS for .clearfix:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Also, I think that you need not fixed height at your footer. So, remove height: 30px; from your footer div.
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white;
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
div#footer {
margin-left: 1%;
background-color: lightblue;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer" class="clearfix">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Just remove height: 30px from footer and add float: left;
div#footer {
margin-left: 1%;
background-color: lightblue;
width: 95%;
float: left;
}
First You need to set the style for footer
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Then You call
<div id="footer">footer</div>
I am trying to create a footer where there is text to the left, center and right. So far I have done this but the issue is the divs in center are stacking up vertically rather than horizontally. I have tried applying float:left to the .entypo elements which works, but it moves all of them next to .footerslinks-left, instead of staying in the center.
http://jsfiddle.net/8uL2e4bw/
So the HTML is as followed:
<footer>
<div class="topfooter">
<ul class="footerlinks-left">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="footeraddress-right">
<p>Address</p>
<p>11 Name Road</p>
<p>TE5 7IN</p>
<p>City</p>
<p>Postcode</p>
<div class="entypo-phone">01234567890</div>
<div class="entypo-mail">hello#salon.com</div>
</div>
<div class="footersocial-center">
<div class="entypo-facebook-circled"> </div>
<div class="entypo-twitter-circled"> </div>
<div class="entypo-gplus-circled"> </div>
</div>
</div>
</footer>
Yes I am aware the code is not the tidiest, I should probably address this first to avoid unnecessary complications!
CSS:
footer {
text-align: left;
padding: 10px;
background-color: black;
color: #da82da;
}
.topfooter {
margin: 10px auto;
max-width: 720px;
}
.footerlinks-left, .footerlinks-left a {
float: left;
color: #da82da;
list-style: none;
text-decoration: none;
margin-left: 20px;
}
.footersocial-center {
font-family: 'entypo';
font-size: 30px;
overflow:hidden;
text-align:center;
}
.footeraddress-right {
float: right;
}
.footeraddress-right p {
margin: 0;
padding: 2px;
}
.entypo-phone, .entypo-mail {
font-family: 'entypo', sans-serif;
padding: 2px;
}
The default display property for a div is block, which expands to 100% width.
Try with:
.footersocial-center div {
display: inline;
}
#import url(http://weloveiconfonts.com/api/?family=entypo);
footer {
text-align: left;
padding: 10px;
background-color: black;
color: #da82da;
}
.topfooter {
margin: 10px auto;
max-width: 720px;
}
.footerlinks-left, .footerlinks-left a {
float: left;
color: #da82da;
list-style: none;
text-decoration: none;
margin-left: 20px;
}
.footersocial-center {
font-family: 'entypo';
font-size: 30px;
overflow:hidden;
text-align:center;
}
.footeraddress-right {
float: right;
}
.footeraddress-right p {
margin: 0;
padding: 2px;
}
.entypo-phone, .entypo-mail {
font-family: 'entypo', sans-serif;
padding: 2px;
}
.footersocial-center div{
display: inline;
}
<footer>
<div class="topfooter">
<ul class="footerlinks-left">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="footeraddress-right">
<p>Address</p>
<p>11 Name Road</p>
<p>TE5 7IN</p>
<p>City</p>
<p>Postcode</p>
<div class="entypo-phone">01234567890</div>
<div class="entypo-mail">hello#salon.com</div>
</div>
<div class="footersocial-center">
<div class="entypo-facebook-circled"> </div>
<div class="entypo-twitter-circled"> </div>
<div class="entypo-gplus-circled"> </div>
</div>
</div>
</footer>
I am trying to make a header wider, so that it extends to both sides of the browser size. I have all of my content inside of a wrapper div that is set to 990px. My header is the part I want to be full width. I also am trying to make my header have a fixed position. But when i put the corrected position into the css for the header, the title and the navigation bar stack vertically and do not remain how I originally set them.
<body>
<div class="wrapper">
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="main">
<p>Welcome to the #1 stop in automotive today</p>
<div class="article">
<img class="image" src="http://cdnedge.vinsolutions.com/dealerimages/Dealer%204697%20Images/content/car-tire-repair.jpg">
</div>
<div class="article">
<img class="image" src="http://www.lonniesautomachineshop.com/shopimg/Engines1.jpg">
</div>
<div class="article">
<img class="image" src="http://image.superstreetonline.com/f/features/modp-1011-castrol-syntec-top-car-challenge-nissan-gtr/29181584/eurp_1011_02_o+castrol_syntec_top_car_challenge+lift.jpg">
</div>
</div><!--end of main-->
<div class="main-two">
<p id="two-header">Schedule today for a free consultation</p>
<div class="article">
<img class="image" src="http://s3-media2.fl.yelpcdn.com/bphoto/YDLPwsEk_fMXIw9Xwu_8rw/ls.jpg">
</div>
<div class="article">
<img class="image" src="http://image.trucktrend.com/f/tech/1011tr_2004_gmc_sierra_buildup/28770854/1011tr_03+2004_GMC_sierra_buildup+factory_ring_and_pinion.jpg">
</div>
<div class="article">
<img class="image" src="http://aautomotivetx.com/wp-content/uploads/2013/04/Brakes.jpg">
</div>
</div><!--end of main-two-->
<div class="main-three">
<p id="two-header">Guranteed service for 30 days</p>
<div class="article">
<img class="image" src="http://bernalautobodyrepair.com/images/paint_booth.jpg">
</div>
<div class="article">
<img class="image" src="https://www.bkreader.com/wp-content/uploads/2015/06/welding-1.jpg">
</div>
<div class="article">
<img class="image" src="http://cdn.instructables.com/F4Q/QD4F/HHS9SLP0/F4QQD4FHHS9SLP0.LARGE.jpg">
</div>
</div><!--end of main-three-->
<footer class="footer">
<p class="copyright">Schedule now! Call today at (123)456-7890.</p>
<p class="copyright-two">Copyright © All Rights Reserved.</p>
<div class="social-icons">
<img src="http://www.voxlumiere.com/wp-content/uploads/2009/12/facebook-logo-resized-image-50x50.png"/>
<img src="http://www2.actionforchildren.org.uk/media/128162/twitter_50x50.jpg"/>
<img src="http://www.clickondetroit.com/image/view/-/21435108/highRes/1/-/ubsa5pz/-/50x50-Instagram-logo-png.png"/>
</div><!--end of social-icons-->
</footer>
</div><!--end of wrapper-->
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: arial, sans-serif;
color: black;
background-image: url("http://www.theonecar.com/wp-content/uploads/2014/02/car-shops-499.jpg"), url("http://i.ytimg.com/vi/1n5j3sy-Rok/maxresdefault.jpg");
background-repeat: no-repeat;
background-position: top, bottom;
}
.wrapper {
font-size: 1.6em;
margin: 0 auto;
width: 990px;
background-color: white;
/*padding: 2em;*/
}
header {
background-color: white;
height: 50px;
display: block;
width: 100%;
}
header h1 {
float: left;
padding: 5px;
color: rgb(95, 207, 128);
margin-top: 5px;
margin-left: 100px;
font-size: 1.8em;
}
.navlist a {
text-decoration: none;
color: black;
}
.navlist a:hover {
color: white;
background-color: rgb(95, 207, 128);
padding: 15px;
}
.navlist {
float: right;
display: inline-block;
text-align: center;
padding: 15px;
font-size: 1.2em;
}
.main {
min-height: 20px;
background-color: rgb(95, 207, 128);
display: block;
width: 100%;
}
.main p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.image {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
}
.main-two {
background-color: #39ADD1;
display: block;
}
.main-two p {
color: white;
font-size: 1.6em;
padding: 50px;
text-align: right;
width: 100%;
}
.main-three {
min-height: 20px;
background-color: #f08c35;
display: block;
width: 100%;
}
.main-three p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
footer {
background-color: #294860;
}
.copyright {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.copyright-two {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.social-icons {
display: inline-block;
padding: 5px;
margin-left: 40.2%;
width: 100%;
}
.social-icons a {
margin-left: 5px;
header {
...
width: 100%;
min-width: 990px;
position: fixed;
left: 0;
}
Demo
You're seeing horizontal scrolling because the site loads in a frame. That shouldn't happen in a full browser window.
you header would need to be outside the wrapper since the wrapper is 990px wide.
make the header width 100% but it needs to either be on the root of the div structure or in another 100% width element.
Because it's inside you're <div class="wrapper"> It's not possible,
Move it above the wrapper and it should work.
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="wrapper">
I'm trying to move the white box, topBoxFlag up to the top of its parent topBox. However, due to the relative layout it's being pushed down below the red box. How would I push it upwards? I tried an absolute layout, but decided this wouldn't work as it'd occur for all of my other boxes and I feel it'd be extremely inefficient. Is there something like float that can push it right to the top of its parent?
body
{
background-color: #C6E0F5;
}
#wrapper
{
position: relative;
margin: auto;
width: 1000px;
height: 2900px;
max-width: 1000px;
background-color: #C6E0F5;
}
#header
{
position: relative;
width: 100%;
height: 170px;
background-color: #00247D;
}
#navbar
{
position: relative;
width: auto;
bottom: 20px;
height: 35px;
text-align: center;
background-color: #CF142B;
}
#navbar ul li
{
list-style-type: none;
padding: 20px;
text-align: center;
font-family: "Trebuchet MS";
font-size: 25px;
display: inline;
}
#navbar ul li a
{
text-decoration: none;
font-weight: bold;
color: #fff;
}
.topbox
{
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
}
.topbox h1
{
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox #topboxFlag
{
float: right;
width: 300px;
height: 400px;
background-color: #fff;
}
.partybox
{
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
margin-top: 15px;
}
.partybox h1
{
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
<html>
<head>
<title>Learn which parties are doing what</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id = "wrapper">
<div id = "header">
<div id = "logo"></div>
</div>
<div id = "navbar">
<ul>
<li>Major Parties</li>
<li>Minor Parties</li>
<li>Why Vote</li>
<li>About Us</li>
</ul>
</div>
<div class = "topbox">
<h1>The Conservative Party</h1>
<div id = "topboxFlag"></div>
</div>
<div class = "partybox">
<h1>The Labour Party</h1>
<div id = "partyboxFlag"></div>
</div>
<div class = "partybox">
<h1>The Liberal Democrats</h1>
</div>
<div class = "partybox">
<h1>The UK Independence Party</h1>
</div>
<div class = "partybox">
<h1>The Green Party</h1>
</div>
<div class = "partybox">
<h1>The Scottish National Party</h1>
</div>
</div>
</body>
</html>
Just add one more css to you stylesheet and you are good to go.
.topbox h1{
margin:0;
float: left;
}
Since you topboxFlag class has a float, you should also add float to your heading.
body {
background-color: #C6E0F5;
}
#wrapper {
position: relative;
margin: auto;
width: 1000px;
height: 2900px;
max-width: 1000px;
background-color: #C6E0F5;
}
#header {
position: relative;
width: 100%;
height: 170px;
background-color: #00247D;
}
#navbar {
position: relative;
width: auto;
bottom: 20px;
height: 35px;
text-align: center;
background-color: #CF142B;
}
#navbar ul li {
list-style-type: none;
padding: 20px;
text-align: center;
font-family: "Trebuchet MS";
font-size: 25px;
display: inline;
}
#navbar ul li a {
text-decoration: none;
font-weight: bold;
color: #fff;
}
.topbox {
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
}
.topbox h1 {
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox #topboxFlag {
float: right;
width: 300px;
height: 400px;
background-color: #fff;
}
.partybox {
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
margin-top: 15px;
}
.partybox h1 {
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox h1 {
margin: 0;
float: left;
}
<html>
<head>
<title>Learn which parties are doing what</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="navbar">
<ul>
<li>Major Parties
</li>
<li>Minor Parties
</li>
<li>Why Vote
</li>
<li>About Us
</li>
</ul>
</div>
<div class="topbox">
<h1>The Conservative Party</h1>
<div id="topboxFlag"></div>
</div>
<div class="partybox">
<h1>The Labour Party</h1>
<div id="partyboxFlag"></div>
</div>
<div class="partybox">
<h1>The Liberal Democrats</h1>
</div>
<div class="partybox">
<h1>The UK Independence Party</h1>
</div>
<div class="partybox">
<h1>The Green Party</h1>
</div>
<div class="partybox">
<h1>The Scottish National Party</h1>
</div>
</div>
</body>
</html>
Can you make the flag div first?
<div class="topbox">
<div id="topboxFlag></div>
<h1>The Conservative Party</h1>
</div>
I've done some searching and I just can't seem to find out what's wrong. My main content keeps overlapping the banner. I tried using the position and overflow hidden and auto but I still can't seem to get it right.
Here's the html
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
</div></div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer"></div>
</p>
</body>
Here's the CSS:
body {
background: #F9F9F9; margin: 0 auto; padding: 0; font: color: #FFFFFF; text-align: center}
a {
color: #2b2bf6;}
#header {
float: left;
position: fixed;
Align: left;
clear: both;
width: 0x;
max-width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background:
#FFFFFF;
z-index: 2;}
#Navigation {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
background: #000000;
Font-size: 18px;
float: right;
position: fixed;
z-index: 1;
display: incline-block;
}
#Navigation Container {
WIDTH: 100%;
float: right;
background: #282828;
position: fixed;
z-index: 0;}
#Banner {
height: 100%;
width: 100%;
margin: auto;
padding-top: 70px}
#wrapper {
width: 100%;
overflow: hidden; }
#container {
width: 100%;
margin: 0 auto; }
#banner-img {
width: 100%;}
#dropdown {
position: relative;
overflow: hidden; }
#MainContent {
margin-top: -270px;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 100px;
text-align: left;}
#footer {
width: 100%;
height: 120px;
background: #282828;
padding: 0px; }
#navwrap {
width: 160px;
height: 70px;
Float: right;
display: incline-block;
z-index: 4; }
#Searchbar {
float: left;
padding: 20px;
}
ul{
padding: 0;
list-style: none;
height: 70px;
}
ul li{
float: right;
width: 110px;
text-align: center;
line-height: 21px;
}
ul li a{
display: block;
height: px;
padding: 5px 10px;
color: #333;
background: #282828;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #3d3d3d;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
}
Please help.
There are a few discrepancies in the HTML posted by you.
I have corrected the same. Can you please reuse the HTML and check.
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer">
</div>
</p>
</body>
</html>