I have a wrapper with inside a header, a left column and the main content.
Outside the wrapper i got the footer.
My problem is that main content, if there's not enough text, doesn't stretch till the bottom of the page. If i insert lorem ipsum etc, being many rows it's all ok, but if i try with only few rows, the main div stops before the very end of the wrapper (or better, the end of the page, before the footer).
Here's my html code
<?php session_start();
unset($_SESSION['message']);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/stili.css" type="text/css" />
<script type="text/javascript" src="../script/scripts.js"></script>
<meta charset="utf-8"/>
<title></title>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
include('../php/header.php');
?>
</div>
<div id="leftcolumn">
<?php
include('../php/leftcolumn.php');
?>
</div>
<div id="main" >Welcome to our site
...Some text, but not enough to stretch to the end of page...
</div>
<div style="clear: both"></div>
</div>
<div id="footer">Copyright 2013</div>
</body>
</html>
And here's the CSS
html,
body {
padding:0;
margin:0;
height:100%;
}
#wrapper {
min-height:100%;
height:auto;
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
}
#main {
float:right;
width:680px;
padding:10px;
background:#E0CD90;
text-align:justify;
overflow: auto;
}
#main a{
font-size:40px;
}
#footer{
border-top: 2px solid #CCCCCC;
width:950px;
margin:auto ;
height:30px;
background:#ee5;
clear: both;
}
Thanks in advice to everyone that will help finding the problem!
Splitting a page into multiple columns stretching automatically the height of the viewport is an ongoing topic. Just google for that, there are several CSS based solutions around there.
The problem is, that the height of the surrounding boxes are undefined (html, body, wrapper in your case). You may only add some "style" if theres a size on the parent as well.
One weired solution is, to set the style of the html object:
<html style="overflow:hidden;clip:
rect(auto);height:100%;;margin:0px;padding:0px;
background-color:white;">
(yes, it's not forbidden, you CAN do that and it's even IE 6 and 7 proven...)
and
#wrapper {
min-height:100%;
height:100%';
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
overflow: hidden; /* not sure if you want that */
}
Here are the keys to your problem you should look at and implement however you want:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#wrapper, #leftcolumn, #main {
height: 100%;
}
You dont need to add height in wrapper it will get the height based on the content inside a wrapper :)
Is this how you want it to be like? If not, then please let me know and I'll revise my answer.
UPDATE:-
#main {
height:100%
}
#wrapper {
height:100%
}
#leftcolumn {
padding:10px;
height:100%;
}
This should work.
UPDATE 2:-
#main {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
min-height:500px; (you can change this to your liking)
}
#footer {
position:relative;
}
This should give you the results you expect. No need to add my previous styling, just use this one now.
Related
I am new to the world of HTML5 and I am trying to build a layout to give me a better understanding on how i can move on from HTML4. I have currently built a layout but wanted to check:
If my code is written correctly (any tips or advice would be really appreciated, as first time I am writing in HTML5 so want to make sure im doing things right)
trying to fix the footer to sit at the bottom of the page, overlapping the sidebar and section2 slightly but at present it is showing across the middle of the page.
I have noticed when viewing the site in Firefox and using Firebug the site does not show up in the exact size that I have defined in the CSS, so would like to understand why this is.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
</head>
<body>
<div id ="container">
<header>
<h1>This my Header</h1>
<nav><h2>My Navigation Bar<h2></nav>
</header>
<div id="banners"><h2>My Banners<h2></div>
<aside id="sidebar"><h2>My SideBar<h2></aside>
<section id="content"><h2>This is my section1</h2></section>
<section id="list"><h2>This is my section2</h2></section>
</div>
<footer>
<h3>This is my footer</h3>
</footer>
</body>
</html>
My CSS:
body {
background:#FFF;
}
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
}
header {
margin:0;
padding:0px;
text-align:center;
height:166px;
}
nav {
height:65px;
text-align:center;
background:#CCC;
}
#banners {
margin:0;
height:253px;
background:#01AEF0;
text-align:center;
}
#sidebar {
height:600px;
width:310px;
background:#ec8400;
float:left;
text-align:center;
}
#content {
height:300px;
width:650px;
background:#CCC;
float:right;
text-align:center;
}
#list {
height:300px;
width:650px;
background:#01AEEF;
float:right;
text-align:center;
}
footer {
margin:0;
padding:0;
text-align:center;
font-weight:bold;
height:167px;
background:#efefef;
z-index:-1px;
text-align:center;
}
Thanks in advance for looking at this, any advice would be greatly appreciated.
give height to the 'container' in css file should be in 'px'...
example
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
height: 600px
}
it should work fine
some steps to to at first:
Remove default browser margin and padding.
* {
margin: 0px;
padding: 0px;
}
Remove margin:0 and padding:0 from .header, .footer and #banner.
use meta viewport tag to make it more responsive:
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Use classes instead of ID's, they're too specific. Leave ID's for JS.
See here for the difference between ID's and classes:
https://css-tricks.com/the-difference-between-id-and-class/
I have added the following to my footer tag in the css file and this overlaps behind the sidebar/section that i required.
margin-top: -80px;
Thanks guys for looking at this for me, really appreciate it.
How do you get CSS to scale down two absolute positioned images, side-by-side, within their own div but inside a parent wrapper?
I have looked at many stackoverflow questions, but could not find an answer for how to deal with two or more images. I have tried multiple CSS examples but to no avail.
I put together a mock example that simulates what I’m trying to do. See http://www.netplayhockey.com/test.php. Please note that there is a reason the images are different widths and in their own div (has to do with some absolute text positioning that I removed for this demo).
The page width is 1024px (image1 598px, image2 426px). If you reduce the width of the browser, I would like both images to scale down. But, instead, the images do not change size. In fact, image2 overlaps image1.
It’s doing what I want when browser width is less than 600px (I picked 600px as an example, I really want this to occur for mobile but not iPad), I want image2 to move under image1. And the images to be centered.
Note: If I use relative positioning and float, I don't get the desired centering results (the images stack when screen is less than 1024px, and they don't center).
Attached is the HTML and CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="footer-wrapper">
<div class="footer">
<div class="footer-left"><img src="image1.png" /></div>
<div class="footer-right"><img src="image2.png" /></div>
</div>
</div>
</div>
</body>
</html>
body {
position:relative;
background:#999;
margin:0;
padding:0;
}
.container {
position:relative;
max-width:1024px;
margin:0 auto;
}
.footer-wrapper {
position:relative;
}
.footer {
position:relative;
}
.footer-left {
position:absolute;
left:0;
}
.footer-right {
position:absolute;
right:0;
}
.footer img {
max-width:100%;
text-align:center;
height:auto;
}
#media all and (max-width:600px) {
.footer-left {
position:relative;
text-align:center;
}
.footer-right {
position:relative;
text-align:center;
}
}
Yes. Thank you! I slightly modified the CSS (removed some stuff that wasn't needed for it to work like I want it). - I had to re-edit, to show CSS code. after I posted my thank you
.footer {
position:relative;
}
.footer-left {
position:relative;
float:left;
width:58.4%;
}
.footer-right {
position:relative;
float:left;
width:41.6%;
}
.footer img {
max-width:100%;
height:auto;
}
#media all and (max-width:600px) {
.footer-left, .footer-right {
position:relative;
float:none;
width:100%;
height:auto;
text-align:center;
}
}
will this work for you ?
http://jsfiddle.net/PR4DE/btzj5dtu/
for future reference:
<div class="grid">
<div class="col-1"><img src="http://www.netplayhockey.com/image1.png"></div>
<div class="col-2"><img src="http://www.netplayhockey.com/image2.png"></div>
</div>
/*style*/
.grid {position:relative;max-width:960px;margin:0 auto;}
.col-1 {position:relative;width:58.4%;float:left;}
.col-2 {position:relative;width:41.6%;float:left;}
#media (max-width:960px) {
.col-1 {width:100%;float:none;height:auto;}
.col-2 {width:100%;float:none;height:auto;}
img {width:100%;height:auto;}
}
i want to remove blank spaces which is there. i am a layman user. please forgive me if i am doing a silly mistake. thanks in advance. see image in which space is there and refer to code also.
html code:
<html>
<head>
<title>CSS</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="wraper">
<div id="header">
Header
</div>
<div id="sidebar">
Side
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
css code:
#wraper {
margin:0 auto;
width:800px;
height:1000px;
background:#FCFCFC;
}
#header{
background:#CFCFC0;
height:100px;
width:800px;
}
#content {
float:right;
width:600px;
height:700px;
background:#C0C0C4;
}
#sidebar {
float:left;
width:200px;
height:700px;
background:#CFFCCC;
}
#footer {
clear:both;
background:#C0CC0C;
height:200px;
width:800px;
}
*{
padding:0;
margin:0;
}
give padding and margin manually to each tag later
try to remove padding and margin from body and html elements
html, body {
margin: 0; padding: 0;
}
As a good practice you could load a normalize or reset stylesheet as a first css (e.g. http://meyerweb.com/eric/tools/css/reset/) to remove style discrepancies among browsers
Using a css reset like http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css or http://meyerweb.com/eric/tools/css/reset/ will help.
try this demo
only add this to the top of your css
html, body {
margin: 0 auto;padding:0;
}
0 for the top and bottom margin and auto for the left and right margin to make it in the center
Another option as specified by #Fabrizio is to use normalize CSS.
https://github.com/necolas/normalize.css/blob/master/normalize.css
I'm having a problem with setting the height of <div> tags using CSS.
I'm using the following CSS & HTML code.
<!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">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
div
{
display:block;
}
#ph_container
{
margin:0 auto;
width:980px;
height:auto;
border: 1px solid #00CC33;
clear:both;
background: #F0F0F0;
}
#cp_search
{
height:100px;
clear:both;
margin:10px 0px 0px 0px;
border: 1px solid #0099FF;
}
#cp_search_ex
{
clear:both;
background:none;
margin-top:5px;
margin-left:27px;
}
#cp_search_tx
{
width:210px;
float:left; /*try here whitout float and see the difference that I want to get*/
margin:0px;
background:none;
}
.txtx
{
color: #000000;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
</style>
<body>
<div id="ph_container" class="space">
<div id="cp_search">
<div id="cp_search_ex" class="space">
<div id="cp_search_tx" class="txtx" >SEARCH</div>
</div>
</div>
</div>
</body>
</html>
My problem is that the parent div id="cp_search_ex" doesn't get the height of the div id="cp_search_tx" which is inside it, it has the height: 0px.
I want the div id="cp_search_ex" to take the height from the div id="cp_search_tx"?
I wrote a comment in the CSS code please follow.
I believe you are describing the problem solved by using a "clearfix".
try adding this to the style for the parent divs (so they wholly-contain their floated children):
overflow:hidden;
pretty complex post - it would help if you could pare it down to a specific example that exhibits the problem you're having.
You have at least one error in your CSS. You've set the height twice...
#ph_container{
margin:0 auto;
width:980px;
height:auto; /* duplicated height */
border: 1px solid #00CC33;
clear:both;
background: #F0F0F0;
height:100%; /* duplicated height */
}
So if you want the parent to take the height of its content, then you need to remove height:100% as that is telling the parent to be 100% of whatever is just outside the parent... in your case, that's 100% of the body's height.
And cp_search_tx cannot expand the size of its container since it's a float:. By definition, floats are outside of the normal content flow and therefore their container elements will appear to be empty.
Add an empty clearing div under the content which forces the container div to dynamically expand.
<div id="cp_search_ex" class="space">
<div id="cp_search_tx" class="txtx" >SEARCH</div>
<div style="clear:both;"></div>
</div>
Alternatively, simply adding overflow:hidden to the container will also force it to expand to encompass any floats.
Use a clearfix method. I usually use
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
* html .clearfix,
*:first-child+html .clearfix {
zoom: 1;
}
Apply the class clearfix to ph_container and see if that fixes it.
The question does not really make much sense, the outer block takes 100px + margin, so it works.
The text element has float defined so it doesn't take space.
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.