Here's the JsFiddle: https://jsfiddle.net/ztxmqyxg/
<!DOCTYPE html>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
<ul>
<img src="images/logo.png">
<li>iPhone</li>
<li>Mac</li>
<li>iPad</li>
<li>iPod</li>
</ul>
<div id="ad">
<h1>Think different</h1>
</div>
<div id="product-container">
<div id="product" class="product2">
</div>
<div id="product" class="product1">
</div>
</div>
<div id="product-container2">
</div>
Here is the CSS:
html,body {
padding:0;
margin:0;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
ul img {
margin-top: 7px;
margin-right:30px;
display: block;
float: left;
height: 40px;
}
li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: #EDEDED;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #EEEEEE;
color:#000000;
text-decoration:none;
}
#ad {
padding: 5px 20px;
background-color: #000000;
height: 200px;
}
h1 {
font-family: 'Dosis', sans-serif;
color: #EDEDED;
}
#product-container {
margin: 0px;
padding: 0px;
}
#product {
padding: 5px 20px;
height: 300px;
display: inline-block;
}
.product1 {
background-color: #DAE7EB;
float: right;
width: 50%;
}
.product2 {
background-color: ;
width: 50%;
}
#product-container2 {
height: 300px;
background-color: #E9E9E9;
}
Well, in the JSfiddle there's a gap between the nav bar and the 2 first divs, that doesn't happen when I run it on my computer so don't mind that.
The problem is the gap between the white and blue boxes and the gray one on the bottom, as you see there's a small gap, but I don't see why that could be.
Actually I tried setting margin to 0 (to see if that worked) but it didn't.
It is for display: inline-block in #product div that cause to unwanted 5px margin. remove it and change .productcontainer to display:flex
html,body {
padding:0;
margin:0;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
ul img {
margin-top: 7px;
margin-right:30px;
display: block;
float: left;
height: 40px;
}
li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: #EDEDED;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #EEEEEE;
color:#000000;
text-decoration:none;
}
#ad {
padding: 5px 20px;
background-color: #000000;
height: 200px;
}
h1 {
font-family: 'Dosis', sans-serif;
color: #EDEDED;
}
#product-container {
margin: 0px;
padding: 0px;
display: flex;
}
#product {
padding: 5px 20px;
height: 300px;
}
.product1 {
background-color: #DAE7EB;
float: right;
width: 50%;
}
.product2 {
background-color: ;
width: 50%;
}
#product-container2 {
height: 300px;
background-color: #E9E9E9;
}
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
</head>
<body>
<ul>
<img src="images/logo.png">
<li>iPhone</li>
<li>Mac</li>
<li>iPad</li>
<li>iPod</li>
</ul>
<div id="ad">
<h1>Think different</h1>
</div>
<div id="product-container">
<div id="product" class="product2">
</div>
<div id="product" class="product1">
</div>
</div>
<div id="product-container2">
</div>
</body>
</html>
See this fiddle
It was the line height causing the issue. Update your CSS for #product-container as follows
#product-container {
margin: 0px;
padding: 0px;
line-height: 0; //<--- Add this
}
Related
Here is the fiddle: https://jsfiddle.net/gnsho1br/2/
There were similar questions that suggests to set display to inline-block but I have done that. My container is col-1. I also tried to give my logo class of float: left but then the menu is off-center (maybe the left margin starts at the end of the logo???).
Use display: flex instead. If you want items to be centered, try align-items: center, justify-items: center. Refer to Flexbox for more info.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li,
a,
button {
font-family: "Elliot-Sans", sans-serif;
font-weight: 300;
font-size: 14px;
color: #777777;
text-decoration: none;
}
#wrapper {
margin: 0 15px;
padding: 15px 0;
position: relative;
}
.row {
max-width: 65%;
margin: 0 auto;
padding: 75px 0;
position: relative;
}
.col-1 {
width: 100%;
padding: 20px;
display: flex;
}
#header {
height: 71px !important;
overflow: visible;
z-index: 9999;
width: 100%;
position: absolute !important;
}
#header .row {
padding: 0;
}
#header ul {
text-align: center;
}
.logo {
width: 150px;
height: auto;
cursor: pointer;
margin-right: auto;
background-color: inherit;
display: inline-block;
vertical-align: middle;
}
#topNavBar {
list-style: none;
margin: 0;
background-color: #ffffff;
}
ul{
display: flex;
}
#topNavBar li {
display: inline-block;
padding: 0px 20px;
background-color: inherit;
vertical-align: middle;
}
#topNavBar li a {
transition: all 0.2s ease 0s;
font-weight: 400;
text-transform: uppercase;
}
#topNavBar li a:hover {
color: #04ad9e;
text-decoration: none;
padding-bottom: 4px;
border-bottom: 3px solid #04ad9e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/> -->
<link
href="https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
<title>Title</title>
</head>
<body>
<div id="wrapper">
<header id="heroImage">
<div id="header" class="navCollapse">
<div class="row clearfix">
<div class="col-1">
<div class="logo">
<img class="logo" src="image.png" alt="logo" />
</div>
<nav id="topNavBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Read</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
Question
I've looked over the code very carefully and can't see a reason at all whatsoever why the header nav float isn't working in the stylesheet. I'm including all the html code and css code down below. I want to move my
header nav to the right in my css code so that my links appear on the top right corner of my home page horizontally.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
You have two problems that become quite obvious if you look at the page in the browser inspector:
The first is that you have floated the branding div, and floating an element removes it from the regular flow and it isn't full width anymore, so the navigation that is inside is put below the heading.
You have mixed the opening and closing tags of <h1> and <span class="highlight"> and this caused that the block <h1> is being inside of the inline <span>, at least in Firefox.
Compare this screenshot of your example in the Firefox inspector:
With this other one of the adjusted code:
Remember, browser inspector is your friend.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
/*float: left;*/
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><h1><span class="highlight">James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I added class="nav" to the navigation unordered list and set position to absolute using a .nav selector.
.nav {
position:absolute;
top: 20px;
right:0px;
}
You can change the position by adjusting top and right values.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.nav {
position:absolute;
top: 20px;
right:0px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
}
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</h1></span>
<nav>
<ul class="nav">
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I think your #branding div being floated left is breaking it--and doesn't seem necessary since you want that left aligned anyway.
It works for me with:
#branding {
float: none
}
Also - in your html you need to move your floated .nav div before the .highlight span
I have this html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>Sell<img src="money.png"></li>
<li>Buy<span><img src="tickets.png"></li>
<li>Sign in<span><img src="locked.png"></li>
</ul>
</div>
</div>
</header>
</body>
</html>
And this css below:
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
In the navigation list on the top right (ul) I want to center those images with the li text in my css. I tried putting text-align: center; on the .heading-list li img but it is not centering the image. Is there something else I have to do?
You can use flexbox, as I used in this example
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
display: flex;
align-items: center;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>
<span>Sell</span>
<img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg">
</li>
<li>
<span>Buy</span>
<img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg">
</li>
<li>
<span>Sign in</span>
<img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg">
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
So an image by default has a display type of inline-block. To enable it to be centered, include the following in your images css.
display: block;
margin-left: auto;
margin-right: auto
I am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.
Here is my problem, I have drawn a red box around it to indicate the problem -
See below
Here is the html code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
Here is the css -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
I Appreciate the help!
Try this one...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
width:70%;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg" style="width:70%">
<img src="img/specials.png" style="width:30%;float:right;">
<div class="fix"></div>
</div>
</div>
</body>
</html>
This is badly formatted, dunno if it is the fix to your problem, but needs to be changed.
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
should be at least this:
<nav>
<ul>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
</ul>
<h1>REGION</h1>
</nav>
Without linking to the site and seeing the size of the images, I think your problem is with the CSS that deals with the slider.
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
I would start with removing the width and margin settings as I expect that is causing the problem and remove the first child part. First focus on getting the slider working as per the maker of the sliders css, then add your own.
Am having layout issues, trying to understand floats and how to position elements. Am very new to css/html. Could someone help me understand how this layout is going to work. Some problems:
1) Unable to change the height of footer without ruining layout, footer seems to get pushed upwards.
2) When i inspect the page through chrome the footer div is included inside the 'wrapper' div when it's outside it in the code.
3) Adding padding to the content div also seems to break the layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
CSS:
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
background-color: orange;
}
Cheers
I did make a +200px padding content with a +200px footer. Didn't changed anything besides the display:inline-block on the footer plus box-sizing: border-box; on the content.
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
padding:100px;
box-sizing: border-box;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
display: inline-block;
background-color: orange;
height:200px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
It is not necessary to give width and height as 100% for html and body or div in css width is 100% by default. You can mention the width only when it is required.
for giving height to footer just add clear:both for footer selector
footer{background-color: orange;clear:both;height:50px;}
this will solve problems 1 & 2. When you add padding the design breaks because each time when you add width it keeps adding to the current width already given to the same div or element. This can be solved either by re adjusting the element width or using box-sizing: border-box.