I am currently redisigning a page - making it so JS handles the upload of the content from a txt file and CSS formats the layout of divs and HTML contains the divs. What i am trying to do is hide the DIVs that DO NOT have any content in it - currently if tehre is no content it will still display the div as a long thin line. I've tried several suggestion, however having trouble of making it work properly. Have tried 'empty cell' option in CSS, but that ruins the layout for some reason.
Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BROADCAST</title>
<link rel="stylesheet" href="BCdata/WebStyles.css">
<script src="jquery-ui/jquery-1.9.1.min.js"></script>
<script src="BCdata/ContentHandler.js"></script>
</head>
<body class="main">
<!--------------------------------DONT CHANGE UNLESS NEEDED-------------------------------------------------------------->
<div id="buttons_div">
<!------------------Banner---------------------------------------------------------------------------------------->
<img src="images/broadcastbanner.gif" id="Image35">
<span id="CurrentDate"></span>
</div>
<div id="buttons_div" style="top:10px;">
<!------------Archive Calendars----------------------------------------------------------------------------------->
<img src="images/broadcast2013archive.gif" id="Image4">
<img src="images/broadcast2014archive.gif" id="Image5">
<!--------------Signoff Sheet------------------------------------------------------------------------------------->
<img src="images/broadcastsignoff.gif" id="Image6">
<!----------------------Up and Home------------------------------------------------------------------------------->
<img src="images/Up.GIF" id="Image2">
<img src="images/Home.GIF" id="Image3">
</div>
<!-------------------------------------------CONTENT DIVS------------------------------------------------------------------>
<div id="content_divs" style="top:20px; background-image: url(images/bluebox.png);">
<p id="div1" style="color:white;"></p>
</div>
<div id="content_divs" style="top: 30px; background-image: url(images/whitebox.png);">
<p id="div2"></p>
<p id="div2"></p>
</div>
<div id="content_divs" style="top: 40px; background-image: url(images/redbox2.png);">
<p id="div3" style="color:white;"></p>
</body>
</html>
Here is my CSS
#CurrentDate
{
position: absolute;
top:15px;
left: 210px;
width:700px;
text-align: center;
z-index: 8;
color:white;
font-family:Arial;
font-size:35px;
text-transform: capitalize;
}
.main
{
background-color: #FFFFFF;
background-image: url(backbox.gif);
color: #000000;
text-align: center;
position: relative;
overflow: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 10px;
}
.main #content_divs
{
position: relative;
text-align: left;
z-index: 1;
width: 960px;
margin: 0 auto;
border-style : solid;
border-width: 3px;
border-color: white;
overflow: hidden;
}
h1
{
font-family: Arial;
font-size: 20px;
font-weight: bold;
position: relative;
text-transform: capitalize;
font-weight: bold;
z-index: 5;
}
h2
{
font-family: Arial;
font-size: 13px;
font-weight: bold;
position: relative;
z-index: 5;
}
p
{
font-family: Arial;
font-size: 13px;
position: relative;
z-index: 5;
margin-left: 20px;
margin-right: 20px;
}
#buttons_div
{
position: relative;
}
#Image35
{
position:relative;
border: 0px #000000 solid;
width: 960px;
height: 96px;
z-index: 2;
}
#Image2
{
border: 0px #000000 solid;
position: relative;
left:30px;
width: 90px;
height: 34px;
z-index: 3;
}
#Image3
{
border: 0px #000000 solid;
position: relative;
left:30px;
width: 86px;
height: 34px;
z-index: 4;
}
#Image4
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px; z-index: 5;
}
#Image5
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px;
z-index: 6;
}
#Image6
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px;
z-index: 7;
}
This is JS (content handler)
$(function()
{
$("#div1").load("BCdata/Content061114.txt .Div1 #p1");
});
$(function()
{
$("#div2").load("BCdata/Content061114.txt .Div2 #p1");
});
$(function()
{
$("#div3").load("BCdata/Content061114.txt .Div3 #p1");
});
$(function()
{
$("#CurrentDate").load("BCdata/Content061114.txt #CurrentDate");
});
onload=function()
{
var content_divs=document.getElementById('Div2');
if(!div2.hasChildNodes()){content_divs.style.display='none'}
}
And this is a TEXT file where content is located
<span id="CurrentDate">thursday 6th november 2014, wk 40</span>
<!----Use <p> tag for indentation of a text, otherwise use <div> tag------>
<div class="Div1">
<div id="p1">
<h1 style="color:white;">Congratulations to 66!</h1>
<div>PDFs of 'Record Weeks' are now available on the Intranet.</div>
<h2>Heading 1</h2>
<p>Content is here</p>
<h2>Heading 2</h2>
<p>Content is here</p>
<div><b><i>Click the link on the right to view PDFs</i></b></div>
</div>
</div>
<div class="Div2">
<div id="p1">
<h1 style="color:black;">Poster</h1>
<div>Poster Content</div>
</div>
</div>
<div class="Div3">
<div id="p1">
<h1 style="color:white;">heading Content is here</h1>
<div>Content is ehre blabla</div>
</div>
</div>
Any help is much apreciated - sorry if it seems that i am asking to fix the problem for me, but i am new to this and very keen to learn. Been stuck on this for a while now
You could try :empty pseudo-class.
div:empty {
display: none;
}
<div></div>
<div>div with content</div>
Reference: MDN
Something like this would work.
elementList = document.querySelectorAll('div');
for(var i = 0; i < elementList.length; i++)
{
var element = elementList[i];
(element.children === 0) ? element.style.display = "none": element.style.display = "block";
}
What this does it get all Div elements, puts them in an array, then checks each one, if it does not have a child it sets display to none, if it does it sets display to block.
EDIT
If you don't want it to mess with divs with children atall, just change if statement to:
(element.children === 0) ? element.style.display = "none": "";
We use .children because this only returns Element objects (aka HTML tagged stuff) and not 'absolutely' every child.
demo - http://jsfiddle.net/y7mgmm2u/
thanks to #emmanuel
*:empty {
display:none;
}
<div>
<p><span></span>
</p>
</div>
<div>test</div>
<p></p>
<p>test</p>
Related
I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.
This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`
body {
background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru");
height: 100%;
background-position: center;
background-repeat: repeat;
background-size: cover;
font-family: 'Carter One', cursive;
color: white;
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
text-align: center;
}
img {
border: 5px solid #FFFFFF;
}
body, html {
height: 100%;
margin: 0;
font-family: 'Carter One', cursive;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #F3721D;
color: white;
}
.top_left{
float: left;
position: absolute;
left: 16px;
}
.right {
float: right;
position: absolute;
top: 200px;
right: 16px;
}
.bottom_left {
float: left;
bottom: 0px;
left: 16px;
z-index: 10;
padding: 0px;
margin: 500px 500px 100px 16px;
}
.bottomright {
float: right;
bottom: 0px;
right: 16px;
z-index: 10;
padding: 0px;
margin: 500px 16px 100px 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>Charlotte's super cool art gallery</title>
<link rel="stylesheet" href="C:\Users\blazette\Downloads\bs\CSS\mystyle.css">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Commissions
About
</div>
<div class="cubed">
<h1>I design stuff.</h1>
</div>
<div class="cubed">
<h2> My works.</h2>
</div>
<div class="top_left">
<img src="https://lh3.googleusercontent.com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400?source=screenshot.guru" img width="310" height="372" id="top_left">
<p>
A digital illustration of Sherlock Holmes <br>from the TV series Sherlock.
</p>
</div>
<div class="bottom_left">
<img src="https://lh3.googleusercontent.com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400?source=screenshot.guru" img width="310" height="372">
<p>
A digital illustration of Clockson. An <br>original character based on antique clocks
</p>
</div>
<div class="right">
<img src="https://lh3.googleusercontent.com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400?source=screenshot.guru" img width="310" height="372" id="right">
<p>
Doctor Who fanart of the 13th Doctor.
</p>
</div>
<div class="bottomright">
<img src="https://lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-p-k" width="310" height="310">
</div>
</body>
</html>
`
You're hard coding the image width and height, it may be the case that some of those images aren't actually that dimension. Try and see if changing the width and height fixes it. Change the width and height in the html tag for the
I am trying to fit two divs around the header-title, but I can't seem to get it to work. I'm not sure that the calc() works well with the javascript. Here is the code so far:
document.getElementByClass('Header').clientWidth;
:root {
--main-accent-color: #3500D3;
--main-bg-color: #282828;
--secondary-bg-color: #0c0032;
--main-content-bg-color: #190061;
--text-color: #ffffff;
--alt-color: #240090;
}
* {
box-sizing: content-box;
margin: 0;
}
body {
background-color: var(--main-bg-color);
}
h1 {
font-family: robot0, sans-serif;
font-size: 70px;
font-weight: 100;
font-variant: petite-caps;
color: var(--text-color);
}
.header {
background-color: var(--main-bg-color);
width: 100%;
height: 100px;
top: 0;
margin: 0;
position: fixed;
text-align: center;
z-index: 10;
border-bottom: 5px solid var(--main-accent-color);
}
.header-title {
box-sizing: content-box;
background-color: var(--main-bg-color);
height: 85px;
width: 500px;
margin: auto;
vertical-align: middle;
padding-top: 50px;
padding-top: 20px;
border-left: 5px solid var(--main-accent-color);
border-right: 5px solid var(--main-accent-color);
z-index: 11
}
.header-info {
width: calc((clientWidth - 500) / 2);
height: 100px;
display: inline-block;
position: absolute;
margin: 0;
padding: 0;
}
#right-info {
right: calc(((clientWidth - 500) / 2) + 500);
}
#left-info {
right: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Webpage</title>
<script>
document.getElementByClass('header').clientWidth;
</script>
</head>
<body>
<!--Header-->
<div class="header">
<div class="header-title">
<h1>Welcome</h1>
</div>
<div class="header-info" id="left-info">
<p>
Hi
</p>
</div>
<div class="header-info" id="right-info">
<p>
Hi
</p>
</div>
</div>
</body>
</html>
If there is another method that I can use, that would be great. Also, I am learning CSS right now, so I am not confident with JavaScript at all, I only used it because that's how other people did it.
I think you are making it too complicated. I removed a lot of code and added flexbox for the header. Both divs at the side are allowed to grow as much as space allows.
:root {
--main-accent-color: #3500D3;
--main-bg-color: #282828;
--secondary-bg-color: #0c0032;
--main-content-bg-color: #190061;
--text-color: #ffffff;
--alt-color: #240090;
}
* {
box-sizing: content-box;
margin: 0;
}
body {
background-color: var(--main-bg-color);
}
h1 {
font-family: robot0, sans-serif;
font-size: 70px;
font-weight: 100;
font-variant: petite-caps;
color: var(--text-color);
}
.header {
width: 100%;
height: 100px;
top: 0;
position: fixed;
border-bottom: 5px solid var(--main-accent-color);
display: flex;
align-items: center; /* Vertical alignment */
}
.header-title {
width: 500px;
border-left: 5px solid var(--main-accent-color);
border-right: 5px solid var(--main-accent-color);
text-align: center;
}
.header-info {
flex-grow: 1;
}
<div class="header">
<div class="header-info">
<p>
Hi
</p>
</div>
<div class="header-title">
<h1>Welcome</h1>
</div>
<div class="header-info">
<p>
Hi
</p>
</div>
</div>
Does anyone know how to make multiple on scroll fixed headers? I've already checked answers such as this.
I want the first header, that's already fixed at the top of the screen, to stop before the second header, and when the first header gets scrolled past, the second header should be taking the first header's place and stick at the very top of the screen.
But such answers don't work for me because they're using libraries that I'm not working with, such as jQuery, or they are overly, overly complicated. I've got it to work, so far, with getBoundingClientRect(), but with only 2 headers.
I've provided the HTML&CSS part here:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
#import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
letter-spacing: 3px;
margin: 0;
padding-left: 10px;
padding-top: 10px;
color: #fff;
font-weight: 100;
}
.header {
width: 100%;
height: 50px;
}
.header:nth-of-type(1){
background-color: dodgerblue;
position: fixed;
}
.header:nth-of-type(2){
background-color: rebeccapurple;
}
.header:nth-of-type(3){
background-color: chartreuse;
}
.content {
width: 100%;
height: 100%;
background: linear-gradient(70deg, orange, crimson);
padding-top: 50px;
}
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>
Demo:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
#import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
letter-spacing: 3px;
margin: 0;
padding-left: 10px;
padding-top: 10px;
color: #fff;
font-weight: 100;
}
.content {
width: 100%;
height: 100%;
background: linear-gradient(70deg, orange, crimson);
}
.content .header {
width: 100%;
height: 50px;
position: sticky;
top: 0;
}
.content:nth-of-type(1) .header {
background-color: dodgerblue;
}
.content:nth-of-type(2) .header {
background-color: rebeccapurple;
}
.content:nth-of-type(3) .header {
background-color: chartreuse;
}
<div class="content">
<header class="header">
<h1>HEADER 1</h1>
</header>
<div class="content-inner">
<h1>CONTENT</h1>
</div>
</div>
<div class="content">
<header class="header">
<h1>HEADER 2</h1>
</header>
<div class="content-inner">
<h1>CONTENT</h1>
</div>
</div>
<div class="content">
<header class="header">
<h1>HEADER 3</h1>
</header>
<h1>CONTENT</h1>
</div>
View on jsFiddle
Explanation:
position: sticky with correct markup will do the work
PS: I know there is already an answer using position: sticky but in that solution the previous header doesn't stop but overlaps with the next one. In my solution is stops before the next sticking.
If you want header 2 and header 3 to be sticky, but show below the next add top with padding to each header (here header-2 has top: 50px; so it will not override the first, and the third has top: 100px;).
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
position:relative;
}
#import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
letter-spacing: 3px;
margin: 0;
padding-left: 10px;
padding-top: 10px;
color: #fff;
font-weight: 100;
}
.header {
width: 100%;
height: 50px;
position: sticky;
top: 0px;
}
.header:nth-of-type(1){
background-color: dodgerblue;
}
.header:nth-of-type(2){
background-color: rebeccapurple;
}
.header:nth-of-type(3){
background-color: chartreuse;
}
.content {
width: 100vw;
height: 100vh;
background: linear-gradient(70deg, orange, crimson);
padding-top: 50px;
}
.header-2{
top: 50px;
}
.header-3{
top: 100px;
}
<section>
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-2"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-3"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>
</section>
Without your javascript code, i can suggest you use position:sticky which achieves what you want.
Read more here position CSS
It is pretty well supported in modern browsers caniuse position sticky
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
position:relative;
}
#import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
letter-spacing: 3px;
margin: 0;
padding-left: 10px;
padding-top: 10px;
color: #fff;
font-weight: 100;
}
.header {
width: 100%;
height: 50px;
position: sticky;
top: 0px;
}
.header:nth-of-type(1){
background-color: dodgerblue;
}
.header:nth-of-type(2){
background-color: rebeccapurple;
}
.header:nth-of-type(3){
background-color: chartreuse;
}
.content {
width: 100vw;
height: 100vh;
background: linear-gradient(70deg, orange, crimson);
padding-top: 50px;
}
<section>
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>
</section>
I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>
The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.
You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>
For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>
not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle
It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>
I am new to CSS and it's not clear to me why the header and menu links stay within the container but not the other elements. I can fix this by including margins for the other elements but I would like to understand why this is happening.
Is there a way to keep elements within the container without specifying margins for each element or (div). See JS fiddle code and code below, for example. I would like to keep the #main content within #container.
JSFiddle link: http://jsfiddle.net/6qt8ry1L/
body {
background-color: #F7F7F0;
}
#container {
width: 1000px;
position: relative;
margin: 0 auto;
text-align: center;
background-color: #8e8e20;
}
header {
background-image: url("header.jpg");
background-repeat: no-repeat;
height: 224;
}
h1 {
color: #ffffff;
padding: 10px;
text-align: left;
}
#nav ul {
list-style: none;
background-color: black;
height: 40px;
margin-top: 0;
color: white;
}
#nav li {
display: inline-block;
padding-top: 10px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 10px;
}
#MainContent {
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid #545454;
background-color: #b6c5a3;
height: 200;
color: #492b40;
font: 11px/12px Verdana, Arial, Helvetica, sans-serif;
}
#col1 {
width: 20%;
height: 30%;
margin-top: 15px;
float: left;
background-color: lightgray;
}
#col2 {
float: left;
margin-left: 1%;
margin-top: 15px;
height: 30%;
width: 20%;
background-color: lightgray;
}
#col3 {
float: left;
margin-top: 15px;
width: 20%;
height: 30%;
margin-left: 1%;
background-color: lightgray;
}
#Content:after {
content: '';
display: block;
clear: both;
}
#footer {
float: left;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #545454;
background-color: #b6c5a3;
height: 60;
width: 950px;
color: #492b40;
font: 11px/12px Verdana, Arial, Helvetica, sans-serif;
}
<html>
<head>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="container">
<header>
<div id="heading">
<h1> Hello there !!! </h1>
</div>
</header>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</div>
<div id="MainContent">
Main Content
</div>
<div id="Content">
<div id="col1">
Col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col 3
</div>
</div>
<div id="footer">
<p>Copyright 2004 xyz Association</p>
<p>All rights reserved etc etc..</p>
</div>
</div>
<!--end container-->
</body>
</html>
Your container is closed just after closing div#nav.
Put that closing div at the end and your problem'd be fixed.
I noticed you have more closing tags than you have opening DIVs. As a habit when ever you create a <DIV> be sure to insert </DIV> immediately. To keep track of the opening and closing DIVs. I am guessing this mismatch closing DIVs is likely the cause of your problem.