The body of my html page is placed in the middle of the page as shown below:
<body style="margin:0 auto; width:75%">
Now I want to put a strip with a background color to expand along the complete width of the screen, like this.
<body style="margin:0 auto; width:75%">
<div style=" margin-left:0; margin-right:0;width:100%; height:20px; background- color:
#e6e3e3;"></div>
</body>
However, this is not working. The div element does not expand beyond the border specified by body element. how can it be done? Thanks in advance for your help.
Are you trying to achieve something like this?
http://jsfiddle.net/TZ9Y7/
CSS:
html, body {
height: 100%;
}
body{ margin:0 12.5%; border: 2px solid black; }
.div1 {
width: 100%;
height: 30px;
background: #ccc;
}
.div2 {
width: 100%;
height: 30px;
background: red;
position: absolute;
left: 0;
}
unless you want to use javascript to look up the width of the window and programatically set the width of the div, your best option would be to tweak your page structure to something like:
<html>
<body>
<div style="margin:0, width:100%, padding:0"></div>
<div class="content" style="margin:0 auto, width:75%"></div>
</body>
</html>
So that instead of making the whole body element centered, you have a 'content' div that is centered. This will let you place certain elements outside the content div, where they can be the width of the whole window.
Related
i try to create div footer, but have problem.
I have few div blocks located one by one inside container.
Container have 100% height.
Inside Container First Div have 100px height (header).
Second Div (Mainbody) need to have all height up to site bottom (bootom part of screen size) or more.
Third Div have absolute position and located on bottom.
But summary height of Container Div is more than 100% because i see scroll on right part of page.
How to resolve this?
Page with css: height:100% takes more than 100%
html, body {
height: 100%;
margin:0;
padding:0;
background-color: yellow;
}
.container {
position:relative;
min-height:100%;
background-color: green;
}
.header {
background-color: blue;
height: 100px;
}
.mainbody {
background-color: gray;
height: 100px;
}
.footer {
position:absolute;
bottom:0;
width: 100%;
background-color: red;
}
<body>
<div class="container">
<div class="header">
<p>
header
</p>
</div>
<div class="mainbody">
<p>
mainbody
</p>
</div>
<div class="footer">
<p>
footer
</p>
</div>
</div>
</body>
Open with your browser. It doesn't show any scroll bars as shown in this snippet. Set
.container{ height:100%}
rather than
min-height:100%
as it will exceed the page full size.
You might try position:fixed; bottom:0; left:0; right:0; height:somevalue; for the footer element, and for the body element, also add padding-bottom:somevalue(somevalue is the same value for body's padding-bottom and for footer's height)
A dirty solution for your html margins. I've added a margin-top property to your html, body css. Now there is no scrollbar on the right.
It seems like margin: 0; has no effect on margin-top property. I've read online that some browsers tend to set margins by default on certain elements like body. I've given you a really dirty solution that may not work well with responsive design.
html, body {
height: 100%;
margin: 0;
padding: 0;
margin-top: -8px;
background-color: yellow;
}
I've got the following HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body, div, html {
margin: 0;
padding: 0;
}
body {
background: #727272;
}
#div1 {
background: #F00;
height: 50px;
}
#div2 {
background: #F0F;
height: 50px;
width: 1500px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
If I shrink the browser window down to less than 1500px (the width of div2), and then use the browser's horizontal scrollbar to scroll to the right, the width of div1 remains cut off at the width of the browser window, and does not stretch all the way across the screen like div2.
Is there any way to get div1 to always stretch across the screen, regardless of the width of div2?
Please note that in my real code, the width of div2 is always changing, so I cannot just set a fixed width for div1 via CSS.
Thank you.
Try this.
#div1 {
background: #F00;
height: 50px;
width: 100%;
}
In your css try
display: block;
put a wrapper around these two divs...
<div id="div0">
<div id="div1"></div>
<div id="div2"></div>
</div>
Then style the wrapper and divs accordingly
#div0 { display:table; }
#div1 {
display:block;
width: 100%;
background: #F00;
height: 50px; }
#div2 {
display: block;
background: #F0F;
height: 50px;
width: 1500px; }
http://jsfiddle.net/Ls7aj/
Using overflow:hidden on the body, html, #container will do the trick.
Add a width:100%; to #div1 and you're good to go.
http://jsfiddle.net/tCN8H/
Edit: Changed #Content to #container
I've a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.
I would like to have a html/css layout, which has a div#header and div#body as direct children of body tag. I want div#body to fill the remaining space and I do not want to use JavaScript. I know it is possible if you know the exact height of the div#header. But i do not want to fix that.
example with fixed div#header
<head>
<style>
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
width: 100%;
}
#header {
position: relative;
<!-- i want to remove height because i want the header to size itself
dependent on it's content -->
height: 100px;
background-color: red;
}
#body {
<!-- I want to make the body position relative and set top to 0
but that does not work as expected.-->
position: absolute;
top: 100px;
margin: 0;
bottom: 0;
background-color: green;
height: auto;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="body">body</div>
</body>
Please let me know if there is any alternative which uses divs and css.
Many thanks in advance!
You can set the min-height of the body div to 100% to stretch out the body div (I've changed the body bg color to make it more obvious).
However, I'm not 100% clear on your second requirement (<!-- I want to make the body position relative and set top to 0 but that does not work as expected.-->)
Fiddle here
Here is the updated answer: what i have done is to make the parent html and body to display as a table and other divs to have properties of table row and this css will make them capture the whole screen area.
Now i have given the header height of auto.
and
#body is inheriting the other space.
Try this: http://jsbin.com/ezozeb/5/edit
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display:table;
}
#header {
background-color: red;
display:table-row;
height:auto;
}
#body {
background-color: green;
display:table-row;
height:inherit;
}
First of all, delete the height and width of the body element.
You can use page wrappers to make that happen:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#PageContentWrapper
{
width: 659px;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}
The pagecontentwrapper sets the minimum height to 500px.
In html you can then assign these identifiers to the body and divs
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
If you want to make a div scrollable, you should define a height and/or width and add this to the css:
overflow-x:auto; <!--horizontal-->
overflow-y:auto; <!--vertical-->
For example, if you set the pagewrappers height to 1000 (not the min-heigt) and overflow-y: auto; then the scrollbars will appear when content get out of bounds.
If you want to make the header always on top, you should apply something like this:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#Header
{
background-color:#aaaaaa;
width: 844px;
height: 240px;
}
#PageContentWrapper
{
width: 659px;
height: 700px;
overflow-y: auto;
float: left;
background-color: #e1e1e1;
padding: 10px;
}
and in html
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id=Header>
Headertext
</div>
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo