I just started learning HTML5 in congruence with CSS, and I am trying to make my own resume (exercise from Codecademy). My issue is with the subheading divs I am planning to make, where I am trying to place a black line underneath the subheading text. There is large gap in between the line and text, however.
#header {
margin-top: -3.5px;
background-color: #C3CDD4;
height: 90px;
width: 98.5%;
position: relative;
}
#name {
font-family:Verdana, Geneva, sans-serif;
font-size: 40px;
float: left;
margin-left: 20px;
margin-top: 20px;
/*padding bottom: 50px;*/
}
#address {
font-family: Verdana, Geneva, sans-serif;
float:right;
margin-top: 25px;
margin-right: 60px;
}
#contact {
font-family: Verdana, Geneva, sans-serif;
float: right;
clear: left;
margin-top:-60px;
margin-right: 20px;
}
.subheader {
position: relative;
height: 100px;
margin-left: 20px;
margin-top: -2.5px;
font-size: 20px;
font-family: Verdana;
border-bottom: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
<p id="name"> Vincent William Barker </p>
<p id="address">67294 Washington Way</p>
<p id="contact">999.999.9999 · vwbarker#gmail.com</p>
</div>
<div class="subheader">
<h4 class="subheader_title">Education</h4>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
If you want the sides of your div to be straight, remove the property border-radius: 5px;. The space between your line and the subheader was due to this property - height: 100px; in your .subheader div. Remove that property and your problem will be fixed. To make it closer to the subheader, you will have to delete its border bottom property. After that, make a new div and look at its properties below.
#header {
margin-top: -3.5px;
background-color: #C3CDD4;
height: 90px;
width: 98.5%;
position: relative;
}
#name {
font-family: Verdana, Geneva, sans-serif;
font-size: 40px;
float: left;
margin-left: 20px;
margin-top: 20px;
/*padding bottom: 50px;*/
}
#address {
font-family: Verdana, Geneva, sans-serif;
float: right;
margin-top: 25px;
margin-right: 60px;
}
#contact {
font-family: Verdana, Geneva, sans-serif;
float: right;
clear: left;
margin-top: -60px;
margin-right: 20px;
}
.subheader {
position: relative;
margin-left: 20px;
margin-top: -2.5px;
font-size: 20px;
font-family: Verdana;
}
.line {
margin-top: -20px;
height: 1px;
width: 100%;
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title></title>
</head>
<body>
<div id="header">
<p id="name">Vincent William Barker</p>
<p id="address">67294 Washington Way</p>
<p id="contact">999.999.9999 · vwbarker#gmail.com</p>
</div>
<div class="subheader">
<h4 class="subheader_title">Education</h4>
</div>
<div class="line">
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Related
I was doing some CSS, and my divs keep piling up underneath each other. I tried using position on them but it didn't work. My work is below. The picture I have in it will not be available to you as it is from my computer, but I hope you can get the idea of what my issue is(The sitelingo and Capture12 are the ones piling up):
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
padding-left: 470px;
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
padding-left: 232px;
padding-top: 24px;
}
#barone {
position: fixed;
float: left;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#bartwo {
postition: fixed;
float: right;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#login {
padding-left: 400px;
position: absolute;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="images/Capture12.png" /> </div>
</div>
</body>
</html>
A couple of issues:
You set a position:fixed to #barone. This will position the element relative to the actual screen.
You have elements positioned absolute, when the screen resizes, it will overlap with other elements
A padding left is set on your logo, this makes it out of viewpoint
Maybe you may want something as depicted below
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
/* padding-left: 470px;*/
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
/*padding-left: 232px;*/
padding-top: 24px;
}
#bar_container {
background-color: #0A4076;
}
#barone {
/* position: fixed;*/
height: 70px;
background-color: #0A4076;
display: inline-block;
}
#bartwo {
postition: fixed;
float: right;
height: 70px;
background-color: #0A4076;
}
#bartwo *{
display:inline-block;
}
#login {
position:relative;
/*padding-left: 400px;
position: absolute; */
vertical-align: middle;
top:0;
}
#login img{
width:100px;
height:100%;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="bar_container">
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgKSOJmOr8tNodELaCLPrI1T2XE7iwrpuxPDGuFeoJwlJC4AVKZw" /> </div>
</div>
</div>
</body>
</html>
So, I know the media query is working, because the other selector I have styled is working fine. But, the "div.A > #greet" selector is not working at all. I put a red color in there so I could tell for sure when it is working, but the text remains the same color, and it hasn't moved. What I really need to do with the text is center it. I have tried everything I can think of or find. Please help :)
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color: white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
#media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
height: 30%;
width: 50%;
}
div.A > #greet {
float: none;
text-align: center;
color: #BB1F25;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
</div>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>
In your HTML there's a stray </div> end tag before #greet element (as I mentioned in my comment) which failing your selector, moreover use div.A > #greet > h1, div.A > #greet > h2.
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color:white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
#media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
height: 30%;
width: 50%;
}
div.A > #greet > h1, div.A > #greet > h2 {
float: none;
text-align: center;
color: #BB1F25;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>
Hope, that's solved your problem!
I am trying to have a three column section that has three different divs, each containing an h2 and a p element. I want to make the left when align right, the middle one align center and the right one align left. I achieved this using nth-of-type however I can't figure out how to get them in the right position so that everything lines up with each other.
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
width: 105%;
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
width: 105%;
margin-left: -2.5%;
height: 900px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
width: 105%;
margin-left: -2.5%;
height: 250px;
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
width: 105%;
margin-left: -2.5%;
height: 250px;
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
max-width: 360px;
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
Also I'm not sure how to get bootstrap to work in jsfiddle sorry :(
https://jsfiddle.net/5bep97xw/
The nth-child idea is the good one. but looks like you need to update the mediaqueries too and what is this 105% width ?
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
/* width: 105%; why ? */
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
/* width: 105%;
margin-left: -2.5%;
height: 900px; why ? */
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
/* width: 105%;
margin-left: -2.5%;
height: 250px; why ? */
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
/* width: 105%;
margin-left: -2.5%;
min-height: 250px; do not fix an height and not too sure about margins and width */
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
/* max-width: 360px; better fix a max-width on parents container ? */
padding:1em;/* might be usefull */
margin:0;/* might be usefull */
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
#media (max-width:990px){
div div#galleries div[class] p,
div div#galleries div[class] h2 {
text-align:center; /* or left or right */
}
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<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>
</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>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#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{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
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 rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
http://i.imgur.com/mFtXm.jpg here is a screenshot.
The areas marked in red are where the problems are. When I view the page in firefox it looks fine, in chrome there are tiny gaps, I don't deal with ie.
What is the correct way to size these divs such that each div will "connect" with other divs without leaving any gaps whenever the browser changes? something with jquery or js?
html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="header">
<h1>New York Tech Map</h1>
</div>
<div id="navlinks">
<div class="topnav">
About Us
</div>
<div class="topnav">
Contact Us
</div>
<div class="topnav">
Sign Up
</div>
<div class="topnav">
Help
</div>
</div>
<div id="sidebar">
</div>
<div id="map">
</div>
<div id="footer">
© 2012 NYC Tech Map
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F0F0F0;
}
a { text-decoration: none; color: grey; }
a:hover{ color: red; }
#header {
width: 100%;
height: 75px;
background: red;
margin-top: -21px;
}
#navlinks { float: right; width: 80%;}
.topnav {
width: 25%;
height: 25px;
float: left;
padding-top: 5px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-size: 15px;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 500px;
float: left;
background: blue;
}
#map {
height: 80.8%;
width: 80%;
float: right;
}
.
.popa:hover {
background: #D6D6D6;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-weight: bold;
padding-top: 5px;
color: grey;
}
it is better just resize dynamically, use js to get the window size then have that element adjust accordingly.