I have a two-column layout. I have a #mainContainer div that contains all of the following (except the #footer):
Across the top: a header div (#intro)(contains a small gradient image),
and a #hero div (contains images)
To contain the two columns: a #content div
Within the #content div on the left: a #mainContent div
Within the #content div on the right: a #sideBar div
Across the bottom (outside the #mainContainer div): a #footer div on the bottom
(including a gradient image like the header div)
Simple, right? But I'm having trouble getting the #mainContainer div to be at the top of the browser (no spaces or that 6-8px default margin/padding all browsers have at the top) and getting the #footer div to span across the entire bottom of the browser window (not inside any of the Div's ). (disregard inline styles in footer). Could someone help me out?
UPDATED: ADDED HTML
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}
#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/
}
#intro {
/*top:0;*/
margin: 0;
text-align:left;
}
#hero {
width:960px;
padding-left:10px;
padding-right:10px
}
#content {
width:960px;
padding-left:10px;
padding-right:10px;
}
#mainContent_left {
float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}
#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}
#footer {
width:960px;
clear:both;
background:#cc9;
}
HTML:
<title>Descriptions </title>
<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>
<body>
<div id="mainContainer">
<div id="intro"><h2>introducing</h2></div>
<div id="Hero">
<ul>
<li class="name"></li>
<li class="textJoin">is a member of </li>
<li class="name"></li>
</ul>
</div>
<div id="content">
<div id="mainContent">
<h3>First Topic title</h3>
<p>floated left image and text</p>
<p>Some content</p>
<p>Some content</p>
<h3>Second Topic title</h3>
<p>Some content</p>
<p>Image here</p>
<h3>Third Topic title</h3>
<p>(floated left image here) Some text</p>
<h3>Fourth Topic title</h3>
<p>(floated left image here) Some text</p>>
<h3>Fifth Topic title</h3>
<p>(floated left image here) Some text</p>
<p>Image here</p>
<p>(link to FAQ page)</p>
</div>
<div id="sideBar">sidebar content
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer_warranty">footer content
<div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
<div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
<p style="clear:both;" />
</div>
</div>
<p style="clear:both;" />
</div>
</body>
</html>
I am unable to reproduce your problem. However, I have created a fiddle for you, where I have also added some CSS reset rules which should take care of a problem such as this, cross any and all browsers.
You should always use a reset CSS when you start a new site. That way, it's all on your terms and you don't have to "code away" specific browser behaviour.
I have also created some placeholder code since you did not provide any.
I hope the reset fixes your problem.
http://jsfiddle.net/dekket/eERsK/
Edit:
Check this new fiddle. Out to work.
http://jsfiddle.net/dekket/6bTkZ/
Try importing Meyer's reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
try adding float:left and overflow:hidden to your #mainContainer
you need to set the html and body css margin and padding properties to 0.
use the following in your css file
html, body {
margin: 0;
padding: 0;
}
Related
I have the following HTML and CSS, where the logo floats on the left side, but I'd like to be able to have the content float on right side.
<html>
<body>
<div id="logo">
<img src="images/logo.gif" height="376" width="198" alt="LOGO" title="" />
</div>
<div id="maintext">
<p id="main">First paragraph</p>
<p>Second paragraph.</p>
</div>
<footer>...</footer>
</body>
</html>
In my CSS, the selector for logo is:
#logo {
display: block;
float: left;
}
#maintext {
padding: 0 0.5em 0 0.5em;
}
What's happening is that the logo "images/logo.gif" shows up to the left side of but on top of the footer. It should show up on the left side of the "maintext" selector.
Any ideas?
Add this CSS:
footer {
clear: both;
}
I do not quite understand... it would be:
float: right;
The footer on my page at:
http://cinicraft.com/site2.0/index.html
should be below the main content window that says "CONTENT" but I can't seem to get it to go right above the footer that says "CiniCraft (c) 2013 All Rights Reserved"
Here's my code in HTML5:
<body>
<div>
<div class="newsBtn">
<h2>News</h2>
</div>
<div class="instaCraftBtn">
<h2>InstaCraft</h2>
</div>
<div class="youTubeBtn">
<h2>YouTube</h2>
</div>
<div class="contactBtn">
<h2>Contact</h2>
</div>
<div class="contentWindow">
CONTENT
</div>
</div>
</body>
<footer>
<div class="dock">
CiniCraft (c) 2013 All Rights Reserved
</div>
</footer>
This is the CSS code for the content and footer:
div.contentWindow
{
float:right;
text-align:center;
background-color: #000000;
width:900px;
height:900px;
padding:1px;
margin:5px;
}
div.dock
{
overflow-y: hidden;
position:relative;
left:-10px;
background-color: black;
padding:1px;
border:5px solid black;
margin-top: 120px;
}
How could I go about getting my footer to stay directly below the content window?
thanks
What you want is called a sticky footer.
This should help:
http://ryanfait.com/sticky-footer/
Also:
css-tricks example
clean sticky footer
Give clear:both to the footer.
It is because you have floated elements. Create a clear div below your contentWindow div.
<div style="clear:both"></div>
I want to use a fixed header, with the content behind it. The menu will contain anchor links, so all the content will be in one page.
But, I got stuck at an early stage. I thought this would be no problem, but it seems like the header div is snapped to the content div somehow. It looks like they have the same margin.
If position:fixed; is removed, it looks like it should, but I want it to be fixed.
I really don't understand why this happens, since they're separated from each other. Using something like margin-top:-100px doesn't feel right.
Doing this should work without ugly solutions...
CSS:
#header {
position:fixed;
width:1200px;
border:1px solid black;
z-index:1;
overflow:hidden;
background-color:white;
}
#menu {
width:100%;
z-index:2;
}
#content {
margin: 100px 0 0 0;
background-color:red;
overflow:hidden;
width:1200px;
z-index: -1;
height:100%;
}
HTML
<div id="header">
<h1>Header</h1>
<div id="menu"><ul>
<li>Works</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="works" name="works"></div>
<div id="news" name="news"></div>
<div id="about" name="about"></div>
<div id="contact" name="contact"></div>
</div>
<div id="footer"></div>
Add top: 0px; to your #header class
I have two css classes. One is supposed to hold images of text on the left side of the page and the other is supposed to hold a form on the right side of the page. For some reason, when I increase the padding to try to lower the text images on the left side of the page, the form on the right side also goes down. How can I fix it so that I can adjust the padding on both the classes independantly. Here is the css:
.header { background:url(images/slider_bgpng200.png) top repeat-x; padding:0; margin:0 auto; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.formbox{float: right;}
.logo { float:left; padding:0; margin:0; width:242px;}
.slider { background: transparent; margin:0 auto; padding:0; height:383px;}
.slider .gallery { margin:0 auto; width:980px; height:383px; padding:0;}
.slider .textholder {padding-top: 100px;}
And here is how it appears in the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="logo"><img src="logo.png" width="242" height="94" border="0" alt="logo" />
</div>
<div class="slider">
<div class="gallery">
<div class="textholder"> <img src="images/textimg.png"></div>
<div class="formbox">Form is here </div>
</div>
</div>
</div>
</div>
Thanks. The website is up at avidest.com/schneer.
Add a float:left to the textholder.
.slider .textholder {float:left;padding-top: 100px;}
I also recommend using a inspecting tool to see what is actually happening. In this case you would have noticed that the textholder is a block-element that uses the full width of the container.
Duplicate of this question.
I've got an existing site (jacquelinewhite.co.uk), on it there is a footer. Currently this footer always sits underneath the main content. I'm trying to make it float to the bottom of the browser window, or if the content is bigger than the window, stay at the bottom of the content.
Effectively the HTML is structured like this:
<div id="container">
<div id="top_bar">
</div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>
I have tried absolute position, bottom 0, which puts the footer at the bottom of the window, but if the content of the window is bigger then the footer covers the content.
How should I fix this?
This one's always worked well for me: CSS Sticky Footer
Test drive this...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
Assuming you are using footer() element I found just adding this to CSS worked for me
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}