I'm having issues with my divs. I'm trying to make a content parent dive that will stretch as posts are placed in it(wordpress theme) without the child div pertrudeing from the bottom. I found that the key to this is to make the parent div absolute, but this creates another problem for me. The thing is that I also want a relatively posititioned footer that moves as the content div stretches. So what I am trying to has is how can I have a "stretchy" content div and a relatively positioned footer simultaneously? Here's my css:
body{height: 100%;
margin: 0;
padding: 0;
}
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}
Like i said, I already tried relative positioning, but that didn't work to my liking. I also tried the "sticky footer" method, which works fine on a large resolution screen, but displays either in front or behind the content div(depending on the z-index) on smaller res screens. Also, if it is posible, I would prefer to not utilize JS. Any help is much appreciated!
enter code here
Set overflow to auto in content,
Change height to min-height in content,
Have absolute elements wrapped in a relative div for happiness.
Here is a jsfiddle showing it: http://jsfiddle.net/mAhet/
HTML
<html>
<body>
<div id="wrapper">
<div id="content">
<div style="position:relative; width:100%; height:100%;">
<div class="post">lasa sf </div>
<div class="post"> asd asd as</div>
<div class="post"> asd a dsadda das</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS
body{height: 100%;
margin: 0;
padding: 0;
}
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
position:relative;
}
#content{
min-height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
overflow:auto;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}
Here is a jsfiddle showing it in action: http://jsfiddle.net/mAhet/
Related
If using the relative positioning keeps my content box within the body container, why does the box I am using overlap the body tag's borders?
This is the html:
<body>
<div class="content">
<img src=""/>
</div>
</body>
This is the css for my body tag:
body {
font-family: Calibri;
background-color: #e7e6e8;
width: 100%;
min-height:100%;
min-width: 1200px;
margin: 0;
padding: 0;
border: solid black 5px;
}
This here is the trouble maker:
.content {
position: relative;
width: 1325px;
height: 300px;
overflow: hidden;
top: 45px;
left: 7%;
border: solid black 2px;}
You can use margin-top: 45px; instead of top: 45px;. (Also margin-left: 7%; if you want to stop the overflow there as well.)
If you relatively position an element, it's always doing so after setting the height/width of it's parent. More in this answer.
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly
I have something akin to the following structure:
<html>
<body>
<div>
</div>
</body>
</html>
I want the inner div to occupy the full vertical height of the page except for an 8px margin from top and bottom. I also want this div to be centered horizontally within the body with a minimum margin of 8px from left and right. I do not want the page to scroll and need to avoid using calc() at all costs for browser support-ability.
I have tried:
html, body{
height: 100%;
}
div {
position: absolute;
top: 8px;
bottom: 8px;
}
Which is fine for forcing it to leave an 8px "margin", but centering it horizontally now becomes impossible without using a calc() since its width is variable and there are no elements for it to be relative to.
I hope I understand your question right... you want the div to fill the whole window, except for 8px... Is that right?
You can do that using this CSS:
div {
background: lightblue;
position: absolute;
top: 8px;
left: 8px;
bottom: 8px;
right: 8px;
}
Check the demo.
[OPTION 2]
If you want the div to have a fixed width (or semi-fixed with max-width or min-width) you can use this code:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
padding: 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: lightblue;
width: 300px;
margin: 0 auto;
height: 100%;
}
It says the body to be 100% height and width and calculate the padding within it's width (therefor the box-sizing) property. Then you can specify the width on the div, and center it by using margin: 0 auto.
Check the updated demo.
div{
display: block;
margin-left: auto;
margin-right: auto;
}
centered div
UPDATE: remove position: absolute;
FIDDLE
You can use margin:
div {
margin: 0 auto;
}
I think it's best to introduce a new div:
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
Then in your CSS you could do this:
.container {
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
right: 0;
}
.center {
margin: 0 auto;
}
http://jsfiddle.net/5X79H/1/
following code will center your div:
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
style:
.center {
margin-left: auto;
margin-right: auto;
display: inline-block;
background-color:maroon;
width:100px;
height: 100px;
}
.container{
width:100%;
text-align: center;
}
I have a div that I'm trying to position by percent in order for it to stay in place (it kind of floats around not centered on an empty part of the page), while still making it accessible and look good across different screen sizes and not really off to one side.
The problem is that, while I can use left: x% to adjust it accordingly, trying to use top does not do anything unless I'm specifying pixels, not percent. If I try to alter bottom in any way, it latches the div I'm trying to position to up near my header, and altering bottom with px makes it go up the screen from the header area.
Absolutely positioning the content_wrapper actually makes the top attribute work just fine, but it pushes a bunch of space below my footer and adds a scrollbar, pretty much ruining the design beyond the footer.
Here's the HTML:
<body>
<div id="container">
<div id="content_wrapper">
<div id="header">
</div>
<div id="content">
<div class="marquee">
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
</div>
</div>
</body>
And here is the CSS:
html, body {
height: 100%;
}
#content {
height: 100%;
position: relative;
width: 100%;
float: left;
}
body {
margin: 0;
padding: 0;
color: #FFF;
/* background: image.jpg; */
background-size: cover;
}
.marquee {
position: absolute;
height: auto;
padding: 10px 5px;
background-color: #F8F8F8;
width: 30em;
left: 15%;
}
#footer_wrapper {
width: 100%;
height: 43px;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -43px 0px;
}
#content_wrapper {
width: 100%;
margin: 0px 0px -41px 0px;
padding-top: 40px;
height: 100%;
}
#footer {
position: relative;
z-index: 10;
height: 4em;
margin-top: -4.07em;
background-color: #FFF;
clear: both;
background-color: #2A64A7;
border-top: 2px solid #F8F8F8;
}
(There is a float or two in there, like in #content, not necessary to the layout, but which are attempts to fix the issue.)
Any help in this matter would be hugely appreciated. Sorry about all the code, but I feel like the footer bits are necessary simply because of the aforementioned issue with scrolling.
Take out the
height: auto !important;
in #container.
That lets you use % for top or bottom.
I am trying to achieve following with my code: I would like to have a div container, div#title-box, that is centered. Inside that div container I want to have 3 other div containers, div#logo, div#title, div#subtitle (look at the code to see how exactly they are displayed)
Now the actual problem: The div#logo has a given width, the other two however don't, they float.
How can I have have the div#title-box wrap around the other three divs but at the same time staying centered. Another problem I see is that the div#title-box cannot have a fixed width.
Any ideas. Thanks!
EDIT: The code below has to be modified so that the div#title-box wraps around the other divs and stays centered.
If anyone needs to play around with the code, here is it with a full example:
<!DOCTYPE html>
<html>
<head>
<style>
div#title-box {
max-width: 500px;
display: block;
height: 600px;
margin: 0 auto;
position: relative;
}
div#logo {
padding: 0;
margin: 0;
position: absolute;
top: 100px;
left: 5px;
width: 100px;
height: 100px;
overflow: auto;
background: #ff0000 no-repeat;
background-size: 100% 100%;
border-radius: 15px;
float: left;
}
div#title {
padding: 0;
margin: 0;
position: absolute;
left: 110px;
top: 100px;
bottom: 20px;
right: 10px;
overflow: auto;
float: left;
}
div#subtitle {
padding: 0;
margin: 0;
position: absolute;
top: 140px;
bottom: 20px;
right: 10px;
left: 110px;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div id="title-box">
<div id="logo">
</div>
<div id="title">
<h1>Hello</h1>
</div>
<div id="subtitle">
<h3>A A A A A A A A A A A A A A A!</h3>
</div>
</div>
try something along the lines of
div#title-box {
width: 500px;
display: inline-block;
height: 600px;
margin: 0 25%;
position: relative;
left:-250px;
}
When you apply
position: absolute
to your code, it will be put out of the rest of the DOM-context.
I have modified your CSS as such: http://jsfiddle.net/asBmS/. Your wrapping div now should always contain the child divs. Is this what you wanted?
The best thing I can think to suggest is more of a 'hack' which would need to be adjusted if you change the width of the content.
Take a look at this link and see the offset margin-left, it puts everything in the center.
You'll probably need to tweak it further to meet your needs.
http://jsfiddle.net/asBmS/15/
#logo,#title,#subtitle{
/*offset hack*/
margin-left: 10% !important;
}