I'm trying to make a 100% height layout with a footer at the bottom. I have a site wrapper, in which I have two content divs. In the second content div I have a footer at the bottom. The problem is the top content div seems to be pushing the second content div beyond the website wrapper.
This is the code I'm experimenting with:
<style type="text/css">
html, body { height:100%;}
#sitecontainer {
height:100%;
border: medium #000 solid;
}
#contentcontainerone{
border: medium #F00 solid;
}
#contentcontainertwo{
height:100%;
border: medium #00F solid;
position:relative;
}
#footer{
position:absolute;
bottom:0;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="sitecontainer">
<div id="contentcontainerone">
Some content <br />
Some content <br />
Some content <br />
Some content <br />
Some content <br />
</div>
<div id="contentcontainertwo">
<div id="footer">Footer</div>
</div>
</div>
</body>
This is the link to the page: http://www.smsidat.com/test/index.html
What I basically want to achieve is that the website should always be 100% height wise and so stretch to the bottom of the browser window or where the content ends if it's of greater height with a footer at the bottom. So ideally, the div with the blue border should remain within the wrapper which has the black border and stretch no further than the bottom of the browser window or the end of the content if it's greater.
Would appreciate any ideas how to fix this, thanks.
Here the solution:
html, body
{
height: 100%;
overflow: hidden;
}
#sitecontainer
{
height: 100%;
position: relative;
}
#footer /*OUTSIDE THE CONTAINER */
{
bottom: 0;
position: absolute;
height: 50px; /*change this*/
}
Using the <table> tag is indeed not recommended for layout.
CSS3 has many ways to solve this as described above (use 100% height for the container and their parents all the way to the html tag). There are cases (ref: Eric Meyer, Smashing CSS book) however, when the CSS display: table-cell style attribute can be appropriate for layout ... such that at least it puts the layout control back in the CSS versus the content as a best-practice.
Trying to align a DIV at the bottom of another div can be tricky. There are hackish ways to accomplish this but I would recommend just using a table.
<table>
<tr>
<td><div id="header"></div></td>
</tr>
<tr>
<td><div id="content"></div></td>
</tr>
<tr>
<td><div id="footer"></div></td>
</tr>
</table>
Then use CSS to define the heights of each DIV, with the content DIV stretching with the page until overflow occurs while the header and footer DIVs stay at their original heights.
Related
I made an image slider for my forum homepage but the content is comming out of the wrapper.
How can I make sure the content will always be 100% width of the wrapper?
HTML:
<div id="wrapper">
<table>
<tbody>
<tr>
<td>
<div class="rg-content">
//image slider code
</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
#wrapper {
margin: 0 auto;
max-width: 980px;
width: 90%;
background: linear-gradient(#fefefe, #e7e7e7);
}
.rg-content {
width: 100%;
background: #101010;
}
Screenshot:
What's Going On
It looks like your #wrapper doesn't have overflow set to hidden. Personally I tend to stay away from tables and use either float'd block elements or inline-block elements. I recently built a slider using figure for the outside wrap, ul for the fixed width inner wrap, and lis for each item. I had to set the figure to overflow:hidden for it to hide everything that wasn't supposed to be visible. Try adding that.
Code
#wrapper {
overflow:hidden;
}
Just add
<table style="width:100%;">
http://jsfiddle.net/jzLN6/
EDIT:
according to your jsfinddle and your comments I made some modifications to get this result
http://jsfiddle.net/bB9tQ/4/embedded/result/
is not fully functional but maybe its a basic idea of what you want to do
so if you want the layout to be fluid you will have to do some changes
remove de px of your ul and change your display to inline-block because if you have
display: block
this will make your li elements to lose the normal flow on the page and you won't be able to use % to stretch the content
<ul style="width: 100%; display: inline-block; margin-left: ;">
after that you should use % on each li tag instead of px.
if this is an approach to what you need, please let me know to give you a better elaborated example
I have a table set to 100% width. I will add a random div with php full of ads at times. I want the ad div to be on the right and the content of the table. I want the table to be on the left but still at 100% or so it will fill all the space to the left of the ad div.
In short, so when the div is not present the table will fill 100% width.
When the div is present the div will be on the right side of the table at a set width of 300px.
Here is the style for the div
.ContentAds {
float: right;
height: 100%;
width: 300px;
display: block;
clear: none;
}
The table is not a div but simply set to 100% width.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><p class="Title">Title</p>
<p>This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.. </p></td>
</tr>
</table>
For now I can only suggest to wrap your table with a positioned div. But I can't be sure that it will be sufficient to you cause you provided rather small amount of code
jsfiddle
<div class="ad">
advertise... advertise
advertise... advertise
advertise... advertise
</div>
<div class="table_wr">
<table>
<tr>
<td>
<p class="Title">Title</p>
<p>
This is the content. This is the content.
This is the content. This is the content.
This is the content. This is the content.
This is the content. This is the content..
</p>
</td>
</tr>
</table>
</div>
CSS
body {
position: relative;
}
table {
border: 1px solid black;
width: 100%;
}
.ad {
float:right;
width:300px;
height: 500px;
background-color: #a2e89f;
}
.table_wr {
position: absolute;
left: 0;
right: 300px;
}
border is set for table for you can see where table stretches
I think this won't work unless you give the table a smaller set width when the other DIV is present then you could float it to the left too.
Perhaps you could have the table set to be 100% then when the other DIV is there you add a class onto the table which adjusts the width and floats it?
I have a 1000px wide page that holds output in a table that is much wider than the rest of the page. I have no problem with scrolling horizontally to read all of the data but the backgrounds of the surrounding divs like the header and footer are not repeating out with the large table.
I read some tips about adding "display:inline-block" to a div around the large table, but I still haven't found a solution.
Help is much appreciated.
<div id="top_ad">
</div>
<div id="header">
</div>
<table>
THIS IS THE HUGE TABLE
</table>
<div id="footer">
</div>
The header div's background is repeating out because I have the image set as the BODY's background as opposed to the "header" div. However the "top_ad" and "footer" div's backgrounds stop at 1000px. My CSS below:
body {
background:url(/images/header_background_repeat.jpg) repeat-x 0 110px;
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color:#262626;
text-align:center;
}
#top_ad {
width:100%;
height:100px;
background: #0f3245;
text-align:center;
padding-top:10px;
}
#footer {
border-top: 6px solid #C9660D;
padding-top: 0;
width: 100%;
}
It sounds like you just need a scrollable div to contain your table. Here I use width 100% but you may want to use a width = to the width of your page.
http://jsfiddle.net/XXhzp/
<div id="tablecontainer" style="width: 100%; overflow: scroll;">
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</div>
append a width of 100% to your body
Try adding a container div around everything in the page. Presumably, that div will take on the width of the child table and will then confer that width to the other divs if they are set to 100%.
I currently use this way to center divs using a table and CSS:
<table width="69" border="0" align="center">
<tr>
<td width="59">
<div style="position:relative;">
<div style="position:absolute; text-align:left; top: 100px;">div2 content goes here</div>
<div style="position:absolute;text-align:left;">div content goes here</div>
</div>
</td>
</tr>
</table>
Here's the sample: http://2slick.com/div_center.html
Notice how expanding the browser doesn't change the centering of the divs. Does anyone know a way to do something similar using CSS and less code?
Give the div a fixed width and set both left and right margins to auto.
.centeredDiv {
width: 800px;
margin-left: auto;
margin-right: auto;
}
Common method is without using a table, set div margin:0 auto in its style.
Using a table isn't the best idea when trying to do positioning, unless you're displaying data. If you're trying to use a center layout page design check this out: http://simplebits.com/notebook/2004/09/08/centering/
margin:auto
Should do the trick on the centered div. To recreate your example pretty closely:
<div style="width:100px; margin:auto">
<div style="width:100px;">div content goes here</div>
<div style="width:100px;">div2 content goes here</div>
</div>
You can then add padding, text alignment etc as needed. Also good to get the inline styles out, but for examples inline is convenient.
Just set auto margins. See this page:
http://www.bluerobot.com/web/css/center1.html
Here goes...
CSS:
body {
text-align: center;
}
div {
width: 59px;
margin: auto;
text-align: left;
}
HTML:
<div>I'm a div!</div>
<div>So am I!</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a div with a background image that needs to be centered horizontally and vertically. On top of that image, I also want to display a 1-line text, also centered horizontally and vertically.
I managed to get the image centered, but the text is not centered vertically. I thought vertical-align:middle would do the trick.
Here's the code I have:
<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
<div style="color:#ffffff; text-align: center; vertical-align:middle;" >
Some text here.
</div>
</div>
Any ideas?
Workaround: I actually got this to work by using a table. (I'll probably be cursed to hell by the HTML community.) Is there any significant reason not to use this btw? I'm still interested in the solution using divs though.
<table width="100%" height="100%">
<tr>
<td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td>
</tr>
</table>
Horizontal centering of a block element is traditionally done this way:
div.inner { margin: 0 auto; }
Note: the above won't work with IE in quirks mode so always put a DOCTYPE at the top of your document to force it into standards compliant mode.
Vertical centering is much more tedious. See Vertical Centering in CSS
there is no direct vertical centering for div content in CSS, however there are indirect ways of achieving it.
http://phrogz.net/CSS/vertical-align/index.html
also many similar questions in SO. How to vertically center a div for all browsers?
In case you have to use only one line of text and parent div has fixed height use line-height property. Suppose parent height is 500px then use CSS line-height: 500px; for text.
Without using javascript (ala something like thickbox, etc. for positioning photos/captions centered), the closest I could come to was this:
<body style="height:200px; min-height:800px;">
<div style="background: url('background.png') no-repeat center; height:100%;">
<div style="text-align: center; position:relative; top:50%; color:#fff;">
Some text here.
</div>
</div>
</body>
Note that I had to specify some sort of height for the container (in this case the BODY but it could also have been applied to the wrapper DIV I think). In Explorer 6, you can set the BODY height to 100% but in Firefox this doesn't work and probably won't work in other modern browsers.
EDIT:
Found a better solution:
<style type="text/css">
html, body {height:100%;}
</style>
</head>
<body>
<div style="background: url('background.png') no-repeat center; height:100%;">
<div style="text-align: center; position:relative; top:50%; color:#fff;">
Some text here.
</div>
</div>
</body>
If you want to get VERTICAL centering, I would suggest to use a table inside the DIV (as suggested by Cletus above other ways might be tedious).
div.centered table {margin: 0 auto;} /* no width needs to be specified for table */
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */
<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
<table style="border: 1px solid #ff0000;">
<tbody>
<tr><td>
Some text here
</td></tr>
</tbody>
</table>
</div>
If you are only interested in HORIZONTAL centering (no vertical) you can use only DIV:
div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */
<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
<div style="border: 1px solid #ff0000;">
Some text here
</div>
</div>
As you might have noticed in order to horizontally align a DIV inside a DIV you also need to specify a fixed width for the inner DIV. This might be somehow not what you want to do, so it might be easier to use always the 1st solution (the one with TABLE) and simply remove the "vertical-align: middle;" when you want to get only horizontal centering.
I tested this using document with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
on IE7, FF 3.6, SAFARI 4.0.4