JSFiddle available here.
I am writing an HTML page with nothing else in its body than a simple div.
Without CSS, the div has 100% of window width and about 20% of window height (actually max body height), and is stuck to the window borders. I want it to be centered horizontally and a bit detached vertically, so I applied 100% width and 100% height to html and body tags, and I also applied auto left and right margins to the actual div, + 125px top margin.
html, body {
width: 100%;
height: 100%;
}
#div {
margin-left: auto;
margin-right: auto;
margin-top: 125px;
}
The problem now is that the page can be scrolled. When highlighting the borders of the elements in the page, you can see that the body element has moved with the div 125px downwards, thus allowing a 125px scrolling. The div is still stuck to the top border of the body, but 125px away from the top border of the window.
To fix the problem, I had to add position: fixed; to the body rules. Then, the body was stuck to the window borders, and the div was 125px away from the top border of the body.
But still, why do positionning a div inside of the body also repositions the whole body ?
EDIT: The div id is #prompt in the provided JSFiddle.
2ND EDIT: The original question actually was :
Why do I get this instead of getting this ? (links are pictures)
WHY is the BODY block actually MOVED by a DIV CSS rule ?
The answer maybe that I'm using Bootstrap and it doesn't like that I override rules for html and body tags.
See the marked answer just below.
TL;DR, you may use !important declarations in CSS to properly override body and html rules.
Your current styling creates a height of 100% for the html tag + 125px for the margin, which creates an vertical scroll overflow. This is because you set your html tag css to height: 100%;, once removing that line from your css, the positioning of the div no longer affects the scrolling of the page, which is what you want.
http://jsfiddle.net/dmaymo3m/1/
Edited Answer:
I added a bootstrap container and some CSS to the html and body elements and this seemed to work.
Fiddle here: http://jsfiddle.net/tzhben/byye4eop/1/
CSS:
body {
background-color: #EDF;
}
html, body {
height: 100% !important;
}
HTML:
<body>
<div class="container">
<div id="prompt">
<p class="well">Please login to continue.</p>
<form action="index.php" method="post">
<div id="pwd-box" class="input-group">
<input type="text" class="form-control" placeholder="Password">
</div>
</form>
</div>
</div><!-- /.container -->
</body>
Hope this helps!
Related
Just like www.stackoverflow.com for example, only uses the centre of the page while retaining the header at the top.
See my layout so far - it uses the whole screen whether its resized or maximised.
So basically I want to retain the header at all window sizes, but use only the centre of the page for the other 3 divs.
First thing you need is some wrapping element that "contains" the entire website. For example...
HTML
<body>
<div class="wrapper">
<!-- REST OF SITE HERE (OR ANYTHING YOU WANT CENTERED -->
</div><!-- END WRAPPER -->
</body>
Then some simple CSS... The wrapper element MUST have some width that you define, and a specific margin code. If the site is responsive, you want a dynamic width, with an additional max-width. In the code below, it is the margin: 0 auto; that actually does the centering. It's important to note the width however. If you have 100% width, without a max-width also declared, then the "centering" isn't noticeable as the div takes up 100% of the width of whatever element contains it.
CSS
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
If you don't want the entire website to be centered, simply change your HTML a little bit, and maybe your class name so that it makes more sense in the context that it is being used... For example, if you want just the content area to be centered...
HTML
<body>
<header></header>
<div class="content-wrapper">
<!-- ALL OF YOUR CONTENT HTML HERE -->
</div><!-- END CONTENT WRAPPER -->
<footer></footer>
</body>
CSS
.content-wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
It's always a good practise to wrap your container in any kid of wrapper (say div) and then asssign css margin: 0 auto; so that it centrally alligns to the screen.
Eg:
<div class="wrapper">
All the stuff in here
</div>
.wrapper{
margin: 0 auto;
// Along with other reset style sheets
}
I suggest you to use calc() in css. Differently from other solutions proposed by others, with the following code:
.wrapper
{
width:calc(100% - 50px);
margin:0 auto;
}
you can have wrapper div always centered and primarily flidly adaptable to Browser window width, leaving always the same amount of px to both margins. So if you change window width, it will be only the width of Wrapper that will change and not it's margins from sides.
UPDATE:
For IE8 retro-compatibility, there are some js polyfills, like:
Calc-Polyfill
Polycalc
Set width of the header to 100% and the width of the container to e.g. 80% with margin:0 auto;
Here is a fiddle
Also, it's a good thing to set margin and padding of the html and body to zero to get rid of the whitespace around your page
You can do a bad trick (but easy) with two divs (the second one inside the first one). The first one will have margin-left 50% and, only if you know the widht px of your page, the second div will have margin-left: -ZZZpx, being ZZZ the half of your width size.
I was wondering how I can center this http://prntscr.com/hv2q7 It is hanging off and I want it to be centered like this http://prntscr.com/hv2ue so that the gray part is coming into the border. Here is the css code and html for it :
The css:
#banner{
height: 279px;
width: 998px;
margin-right: 0px;
margin-left: 0px;
background-image:
url(/template/default/images/layout/background/newlayout/test.png);
}
The html :
<div id="banner" ></div>
You want to set your left and right margins to auto, not 0px.
Try this, it's the shorthand for setting your top/bottom margin to 0 and your left/right to auto:
#banner {
margin:0 auto;
}
Centering with css normally revolves around the use of margin:auto;
In this case you're looking at left and right margins being auto, so something like margin:0 auto; As you try it out for your full page specifically you may find you have to set the elements' display to block or the float or even a position, depending on the browser. Though those are usually not necessary.
Also, if the div really only contains the background image, you might set the background-repeat to none and the background-position to center. That would only center in the div, so if the div is actually showing as the width and height of the image, it wouldn't change anything, but if the div is filling the width of it's containing block, then you'd get left and right centering.
put this arround your banner code:
<div align="center"> "your banner code" </div>
http://featuredfotografer.com/
The .Codemirror div in combination with the #header div takes up more height than the height of the browser. How can I make them have a combined height of 100% of the browser window so I have no scrollbar?
making combined height equal to the height of the browser window
Just add this snippet of code. It will set your content to 100% of browser window.
body,html {
height: 100%;
}
Also you can check this.
I would take a different approach to this. You can make a small 1px high and 30px wide image that looks like the background behind the line numbers and apply it to the body with a repeat-y and aligned left. Remove the height:100% on the .CodeMirror div
Alternately you can
add <div class="CodeMirror-gutter bodyGutter"></div> just before your closing </body> tag and add this to your CSS, and also again remove the height:100% on the .CodeMirror div:
.bodyGutter {
height: 100%;
z-index: -1;
width: 20px;
left: -8px;
}
This is also adding a fake gutter to your body and pushing it to the background to give the fake appearance of 100% height.
I know how to make a div expand to fill the whole page. My problem is that i want to leave a thin band at the top and a thin band at the bottom. The bands can be y amount of pixels. I then want the div in the middle to expand to fill the remaining area.
Everytime I try this it ends up expanding past the bottom of the page. And the only reason I can work out is that the parent DIV is setup to 100% of the height so it is getting its number from that. I have tried using margins and paddings but that is not helping. It still uses 100% of the parent height.
I'm guessing you want something like (this)
A quick breakdown:
HTML:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto; padding-bottom: 150px;}
#footer {position: relative; margin-top: -150px; height: 150px; clear:both;}
This will leave a 150px high "footer" at the bottom of the wrapper div, that will stick to the bottom of the viewport
Oh, and you'll need to add margin & padding = 0 to the body or else you'll see some nasty scrollbars :(
here is the live link: http://mrgsp.md:8080/a/Account/SignIn
the main div (green one) doesn't take 100% of the screen height
you will notice this only if you have a big screen
and the code is basically
<body>
<div class="loginpage">
<div id="loginbox">stuff inside loginbox</div>
</div>
</body>
.loginpage {
background:none repeat scroll 0 0 green;
padding:200px;
}
Sorry for my English...
put the background style in body... is better.
body{
background: green;
}
If you still want to put a height for the div, you must put 100% height for the div, for the body, and for HTML too.
html, body, .loginpage{
height: 100% ;
}
You could give the body the green background color?
You can't simply set a div height to 100%, because it will interpret that as 100% of its container.
The simplest solution to your problem is to set the background color on the body element, but alternatively, you can use your method by setting the body tag to have a height of 100%. This will give your div something to fill fully. If the body or whatever container of the div doesn't have a height set, then the browser defaults the css property of the div to height: auto.