My problem is that the border for the main div doesn't extend to the bottom of the window.
Here's the stylesheet:
body {
margin:0px;
padding:0px;
background-color:#F7F7F7;
}
#nav {
background-color:#F7F7F7;
border-top:10px solid #89B7C4;
height:45px;
padding-top:20px;
padding-left:200px;
border-bottom:1px solid #7597A1;
}
#nav a {
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#sidebar {
float:left;
padding:15px;
}
#main {
float:left;
border-right:1px solid #7597A1;
width:800px;
margin-left:200px;
margin-top:0px;
margin-bottom:0px;
padding-top:10px;
}
Here's the page source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>home: index</title>
<link href="/stylesheets/application.css?1305224655" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/effects.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/controls.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/application.js?1304452925" type="text/javascript"></script>
</head>
<body>
<div id="nav">
#nav ·
link1 · link2 · link3 · link4
</div>
<div id="main">
#main<br><br>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div id="sidebar">
#sidebar<br>
link1 <br> link2 <br> link3 <br> link4
</div>
</body>
</html>
I had to put breaks in main to see how the border would look. This is not ideal. I would like the border to display even if there's little to no content in the main div.
If you have any ideas on how to get it to extend all the way down to the bottom of the page, I'd really appreciate it.
Any other tips on cleaning up the CSS would also be appreciated.
You have a classic equal height column problem. Here is just one of the many links to show you how to accomplish what you want: http://abcoder.com/css/css-equal-height-columns/
html,body
{
height:100%;
}
body {
margin:0px;
padding:0px;
background-color:#F7F7F7;
}
#nav {
background-color:#F7F7F7;
border-top:10px solid #89B7C4;
height:45px;
padding-top:20px;
padding-left:200px;
border-bottom:1px solid #7597A1;
}
#nav a {
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#sidebar {
float:left;
padding:15px;
}
#main {
float:left;
border-right:1px solid #7597A1;
width:800px;
margin-left:200px;
margin-top:0px;
margin-bottom:0px;
padding-top:10px;
min-height:100%;
}
This is as close as I can come. Most credit goes to:
http://www.sitepoint.com/forums/css-53/automatic-div-height-fill-100%25-screen-height-158987.html
The main does not extend to the bottom of the window because its height is determined by the contents of the div. Just add more content and it will extend accordingly.
Even height:100% won't work because the body, and even the html, are only as high as they need to be. So making the main just as high as them isn't going to work.
Most elements prefer to only take up as much height as its content needs. Unfortunately you will just have to set the height explicitly.
Also look at this question for how to do it with Javascript.
You could also insert the min-height property which will give the #main div a minimum height and will also remain in place. However keep in mind that content may overlap or hide because of your minimum height be aware to adjust the height accordingly
#main {min-height:500px}
This should be a good start:
#left {
width: 14em;
float: right;
}
#right {
margin-right: 14em;
border-right: 1px solid grey;
}
<div id="left">
<ol>
<li>Lorem ipsum</li>
<li>Duis aute</li>
<li>Excepteur sint</li>
<li>Ut enim minim veniam</li>
<li>Lorem ipsum amet</li>
<li>Duis reprehenderit</li>
<li>Ut enim veniam</li>
<li>Ut enim veniam</li>
</ol>
</div>
<div id="right">
<h1>Stretch the Background Color in a Two Column Layout</h1>
<p>The trick is to add the background color to the main container(in this case, id #canvas)<em>view the source for answer</em>.</p>
<div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
Related
I'm using Bootstrap 3.3.2 to create two columns. Each column has a heading, a bordered div with text of an unknown length, and an image. I need the bordered divs with text to be the same height, but only when the columns are side by side. If the window is narrow enough for the columns to be stacked, they should not be the same height. How can I achieve this?
I realize I could use JavaScript to set the shortest div's height to be the same as the tallest div's height, but the problem with this method is that when the user decreases the width of their browser window, the text overflows outside of the div.
Here is my code (jsFiddle demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.equal {
border: 3px solid #333;
padding: 8px;
}
img {
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Foo</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Eamne rationem igitur sequere, qua tecum ipse et cum tuis utare, profiteri et in medium proferre non audeas? Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Est, ut dicis, inquit; Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. An est aliquid, quod te sua sponte delectet?</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
<div class="col-md-6">
<h1>Bar</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Quid, quod res alia tota est? Maximus dolor, inquit, brevis est. Nihilo beatiorem esse Metellum quam Regulum. Honesta oratio, Socratica, Platonis etiam. Duo Reges: constructio interrete.</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I know this is similar to this question, but I think it's actually different.
var equal1 = $(".equal1").height();
var equal2 = $(".equal2").height();
if(equal1 < equal2 ){
$(".equal1").height($(".equal2").height());
} else {
$(".equal2").height($(".equal1").height());
}
Please, see this
Demo result
or
Demo with code.
Just with pure CSS you can solve it with flex.
You can add another class to your row class and then apply the styles on that class.
<div class="container">
<div class="row row-eq-height">
<div class="col-xs-6">
...
In the css add:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap; /*to enable responsiveness*/
}
.row-eq-height > [class*="col-"] {
display: flex;
flex-direction: column;
border: 1px solid green;
}
You can check a demo here.
Updated !
Try DEMO
Using JavaScript
$(".equal2").height($(".equal1").height());
Do Read http://www.ejeliot.com/blog/61
I have 3 div's, 200px,300px and 200px how can I align them side by side, all the examples I have seen only include 2. I have Div1,Div2 working correctly but Div3 for some reason slides under Div1 lie this picture
This is my code
<div style=" border-right:1px solid black; width:200px; float:left; position:relative; ">
//div1
</div>
<div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;">
//div2
</div>
<div style=" float: left; width: 200px;position:relative">
//div3
</div>
The Div1 has the shorter content on it, how can I make the border to the right as long as the border in Div2?
All the elements in one line
Wrap the div elements in a wrapper:
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
Then set the width of the wrapper, and float all three divs:
#wrapper {
width:700px;
clear:both;
}
#first {
background-color:red;
width:200px;
float:left;
}
#second {
background-color:blue;
width:300px;
float:left;
}
#third {
background-color:#bada55;
width:200px;
float:left;
}
Also, use IDs and/or classes, and keep the CSS separate from the HTML. This makes the code easier to read and maintain.
The fiddle.
All elements in one line, same height
To accomplish the "same height" part, you can use display:table, display:table-row, and display:table-cell to get matching heights. It uses an extra div, so the HTML looks like:
<div id="wrapper">
<div id="row">
<div id="first">first</div>
<div id="second">second<br><br></div>
<div id="third">third</div>
</div>
</div>
The floats can then be removed, so the CSS looks like:
#wrapper {
display:table;
width:700px;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:200px;
}
#second {
display:table-cell;
background-color:blue;
width:300px;
}
#third {
display:table-cell;
background-color:#bada55;
width:200px;
}
The fiddle.
The Flexbox Way
If you're only supporting newer browsers (IE 10 and up), Flexbox is another good choice. Make sure to prefix for better support. More on the prefixes can be found here.
The HTML
<div class="container">
<div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>
The CSS
.container {
display:flex;
justify-content:center;
}
.container > div {
margin:10px;
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The Codepen.
The Grid Way
You can accomplish this with grid now, too, though browser support might be an issue if you're supporting older browsers. It's the same HTML as with the flexbox example, with just different CSS:
The CSS
.container {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 10px;
width:700px;
}
.container > div {
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The codepen.
The HTML code is
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
Good Day
I want to align text in the center of a div. Now that is easy with text-align: center on parent div.
But If I want to left align the text inside the div to the left of the centered div, how do I do that?
See my fiddle: http://jsfiddle.net/DvXzB/5/
HTML:
<div id="aboutContent" class="row-fluid">
<div id="aboutHeaderText" class="span12"><span title="">About Us</span></div>
<div id="aboutHeaderBody" class="span12">
<p><a title="">asdasd</a> is a free mobile application available for <a href="#"
title="">iOS</a>, Androidand the Blackberry operating
systems.</p>
<p>sdefsadfsdfldflkjlj lkjlkjdlfsldfjlkj ljlsdjflj lkj ljklj lk; ;l;l; ;k;k
l;kgjh jhg gjjh jhgjhgjh jhgjh gjg jgjhgjg</p>
<div id="cities"><a title="">asdasdasd</a> currently only displays events and
specials in <strong>asdasd</strong> (our hometown), but the following locations
will be available before you know it:
<ul>
<li><span>asdg</span>
</li>
<li><span>asdwn</span>
</li>
<li><span>Pasdasdroom</span>
</li>
<li><span>Dasdaf</span>
</li>
<li><span>Bergrin</span>
</li>
<li><span>Sersch</span>
</li>
<li><span>Graergwn</span>
</li>
</ul>
</div>
<p>Visit our Facebook page for more
up to date information, and feel free to contact us with
any queries.</p>
<br />
</div>
</div>
CSS:
#aboutContent {
color: #222;
margin-top: 50px;
margin: 0 auto;
text-align: center;
}
#aboutHeaderText span {
font-family:"Kozuka Gothic Pr6N", sans-serif !important;
color: #eeeeee;
font-size: 26px;
font-weight: bold;
}
#aboutHeaderText img {
margin-top: -18px;
margin-left: 8px;
}
#aboutHeaderBody {
position: relative;
padding: 0px;
font-size: 16px;
}
#cities ul {
list-style: none;
margin-top: 10px;
}
#cities ul li {
font-family:'Open Sans', sand-serif;
padding: 3px 0px;
font-size: 20px;
color: #222;
}
I want the text in the middle of the page to be justified, but when I justify or left align it, it aligns it to the absolute left again. How do I do this without using fixed paddings or margins? Basically what I want is what they have on this page here(see the 'about us' section): http://www.villagebicycle.co.za/
Note: I am using a fluid layout, so fixed paddings etc won't work
Thank you
You need to center align the container with margin:0 auto after setting its width to a specific size like width:400px. Then align each element separately using text-align.
See this demo: http://jsfiddle.net/DvXzB/16/
If you want your container to have 100% width then do not use text-align:center to your parent div. Instead, use width:100% (optional) and again text-align each block as desired.
You've to use a wraper div to envolve all content. I've done a JsFiddle, I think is what you're looking for :)
.wraper {
position: relative;
width: 500px;
margin:0 auto;
}
Afther that you can align a <p> to the left, right, justify, etc. as you can see:
p.left{text-align:left;}
p.justify{text-align:justify;}
And the HTML for testing:
<div class="wraper">
<p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p class="justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I am having allot of trouble with layering, My current issue is that vistors can not click on links inside div layers for some reason. They can't highlight text, click on the images in the sidebar which are linked up. I don't know what is wrong. Any help would be much appreciated.
Site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arakion - Homepage</title>
<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="js/video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="js/video-js/video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf";
</script>
<style type = "text/css">
body {background-color:#FFFFFF; background-size:contain;}
</style>
<script type="text/javascript">
function chgbg() {
var d = new Date();
var h = d.getHours();
if ((h >= 6) && (h < 9)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 9) && (h < 20)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 20) && (h < 22)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 22) || (h<6)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
}
</script>
</head>
<body onload="chgbg()">
<div id="Wrapper">
<div id="navbar" style="display: inline-block;">
<ul id="nav">
<li id="top">
HOME
</li>
<li id="top">
GUIDE
<ul>
<li id="submenu">CLASSES</li>
<li id="submenu">DUNGEONS</li>
<li id="submenu">MONSTERS</li>
<li id="submenu">PETS</li>
<li id="submenu">RACES</li>
<li id="submenu">TOWN BUILDINGS</li>
<li id="submenu">UNIVERSE</li>
<li id="submenu">WIKI</li>
</ul>
</li>
<li id="top">
BLOG
<ul>
<li id="submenu">ARAKION</li>
<li id="submenu">CHRIS TAYLOR</li>
</ul>
</li>
<li id="top">
MEDIA
<ul>
<li id="submenu">CONCEPT ART</li>
<li id="submenu">SCREENSHOTS</li>
<li id="submenu">VIDEOS</li>
</ul>
</li>
<li id="top">
FORUM</li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><div id="Kickstarter_progressbar"></div></div>
<div style="display: inline-block;" id="sidebar_banner"><div id="Kickstarter_donationcount"><a>$20,000</a></div>
<div id="Sidebar_content">
<p> </p>
<p class="title">Social Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" class="title" /></p>
<p><img src="images/IndieDBIcon.png" width="35" height="35" />
<img src="images/FacebookIcon.png" width="35" height="35" /> <a href="http://twitter.com/arakiongame" target="_new">
<img src="images/TwitterICon.png" width="35" height="35" /> </a> <img src="images/YoutubeICon.png" width="35" height="35" /> </p>
<p> </p>
<p>Random Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
<p> </p>
<p> </p>
<p>Something</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
</div></div>
<div style="display: inline-block;" id="main_background">
<div id="main_content"><div id="main_img"><img src="images/MainImages/Main_Placeholder_img.jpg"/></div>
<table width="600" height="106" border="0" id="main_section_img" style="margin:0 auto; vertical-align:top; margin-top: 0;">
<tr>
<td width="140"><img src="images/MainImages/Placeholder1.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder2.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder3.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder4.jpg" height="100%" width="100%"/></td>
</tr>
<tr>
<td width="140">How Housing Works and why we have it <p> </p></td>
<td width="140">An In depth look at the Satyr race <p> </p></td>
<td width="140">We take a look at the role the alchemist plays in a group <p> </p></td>
<td width="140">Our doors are offically open to new employees apply today <p> </p></td>
</tr>
</table>
<p> </p>
</div></div>
<div style="display: inline-block;" id="sub_background_1"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_2"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_3"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text" style="z-index:9;">
<video id="" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="js/video-js/Posters/Test.png"
data-setup="{}">
<source src="js/video-js/Videos/Test.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>
Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_4"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div id="footer_background" style=" text-align: center; ">
<img src="images/Footer_Divider.png" height="10px" width="600px"/>
<p> </p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY SEAN HALL</a></div>
<div id="left"><img src="images/Backgrounds/Left.png" width="320" height="802" /></div>
<div id="right"><img src="images/Backgrounds/Right.png" width="333" height="833" /></div>
</div>
CSS Code:
#font-face {
font-family: 'KingthingsExeterRegular';
src: url('font/kingthings_exeter-webfont.eot');
src: url('font/kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
url('font/kingthings_exeter-webfont.woff') format('woff'),
url('font/kingthings_exeter-webfont.ttf') format('truetype'),
url('font/kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'KingthingsExeterRegular';
overflow-y: auto;
}
body,td,th {
font-family: KingthingsExeterRegular;
background-size: cover;
background-repeat:no-repeat;
text-align: center;
font-size: 15px;
zoom: 110%
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
color: #FFF;
}
a:active {
text-decoration: none;
}
/*Body Css */
#header{
z-index: -999;
width:900px ;
height:800px ;
position: relative;
top:0;
left:0;
}
#left{
z-index:-9;
width:239px;
height:600px ;
float: left;
clear: both;
position: absolute;
left:-215px;
top:150px;
}
#right{
z-index:-2;
width:239px;
height:600px ;
float:right;
clear: both;
position: absolute;
left:960px;
top:120px;
}
#Wrapper {
width:1040px;
margin:auto;
margin-top:-40px;
height:2000px;
position: relative;
z-index:0;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
#navbar{
position: relative;
top:91px;
float:left;
margin-top:50px;
margin-left:5px;
width:649px;
height: 50px;
z-index:4;
margin-bottom:10px;
clear:both;
}
#nav{
list-style:none;
font-weight:bold;
width:600;
height:50;
margin-bottom:5px;
}
#top{
float:left;
position:relative;
background-image:url("images/Button_NavBar_Unselected.png");
height:55px;
width:119px;
font-size:15px;
}
#top:hover{
background-image:url("images/Button_NavBar_Hover.png")
}
#submenu{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#submenu_bottem{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#nav a{
display:block;
padding-top:20px;
z-index:-1;
font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px;
text-align:center;
width:100px;
height:18px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:-30px;
top:40px;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
}
/* Main Block */
#main_background{
width:680px;
height:519px;
float:left;
background-image:url(images/MainSection.png);
}
#main_content{
width:590px;
height:430px;
text-align:left;
margin-top:20px;
margin-left:45px;
}
#main_img{
margin:0 auto;
margin-top:5px;
background-image:url(images/MainSection_BigImageHighlight.png);
width:520px;
height:300px;
text-align:center;
padding-top:4px;
}
#main_section_img{
margin-top:10px;
background-image:url(mages/MainSection_SmallImageInsett.png);
width:560px;
height:95px;
text-align:center;
vertical-align:top;
margin-top:0;
}
#main_section_img td{
vertical-align:top;
margin-top:0;
}
/* Sub Block */
/* Sub Background Hierarchy */
#sub_background_1{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-1;
margin-left:30px;
top:-38px;
background-repeat:no-repeat;
}
#sub_background_2{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-2;
margin-left:30px;
top:-52px;
background-repeat:no-repeat;
}
#sub_background_3{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-3;
margin-left:30px;
top:-65px;
background-repeat:no-repeat;
}
#sub_background_4{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-4;
margin-left:30px;
top:-77px;
background-repeat:no-repeat;
}
#sub_background_5{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-5;
margin-left:30px;
top:-83px;
background-repeat:no-repeat;
}
#sub_background_6{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-6;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_7{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-7;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_8{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-8;
margin-left:30px;
top:-85px;
background-repeat:no-repeat;
}
/* Hierarchy End */
#sub_content{
width:580px;
height:220px;
margin:0 auto;
margin-top:10px;
clear: both;
}
#Sub_title{
height:35px;
width:400px;
margin-top:30px;
margin-left:10px;
font-size:30px;
text-align: left;
}
#Sub_subtitle{
height:20px;
width:200px;
margin-left:10px;
margin-top:65;
font-size:15px;
text-align: left;
}
#Sub_image{
height:100px;
width:100px;
margin-top:10px;
margin-left:15px;
float:left;
}
#Sub_text{
height:180px;
width:400px;
float:right;
margin-top:5px;
text-align: left;
z-index:9;
position: relative;
}
/* SideBar Block */
#sidebar_header{
position:relative;
height:80px;
width:350px;
float:right;
background-image:url(images/Kickstarter.png);
margin-right:5px;
left:-20px;
margin-top:10px;
z-index:1;
clear: both;
top:1px;
}
#sidebar_banner{
position:relative;
height:729px;
width:360px;
float:right;
background-image: url(images/Side%20Banner.png);
left:-20px;
z-index:-1;
clear: both;
}
#Sidebar_content{
margin:0 auto;
margin-top:20px;
text-align:center;
font-size: 20px;
width:300px;
height:700px;
line-height: 3px;
}
#Kickstarter_donationcount{
width: 119px;
height: 26px;
text-align:center;
top:8px;
left:230px;
background-image:url("images/Progress/GoalNumber.png");
position: absolute;
padding-top:6px;
}
#Kickstarter_progressbar{
position:relative;
top:62px;
margin:0 auto;
width: 310px;
height: 18px;
background-image:url("images/Progress/KickstarterGoalBar_100.png")
}
#Kickstarter_donationcount a {
color: #000;
font:"arial";
font-size: 18px;
}
#Sidebar_content .title{
line-break: 1px;
}
/* Footer */
#footer_background{
position:relative;
background-image:url(images/Footer.png);
width:605px;
height:75px;
float:left;
margin-left:35px;
top:-89px;
z-index:-9;
line-height:1px;
font-family:"Arial";
font-size:12px;
}
#footer_background a:link{
color: #000;
text-decoration: underline;
}
#footer_background img {
margin-top:100px;
}
Wrapper is covering other stuff so you want to just push it to the bottom. Add z-index: 0; to #wrapper.
Or you can remove the z-index: -1 from the divs inside #wrapper
In the future, post only relevant code inside the post. Nobody will bother going through your site to figure out the issue for you. If you can't narrow the problem down to something specific, then you need to troubleshoot better.
While sachleen's answer did provide a workaround for your imminent problem, your page is facing several critical issues that will become problems very soon.
Give me the code!
Here's the link to your page fully working and without any validation issues. Images are not optimized, but I had to adapt one of them to prevent the usage of z-index all the time:
View it online
Download the files
Compare the files with your own and see what has been done to improve and make the document valid.
Here's a list of the most significant issues:
Element ID
Elements can have an ID, but the ID must be unique on the page, this because the ID purpose is to identify a specific element. If you need to provide a style to multiple elements, the proper way is to use classes.
From MDN :: id
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
Images
While this is more related with performance, I'm sure that visitors of this webpage will not be please to have to wait a considerable amount of time while 4Mb of images that you currently use get downloaded.
You can use Google Pagespeed Tools, that provides you with a tool to analyze the webpage for errors, and also if images aren't optimized, a link is presented on the analyse report to download an optimized version.
Document Stack
This is the reason as to why you've placed your question. You are messing around with your document stack to overcome issues that should be solved with images usage or a proper markup. While you're free to move elements up and down within the document stack, your page will be facing issues when it comes to cross-browser compatibilities.
The document stack should be used to overcome small details or provide a way to interact with the user without forcing a page refresh, among others. Shouldn't be used for the majority of the elements present as a way to solve layout issues.
Document Type
The document type is used to tell the browser how we should interpreter the document, and what rules should be respected to present it the way you intended.
When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult.
You can read about it at W3c - Doctype Declarations
HTML Markup
Your page lacks a proper markup, that in turn will prevent the browser from presenting elements the way they are supposed to be presented.
You can read about it at W3C - HTML: The Markup Language
Additionally, you can use the W3C validation service to validate and identify issues with your HTML Markup. Keep in mind that recent features aren't properly validated, mainly with CSS. But that's just a small portion.
Last night, I experienced a strange behavior in IE8 as I saw two noticeably different layouts of a page that's being hosted on separate servers. On my local web server, the header markup looked as expected with its left aligned logo and right aligned and stacked utility links, all of which displayed on a centered page. On a staging web server and a production web server, the header markup was completely invisible on the page, as it was positioned 152px higher than the page.
I understand that the ".header .hog" selector CSS code below is a hack. It was a quick fix for changes that needed to get deployed immediately. Rather than analyzing how to improve this code, I'm more interested in knowing the cause(s) of these presentation differences in IE8. A few question that I have are:
Could the markup have different encoding? If so, what is the best way in determining this possibility? And, which setting, if any, in IIS7 is responsible for encoding output?
Could permissions be the cause of this problem?
Is there a feature in IIS7 that determines whether or not the markup is strictly interpreted?
Is there a difference between the Layout Engines of IE8 on Vista and IE8 on XP?
My markup code is as follows:
<body>
<div class="content">
<div class="header">
<h1 id="logo"><img src="/img/logo.jpg" /></h1>
<div class="hog">
<a class="see">Text</a>
<div class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="utility-links">
<a>link1</a>|
<a>link2</a>|
<a>link3</a>|
<a>link4</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
My CSS code is as follows:
* {
border:none;
line-height:normal;
margin:0;
outline:none;
padding:0;
text-decoration:none;
}
body{
background:#70133F;
color:#000000;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
margin:0 auto;
}
.clear{
clear:both;
font-size:0;
height:0;
line-height:0;
margin:0;
padding:0;
}
.content{
background:#FFFFFF;
margin:0 auto;
width:970px;
}
.header{
height:160px;
}
.header #logo{
float:left;
font-size:0;
height:124px;
margin:25px 0 0 18px;
width:204px;
}
.header .util-links {
color:#E83F00;
font:bold 12px;
float:right;
margin:135px 15px 0 0;
text-align:right;
text-transform:uppercase;
}
.header .util-links a {
padding:0 10px;
}
.header .hog {
height:3px;
position:relative;
margin-top:-152px;
text-align:right;
width:945px;
}
.header .hog a.see-holiday {
color:#E83F00;
font:bold 12px;
text-transform:uppercase;
height:40px;
width:254px;
}
.header .hog .guidelines {
display:none;
margin-left:524px;
text-align:left;
width:428px;
}
Thanks for the help. Happy Thanksgiving, everyone!
John
Is there a difference between the
Layout Engines of IE8 on Vista and IE8
on XP?
If I understood it right, it appears that you are not only having 2 servers but you are also accessing the site from 2 different computers, one running XP and another Vista. Open the IE developer tools in both computers and observe the browser mode and document mode. Perhaps one of the browsers has been set permanently to IE7 compatibility mode? Or one of the servers is sending the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> tag forcing a compatible mode?
There is a slight difference between IE on XP and Vista because IE uses OS controls to render certain controls such as buttons, textboxes, select boxes and scrollbars. However, the difference in layout caused by that should not be that drastic.
For finding differences in headers, you can install a tool such as fiddler or httpwatch and inspect them in both machines.