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;
}
Related
I'm trying to fit a sidebar to the end of the #SUBCONTAINER div. this is the HTML code:
<body>
<div id="container">
<div id="subcontainer">
<div id="sidebar">
<div class="logo">
<img src="pictures/icon.png" alt="LOGO">
</div>
</div>
<div id="pagecontainer">
<div class="page">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
and this is the CSS I'm using right now:
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
position:relative;
width:100%;
}
#subcontainer {
position:relative;
clear:both;
}
#sidebar {
width:20%;
float:left;
background-color:#BD4538;
color:white;
}
.logo {
text-align:center;
left:50%;
right:50%;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
float:right;
background-color:#FFFFFF;
color:black;
}
.page {
padding:1em 1em 1em 1em;
background-color:#FFFFFF;
color:black;
}
#footer {
clear:both;
height:10em;
width:100%;
bottom:0;
background-color:#B82928;
color:white;
}
p {
margin: 0em 0em 0em 0em;
text-align:justify;
text-indent:1em;
}
Unfortunatelly the SIDEBAR DIV does not extend to the end of the parent SUBCONTAINER container, so if I have a longer text in PAGECONTAINER DIV, I will see the white background of the parent BODY under the SIDEBARE DIV.
I thought of a trick: if I change the background of the container PAGECONTAINER to the bgcolor of SIDEBAR I have what I want, but I'm working on a responsive website thus SIDEBAR need to change position and to go to the top of the pabe
So, any suggestion?
I've modified the code little bit. Normally to make a equal height column div display:table display:table-cell property used.
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
width:100%;
}
#subcontainer {
display:table;
}
#sidebar {
width:20%;
background-color:#BD4538;
color:white;
display:table-cell;
}
.logo {
text-align:center;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
display:table-cell;
background-color:#FFFFFF;
color:black;}
Working Demo link.
http://jsbin.com/mopunime/1/edit
Remove the "float" property from both the #sidebar div and the #pagecontainer div, and set them as display: table-cell;
Also, set the #subcontainer to display:table and width:100%;. That will make sidebar and pagecontainer to fill the subcontainer div.
Check it out:
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
position:relative;
width:100%;
}
#subcontainer {
position:relative;
display: table;
clear:both;
width: 100%;
}
#sidebar {
width:20%;
display: table-cell;
background-color:#BD4538;
color:white;
}
.logo {
text-align:center;
left:50%;
right:50%;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
display:table-cell;
background-color:#FFFFFF;
color:black;
}
.page {
padding:1em 1em 1em 1em;
background-color:#FFFFFF;
color:black;
}
#footer {
clear:both;
height:10em;
width:100%;
bottom:0;
background-color:#B82928;
color:white;
}
p {
margin: 0em 0em 0em 0em;
text-align:justify;
text-indent:1em;
}
Here's the fiddle: http://jsfiddle.net/z56S3/
If what you want is that the DIV "Sidebar" fit (width or height) to the div "subcontainer" then do that:
#sidebar {
width:100%;
height: 100%;
float:left;
background-color:#BD4538;
color:white;
}
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/
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%;
}
I want to put two divs next to each other but no matter what I do, the second div always ends up somewhere under the first. I have tried:
div.one {
width:50%;
float:left;
}
div.two {
width:50%
float:right;
margin-left:50%;
}
and
div.one {
width:50%;
display:inline-block;
}
div.two {
width:50%;
display:inline-block;
}
From your first example try removing the margin.
div.one {
width:50%;
float:left;
}
div.two {
width:50%
float: left;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Here is a link to a great tutorial that gives you several examples of positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning
Both should be "float:left;"
The elements have to fit - when there is a border , margin or padding, the "width:50%;" might be too high.
.one {
width: 50%;
float: left;
background: green;
height: 100px;
}
.two {
width: 50%;
float: right;
height: 100px;
background: red;
}
http://jsfiddle.net/qf9GD/
The first ModalPopupExtender appears in the center of the screen, when i show the second ModalPopupExtender it appears bellow and to the right of the first one (though above the first one).
I want to place it in the center of the screen.
Update:
I found that the problem with second popup was:
PopupDragHandleControlID="pnlDragMe"
if i remove this, it's ok.
but i need the drag-control!
This is my drag panel:
<div id="pnlDragMe" class="pnlDragMe">
Image Uploader
</div>
and it's css:
.pnlDragMe
{
background-color: #4D676A;
height: 24px;
cursor: move;
width: 100%;
text-indent: 10px;
}
Page Layout CSS:
/* General styles */
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
min-width:600px;
font-size:90%;
}
a {
color:#369;
}
/* column container */
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
/* 2 column left menu settings */
.leftmenu {
background:#FFD8B7;
}
.leftmenu .colright {
float:left;
width:200%;
position:relative;
left:195px;
background:#fff;
}
.leftmenu .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;
padding-bottom:1em;
}
.leftmenu .col1 {
margin: 0 5px 0 205px;
position:relative;
right:100%;
overflow:hidden;
}
.leftmenu .col2 {
float:left;
position:relative;
/*width:170px;
right:185px;*/
width:170px;
right:190px;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
Jquery center plugin
This works for me very well