The problem:
Stretching a table 100% width/height inside a table-row doesn't work in IE.
Why?!
Here's the code (http://jsfiddle.net/GBsay/2/):
html:
<body>
<div id="row">
<div id="table">
this table should be 100% width/height, green color<br/>
It works in ANY browser except IE.<br/>
WHY?!
</div>
</div>
</body>
css:
html, body {
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
}
body {
display:table;
}
#row {
display:table-row;
width:100%;
height:100%;
background:#f00;
}
#table {
display:table;
width:100%;
height:100%;
background:#0f0;
}
This code works in all browsers except IE (7,8,9,10).
Anyone knows how to fix this using only css?
The wonderful beauty of Internet Explorer, is a test of patience for many developers, however the solution is as follows
html, body {
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
}
#table {
position: relative;
display:table;
width:100%;
height:100%;
background:lightgreen;
}
body {
}
#row {
width:100%;
height:100%;
position: static;
display:block;
background:lightblue;
text-align:center;
float: center;
top:100%;
}
Related
Hi i'm doing the a basic layout and i have a problem with my css.
I have a footer tag set, but it doesnt appear at the bottom it appears a the midway point in the page.
Here is my CSS code
My "footer" doesn't appear at the foot if the page ?
I think it might be the height and width i have set but i'm not sure what to set it as prperly.
Thanks in advance
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Replace the footer with:
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
The tutorial used: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This is my full CSS:
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
And this is how i referenced it from the html:
<footer id ="footer">Some footer text</footer>
I suspect you did not reference it correctly, with the proper id from your div?
I think I see your problem. In the footer css code you have the following:
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Pretty sure the margin-bottom being a negative number is the issue. Change that to 5 or 10 and see if it appears.
i got it thanks for all your help.
i got this from summer codes answer above
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
and i had to change the main section to
#main
{
position:relative;
height:100%;
background:#666;
}
I am trying to make a UL or DIV's where each list item / child div is full screen (100% width 100% height) and floated left so i can scroll horizontally through them, any idea how I can do this? here is my code but it is not working as I had thought
HTML:
<html>
<body>
<div id="site-holder">
<div class="toronto-full">
TESTING
</div>
<div class="montreal-full">
TESTING
</div>
</div>
</body>
</html>
CSS:
html { width:150%; height:100%; margin:0; padding:0; }
body { width:150%; height:100%; margin:0; padding:0; }
#site-holder { width:100%; height:100%; margin:0; padding:0; float:left; }
.toronto-full {background-color:green; width:50%; height:100%; float:left; }
.montreal-full {background-color:red; width:50%; height:100%; float:left; }
Any Ideas?
FIDDLE
Try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#site-holder {
width:100%;
height:100%;
margin:0;
padding:0;
white-space: nowrap;
font-size: 0;
}
.toronto-full, .montreal-full {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: top; /* this line added in edit */
font-size: initial;
}
.toronto-full {
background: green;
}
.montreal-full {
background: red;
}
EDIT:
Review the code again. I added a line which fixes the problem with vertical mismatch of the divs.
Why do you even want to use float for this?
You could use inline-block display;
.toronto-full {
background-color:green;
width:50%;
height:100%;
display: inline-block;
}
.montreal-full {
background-color:red;
width:50%;
height:100%;
display: inline-block;
}
Example: http://jsfiddle.net/7DxFE/
I want three div's next to eachother (I placed them in a .wrapper div so I could float them to the left). The three div's should be centered on the page. So I thought, if I center the .wrapper with margin-left/right: auto, all the three divs would center up. This didnt work.
Also, when I resize the browser the divs move. I don't want that to happen.
I've googled endlessy and put lots of solutions in the script, nothing worked.
Also, it shows differently per browser (firefox, safari and Chrome).
Here's my HTML:
<div id="container">
<div class="wrapper">
<div id="lost"><img src="images/lost.png"></div>
<div id="compass"><img src="images/compass.png"></div>
<div id="sailor"><img src="images/sailor.png"></div>
</div>
<div id="sea">
<img src="images/seaAnimated.png" class="sea" id="animatedSea">
</div>
</div>
And my CSS:
body,html
{
margin:0px;
padding:0px;
}
#container
{
position:absolute;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.wrapper
{
left:auto;
right:auto;
margin-left:auto;
margin-top:8%;
margin-right:auto;
padding-left:auto;
padding-right:auto;
width:100%;
height:75%;
}
#lost
{
float:left;
width:auto;
clear:both;
margin-left:auto;
margin-right:auto;
}
#compass
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sailor
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sea
{
position:absolute;
bottom:0px;
z-index:2;
background-image:url(images/sea.png);
background-repeat:repeat-x;
background-position:bottom;
height:25%;
width:100%;
}
#animatedSea
{
position:absolute;
bottom:10px;
width:auto;
height:25%;
z-index:-1;
}
try this
css
.wrapper{
text-align:center;
margin-top:8%;
width:100%;
height:75%;
}
#lost{
display:inline-block;
width:50px;
height:50px;
background-color:#0C0;
}
#compass{
display:inline-block;
width:50px;
height:50px;
background-color:#06F;
}
#sailor{
display:inline-block;
width:50px;
height:50px;
background-color:#96F;
}
html
<div class="wrapper">
<div id="lost">123</div>
<div id="compass">456</div>
<div id="sailor">789</div>
</div>
jsFiddle Code
You could use a fixed width on your wrapper to get it to center. You do have to specify a width (and not leave it empty) because divs are block-level, meaning that they fill the entire width by default.
http://jsfiddle.net/isherwood/CBMaX/2
.wrapper {
width: 240px;
margin-left:auto;
margin-right:auto;
}
#wrapper
{
text-align: center;
}
#compass
{
width:33.3%;
}
#sailor
{
width:33.3%;
}
#lost
{
width:33.3%;
}
Try this css. Include this css into your css.
My third attempt recoding my site for a responsive layout based on more suggestions from Stack Overflow members. This time I'm using a display:table / display:table-cell setup to center a page wrapper whose height is controlled by content and a sticky footer.
A member suggested a basic layout that works (thanks!) BUT I cannot center my inline wrapper inside my page wrapper if I use a width less than 100%. It forces the inline-wrapper to the right of the page-wrapper.
I've tried margins, padding and text-align. I could probably hack it with the "center" tag but I want my code to be semantic.
This is a condensed view of my code - I'm not sure if I'm doing something wrong, missing syntax (I forgot a comma earlier that cost me 30mins troubleshooting), it needs a hack for ie10 and Opera or whatever.
<div id="page-wrapper>
<div id="logo"><img /></div>
<div id="inline-wrapper">
<div id="top-content">
<div id="left"><img /></div>
<div id="center">content blah blah</div>
<div id="right"><img /></div>
</div>
<div id="nav-menu"><ul><li><img /></li></ul></div>
<div id="main-content">
<div id="left"><img /></div>
<div id="center">content blah blah</div>
<div id="right"><img /></div>
</div>
</div></div>
<div id="footer"></div>
html, body, #page-wrapper, #inline-wrapper, #top-content, #main-content {
height:100%;
width:100%;
margin:auto;
}
#page-wrapper {
height:100%;/* to show footer */
width:70%;
position:relative;
display:table;
table-layout:fixed;
border:solid;
}
#logo {
width:100%;
top:.75%;
z-index:99;
position:absolute;
}
#logo > img {
width:100%;
}
#inline-wrapper {
position:relative;
display:table-cell; <-- /* I removed this */
width:90%;
margin:auto;
background-color:#fff;
padding-bottom:1%;
}
#top-content, #main-content {
display:table;
width:98%;
border-collapse:collapse;
}
#top-content {
height:60%;
}
#right, #left, #center {
display:table-cell;
}
#left {
background-color:#CC0000;
width:14%;
}
#left img {
width:100%;
height:100%;
}
#right {
background:#0600ff;
width:14%;
}
#center {
width:72%;
background:#ccc;
}
#nav-menu {
width:100%;
margin:0 auto;
text-align:center;
}
#nav-menu li {
color:#fff;
margin:auto;
display:inline-block;
background-color:#000000;
list-style-position:inside;
border:1% solid #ffffff;
padding:.75%;
width:12.5%;
height:31%;
vertical-align:top;
}
#nav-menu li:hover {
opacity: .55;
filter: alpha(opacity=55);
}
#nav-menu li img {
height:100%;
width:100%;
}
#footer {
width:100%;
height:250px;
background-color:#000;
border-top:solid;
}
Try clossing the id there: <div id="page-wrapper>. Change it to this: <div id="page-wrapper">
I am trying to get a Sticky Footer to work, and have currently tried the following css:
#footer {
width:920px;
height:208px;
font-size:10px;
margin-left:auto;
margin-right:auto;
background-image:url(images/grad.png);
background-repeat:repeat-y;
padding:0 20px;
clear:both;
position:relative;
margin-top:-208px;
}
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333333;
background-repeat:repeat-x;
padding: 0;
height: 100%;
}
#wrap {
width:960px;
margin:0 auto;
min-height:100%;
height: 100%;
}
#content {
width:892px;
float:left;
border-left:4px solid white;
border-right:4px solid white;
padding:15px 0px 15px 20px;
background-image:url(images/sidebar_bg.png);
position:relative;
padding-bottom:143px;
}
I have had to reduce the #content padding-bottom, so it would fit. But I am still having issues. Firstly, There is too much space at the bottom of longer pages (see - http://bellbird.redgraphic.co.uk/headteacher/ ) Secondly, on a shorter page the footer doesnt scroll up when the browser window is resized (see - http://bellbird.redgraphic.co.uk/school-council/ )
Sticky footers always seem to be an issue, so I must be missing a trick.
Any help would be greatly appreciated.
Lewis
usefull link here. This one helped me with the same issue.
CSS mark-up:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
HTML mark-up:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
use this css instead of your
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
height:40px; /* Height of the footer */
background:#6cf;
}
html:
<div class="wrap">
<div class="inner-wrap">
...
</div>
</div>
<footer>
...
</footer>
css:
html, body {height:100%;}
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;}
.inner-wrap {padding-bottom:100px;}
footer {height:100px;}