I am coding, and trying to center my div horizontally in the middle of the page. It's just a plain div, with nothing inside of it right now. My code is this:
#wrapper{
width:500px;
height:100%;
position:fixed;
background-color:#fff;
}
Basically, I just want a 500px width white rectangle centered in the page horizontally, that takes up 100% of the page's height.
Thanks.
you can assign left:50% and after margin-left (width-of-div / 2), in this way you can center div in fixed/absolute position
try this:
#wrapper{
width:500px;
height:100%;
position:fixed;
background-color:#fff;
left:50%;
margin-left:-250px;
}
DEMO
You need to use left 50% and add a margin of negative half the width
#wrapper{
width:500px;
height:100%;
left: 50%;
margin-left: -250px;
position:fixed;
background-color:#fff;
}
If you are using this div as a container for a webpage I would recommend taking out position fixed and using margin: 0 auto; to center the div
Related
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed 4 years ago.
I am trying to make a scrollable div box, and it's height should be exact fit to screen's height(100%).
The problem is if there is a another div box on the top which is the fixed height, how do I make scrollable box to fit to the screen's height?
This is what I tried
<div class="wrap">
<div class="top">
Fixed height 100px. No floating or layered box
</div>
<div class="scrollBox">
Fluid height to screen height 100%
<br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
</div>
</div>
html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue }
.top { height:100px; background:green}
.scrollBox { width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }
This is my demo here
http://jsfiddle.net/a5ktensk/77/
Please help
You can use the vh unit to achieve this.
So
.scrollBox {height: 100vh; }
vh means viewheight, so will be the current height shown, you can take a little away using the calc feature in CSS
.scrollBox {height: calc(100vh - 100px);
So that will be 100% of the hieght minus 100px for example if you want a fixed div at the top :)
http://jsfiddle.net/g7d2k59m/1/
I think there calc() function will be handy, try following way:
.scrollBox {
width:80%;
height:calc(100% - 100px); /* Key Line */
margin:0 auto 0 auto;
border:1px solid #000;
overflow-y:auto; background:#eee;
}
Apply height: 100vh; overflow: hidden; to .wrap.
Height in vh will force page to use full height as per viewport.
Viewport Height (vh) – A percentage of the full viewport height. 10vh
will resolve to 10% of the current viewport height.
Overflow:hidden will stop .wrap from scrolling.
html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue;height: 100vh;overflow: hidden; }
.top { height:100px; background:green}
.scrollBox { width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }
<div class="wrap">
<div class="top">
Fixed height 100px. No floating or layered box
</div>
<div class="scrollBox">
Fluid height to screen height 100%
<br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
</div>
</div>
To know more about viewport units -
https://css-tricks.com/fun-viewport-units/
https://www.w3schools.com/cssref/css_units.asp
Hope this helps :)
I have a div that will show a picture in a bigger size.
So I want this div to be in the center of the screen. but margin 0 auto is not working...
CSS:
.form_postloader{
max-width: 1100px;
min-height: 400px;
background: #ffffff;
color: #000;
position:absolute;
margin:0 auto;
display:block;
}
http://jsfiddle.net/t5t031zj/
thank you!
it's not working because it's absolute positioned. You could remove the position absolute, or, if you need it you can do it like so:
position:absolute;
left: 50%;
transform: translate(-50%);
no need to set width, completely responsive!
http://jsfiddle.net/t5t031zj/2/
Due to position:absolute you need to use left and right to do this.
left:0;
right:0;
width: 400px;
Applying these to your box will center it, the issue is that you need to set a width.
Here is a fiddle: http://jsfiddle.net/t5t031zj/3/
I have a #left, absolute positioned div and 2 other divs on the right side. When I add margin to the #top div on the right side it affects the #left div too. I know there's a margin collapse stuff but is it affects the position:absolute too?
The code is really simple, nothing special, but I can't find the solution.
* {
padding:0;
margin:0;
}
#wrapper {
width:400px;
height:400px;
background:gray;
position:relative;
margin-left:100px;
}
#left {
background:pink;
width:100px;
height:100%;
left:-100px;
top:0;
position:absolute;
}
#right {
background:red;
}
#top {
background:green;
height:26px;
}
<div id="wrapper">
<div id="left">Left</div>
<div id="top">top</div>
<div id="right">Right</div>
</div>
Jsfiddle: http://jsfiddle.net/9thvLfe0/2/
Just add this to #top :
float:right;
width:100%;
JSFiddle
Just give the margin to top and give negative margin same to left.
Well, the problem is that your #wrapper is relative and the #left is absolute.
By inheritance, #top and #right are also relative. So, adding a negative margin to top in these conditions, it's adding it to #wrapper.
You could change #wrapper to position "fixed" but you would have to manually set the margin/padding to #hide-top because as it is, he will be hidden under #wrapper. Unless you set it like that :
#hide-top {
position: relative;
top: 400px;
}
Yet, my solution wasn't to change your CSS but your JQuery. You could just hide #top with the hide() function. See my JSFiddle for example ;).
i am new to html and css and i couldn't figure out how to center align child div inside parent div.This is my code please answer and solve my problem.
CSS
.page {
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window {
float:center;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:auto;
margin-right:auto;
}
* {
padding:0px;
margin:0px;
}
HTML
<div class="page">
<div class="window"><!-- i want to center align this div inside above div -->
</div>
</div>
First of all there is nothing called float:center;, float has only 3 valid values which are none, left and right.
Inorder to center any element you need to define some width first and than use margin: auto; to center it horizontally.
Demo
The other way to center an element is to use text-align: center; on the parent element, but this is a dirty way to do so.
You can also use CSS positioning techniques like nesting a absolute element inside a relative positioned element, and than we center it by using left: 50%; and than we deduct 1/2 of the total width of the element by using margin-left: -100px; (total element width say is 200px). You can also center the element vertically.
The other way to have an element centered vertically as well as horizontally is to use display: table-cell; property along with vertical-align: middle;
Demo
to center horizontally
.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
position:relative;
width:367px;
height:202px;
background-color:#c6c6c6;
margin:auto;
}
To center vertically and horizontally both
.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
position:relative;
top:50%;
left:50%;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:-183px;
margin-top:-101px;
}
Please check here:
.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
width:367px;
height:202px;
background-color:#c6c6c6;
margin:0px auto; /* to align center horizontally*/
}
Try this,
.window
{
width:367px;
height:202px;
background-color:#c6c6c6;
margin: auto 0px; /* For center. Apply same to page class*/
}
This may work.
Your "window" div is CORRECTLY centered within the "page" div.
Your problem is that the page div is not centered within <html></html>.
To achieve this add the following code:
.page
{
...
margin-left:auto;
margin-right:auto;
}
I have two div like:
<div class="outer">
<div class="inner"></div>
</div>
then I give them style like:
.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%;}
.inner{ background:red; position:absolute; margin:0 11px; width:100%; height:80px;}
I want the "inner" in "outer" ,as well the left and right have both 11px space,but it can't be achieve,only the left have the 11px gap,the "inner" seems always have the same length as the father's length
Then I think maybe setting the outer padding with 11px will be work.However ,it still doesn't work……
Why this happened?So how can I solve this problem?Is that possible with the effect?
Here is the only case
The margins will add up to the width which is already stretched to the outer DIV by (width 100%) what you can do is the following - link:
.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%; padding: 0 11px}
.inner{ background:red; height:80px;}
Removing position: absolute; (or changing it to relative) and width: 100%; from .inner will give you exactly what you want. Then, if you really need an element with position: absolute; inside, put it in .inner.
An example