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>
Related
So i recently got into html and css and i've been messing around with it for a few days right now.
The problem is that i can't manage to center the header with background-image: center;
When i do that, my header becomes white instead of the image.
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("header.jpg")
background-position: center;
}
.navigation {
background-color: #c6e2ff ;
background-image: url("ocean.jpg");
text-align: center;
width: 100%;
border-style: solid;
border-width: thin;
}
.navigation ul {
list-style-type: none;
margin-bottom: 0;
}
.navigation li {
color: #ffffff;
display: inline-block;
font-family: 'Raleway', bold;
padding: 25px 100px;
font-weight: uppercase;
text-align: left;
}
.NavigationWords{
background-color: #ffffff;
width: 90%;
margin-left: 195px;
float: left;
}
h2 {
text-align: center;
font-family: 'Raleway', sans-serif;
background-color: #c6e2ff;
color: #ffffff;
padding: 20px;
margin: 0;
background-image: url("ocean.jpg");
}
p {
margin-top: 0;
font-family: 'Raleway', bold;
line-height: 1.5em;
font-size: 20px;
margin-bottom: 0;
vertical-align: middle;
padding: 10px 20px;
}
.Join {
margin-top: 0;
}
.LeftPanel {
border-style: solid;
max-width: 190px;
max-height: 510px;
text-align: center;
position: absolute;
width:195px;
min-height:510px;
}
.LeftPanel ul {
list-style-type: none;
padding: 0;
}
.LeftPanel li {
padding: 20px 10px;
}
.wrap {
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Belgian Entertainment</title>
<link href="belgian.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="header">
</div>
<div class="navigation">
<ul>
<li> ABOUT </li>
<li> JOIN </li>
<li> PORTFOLIO </li>
<li> FUTURE </li>
</ul>
</div>
<div class="wrap">
<div class="NavigationWords">
<div class="About">
<h2>About</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Join">
<h2>Join</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Portfolio">
<h2> Portfolio </h2>
<p> text.
BE Portfolio
<br/>
<br/>
</p>
</div>
<div class="Future">
<h2> Future </h2>
<p> text</p>
</div>
</div>
</div>
<div class="LeftPanel">
<ul>
<li id="toplogin">Login</li>
<br/>
<br/>
<li id="bordersign">Sign-up</li>
<br/>
<br/>
<li id="bordersign">Portfolio</li>
<br/>
<br/>
<li id="bordersign">Contact</li>
</ul>
</div>
</body>
</html>
You lost a ";" at the end of background-image definition of css:
fiddle
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("http://en-support.files.wordpress.com/2009/10/twentythirteen-header2.jpg");
background-position: center;
}
I've tried position referencing to fix the position of "#block_two" but that doesn't seem to work. The div disappears when I use fix and absolute isn't better. I also tried changing the z-index of #block_two but to no avail.
html {
overflow: scroll;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Arial, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 2em;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
padding-right: 20px;
}
.navbar {
padding-right: 20px;
padding-top: 2px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(/New_Website/sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#column-left{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-right{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-center{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#end_block{
padding: 10px;
background-color: #F2F2F2;
height: 50vh;
text-align: center;
}
.area_content{
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
color: #3A3D3F;
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: left;
}
.eb_header{
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_pics{
max-width: inherit;
height: 50%;
}
.b4{
padding-top: 60px;
max-width: inherit;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_hd{
color: #3A3D3F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
HOME
ABOUT
PEOPLE
CONTACT
LOG IN
</nav>
</div>
</header>
<div id="block_two">
</div>
<div id="block_three">
<div id="column-left">
<header class="b3_hd">
Hospitality
</header>
<div class="b3_pics">
<div id="pic1">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-center">
<header class="b3_hd">
COLUMN CENTER
</header>
<div class="b3_pics">
<div id="pic2">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-right">
<header class="b3_hd">
COLUMN RIGHT
</header>
<div class="b3_pics">
<div id="pic3">
</div>
</div>
<p class="area_content">
</p>
</div>
</div>
<div id="block_four">
<header class="b4"> PEOPLE </header>
</div>
<div id="end_block">
<header class="eb_header">
CONTACT
</header>
</div>
</div>
Use position:fixed; and a negative z-index
html {
overflow: scroll;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
padding:100vh 0 0 0;
}
div#static_nav{
font-family: Arial, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 2em;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
top:0;
z-index:999;
}
div#static_nav a{
color: white;
text-decoration: none;
padding-right: 20px;
}
.navbar {
padding-right: 20px;
padding-top: 2px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg');
background-size: cover;
position:fixed;
top:2.5em;
z-index:-1;
width:100%;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#column-left{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-right{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-center{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#end_block{
padding: 10px;
background-color: #F2F2F2;
height: 50vh;
text-align: center;
}
.area_content{
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
color: #3A3D3F;
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: left;
}
.eb_header{
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_pics{
max-width: inherit;
height: 50%;
}
.b4{
padding-top: 60px;
max-width: inherit;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_hd{
color: #3A3D3F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
HOME
ABOUT
PEOPLE
CONTACT
LOG IN
</nav>
</div>
</header>
<div id="block_two">
</div>
<div id="block_three">
<div id="column-left">
<header class="b3_hd">
Hospitality
</header>
<div class="b3_pics">
<div id="pic1">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-center">
<header class="b3_hd">
COLUMN CENTER
</header>
<div class="b3_pics">
<div id="pic2">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-right">
<header class="b3_hd">
COLUMN RIGHT
</header>
<div class="b3_pics">
<div id="pic3">
</div>
</div>
<p class="area_content">
</p>
</div>
</div>
<div id="block_four">
<header class="b4"> PEOPLE </header>
</div>
<div id="end_block">
<header class="eb_header">
CONTACT
</header>
</div>
</div>
Instead of using position: fixed on the div I used background-attachment: fixed to hold the image in place and this .
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;
}
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">
What in my css is making the big empty space at the bottom of my page under my content. as far as I know none of the content is tall enough to go down that far. its not happening to any of my other pages on the site I'm making.
HTML
<body>
<div id="wrapper">
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
<a name="workJump"></a>
<div id="work">
<div id="label">
<h4>Work</h4>
</div>
<div id="leftColumn">
<div id= "p2article">
<a href="work1.html">
<img src="assets/work1p.jpg" alt="work one" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Cut Paper Portrait</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work3.html">
<img src="assets/work3p.jpg" alt="Work 3" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">3D Christmas Eve Scene</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work5.html">
<img src="assets/work5p.jpg" alt="work 5" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">3D Clock Ad</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work7.html">
<img src="assets/work7p.jpg" alt="work 7" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">RIT Event Calendar Redesign</span>
</div>
</div>
</div>
</div>
<div id="rightColumn">
<div id= "p2article2">
<a href="work2.html">
<img src="assets/work2p.jpg" alt="work two" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Charcoal Self-Portrait</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work4.html">
<img src="assets/work4p.jpg" alt="Work 4" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">VH1 3D Bumper Animation</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work6.html">
<img src="assets/work6p.jpg" alt="work 6" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Beauty Is</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work8.html">
<img src="assets/work8p.jpg" alt="work 8" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Reporter Site Redesign</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
background: white;
}
/*----------header styles-------------*/
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
h1:hover
{
color: #2C3E50;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
z-index: 98;
position: relative;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: 0;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -15%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: #e5e5e5;
opacity: 1.0;
text-shadow: 2px 3px 2px #000000;
text-align: center;
}
a.down{
z-index: 99;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 0.2em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 30%;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a.down:hover{
text-decoration: underline;
color: white;
}
/*----------work main styles-------------*/
#leftColumn
{
width: 50%;
float: left;
height: 80em;
}
#rightColumn
{
width: 50%;
height: 80em;
float: right;
}
#label{
width: 100%;
height: 2em;
top: 10em;
}
#work{
width: 100%;
height: 10em;
position: relative;
top: -11em;
}
h4{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 40px;
color: #45CCCC;
opacity: 1.0;
text-align: center;
}
#p2article2
{
width: 70%;
height:20em;
float: center;
display: block;
margin-left: auto;
margin-left: 60px;
margin-bottom: 10em;
margin-top: 5em;
border: 1px solid #cccccc;
}
#p2article2 img
{
border: 1px solid #cccccc;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #45CCCC;
}
#p2article
{
width: 70%;
height:20em;
float: center;
display: block;
margin-left: auto;
margin-right: 60px;
margin-bottom: 10em;
margin-top: 5em;
border: 1px solid #cccccc;
}
#articleinfo2
{
width:100%;
height:10em;
display: block;
margin-bottom: 5em;
}
#articleText2{
width: 90%;
height:70%;
margin: 5%;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: black;
}
The titles at the bottom of the boxes have a large height set and a large margin-bottom on them like so
#articleinfo2 {
margin-bottom: 5em;
height: 10em
}
Removing that 10em height doesn't seem to affect much in this mockup state except it does make that gap much smaller
#work{
width: 100%;
height: 10em;
position: relative; /*TRY REMOVING THIS*/
top: -11em;
}