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.
Related
The site structure is as follows - there is a common unit (content), which houses all of the elements of the site and the second unit, a footer which is to be pressed against the bottom of the site.
Content block is position: absolute for aligning the center (horizontal) - to decrease the screen when it is uniformly left for right and left its borders. The problem is that with such a block structure the footer doesn't stay pressed against the bottom of the page. Here's the code :
body {
margin: 0px;
padding: 0px;
}
.a_wrapper {
width: 600px;
left: 50%;
margin-left: -300px;
position: absolute;
border: 1px dotted #000000;
}
.a {
height: 800px;
}
.b {
width: 90%;
height: 50px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: absolute;
border: 1px solid #000000;
}
<div class = "a_wrapper">
<div class = "a"></div>
</div>
<div class = "b">
</div>
https://jsfiddle.net/0k979ud5/
There are two things causing this - because of using only absolutely positioned elements, which takes them out of document flow, the body element itself has no height. So that would need to be set the same as the content. Then the footer is positioned according to the nearest positioned element, also because of position: absolute. It's direct parent is body which has no positioning so it will default to the window object. To solve this, body should be given position: relative :
body {
height: 800px;
position: relative;
padding: 0px;
margin: 0px;
}
.a_wrapper {
width: 600px;
left: 50%;
margin-left: -300px;
position: absolute;
border: 1px dotted #000000;
}
.a {
height: 800px;
}
.b {
width: 90%;
height: 50px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: absolute;
border: 1px solid #000000;
}
<div class="a_wrapper">
<div class="a"></div>
</div>
<div class="b"></div>
It the footer should be below the content, body would have to be 850 pixels high of course...
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I have the following:
HTML
<body>
<div id="header"></div>
<div id="logo"></div>
<div id="container">
<h1>Welcome message</h1>
text text text text text text text text text text text text text text
</div>
</body>
CSS
html{
background-color: #000000;
color: white;
}
html,body, img{
margin: 0;
padding: 0;
border: 0;
}
#header{
position: absolute;
left: 0;
top: 0;
background-color: yellow;
width: 100%;
height: 537px;
z-index: -1;
}
div#logo{
width: 385px;
height: 141px;
background: white;
margin-left: auto;
margin-right: auto;
}
#container{
width: 964px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
height: 100%;
background-color: #000000;
padding-left: 6px;
padding-right: 6px;
}
I want div#container to stretch all over to the bottom, but it doesn't.
You have to stretch body and html too:
html, body {
height:100%;
}
Take a look at this Fiddle.
In order for elements to reach 100% height they need to have a position applied to it.
So
#container{
position: relative;
height: 100%;
}
Depending on the parents positioning of this element will determine its height.
If this elements parent has a positioning applied to it, it will become 100% height of its parents. If non of its parents have positioning it will be use body and display across the entire page.
html, body {
height:100%;
}
As it spans throughout the entire page then height wise.
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}
I have a wrapper div which is positioned absolute. Is it possible to extend the height of the wrapper div to accommodate the content and show the background color. Below the code I used:
CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}
body {
font-family: Arial,sans-serif;
font-size: 2em;
line-height: 1.5em;
}
#contentbody {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
background-color: Green;
}
HTML
<div id="contentbody">
<div id="content">
<div style="height: 1500px;">some large content</div>
</div>
</div>
I don't think you should set bottom in #contentbody. By setting both top and bottom you are forcing the height of the div to be the height of the browser view-port minus 10 (top + bottom).
Add the overflow:hidden to your html,body selector and and overflow:auto to your #contentbody div:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
overflow:hidden; /* overflow is hidden */
}
body {
font-family: Arial,sans-serif;
font-size: 2em;
line-height: 1.5em;
}
#contentbody {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
background-color: Green;
overflow: auto; /* overflow is auto to allow scrolling */
}
try using style = "overflow: scroll" on your DIV
EDITED: to remoe overflow: auto