How do I center a div in a browser so it stays centered even when I make the browser width smaller than the div width?
I am currently using this:
BODY
{
text-align: center;
}
#wrapper
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
But the left side of my browser blocks the div when I resize.
There is a dirty workaround for doing this:
#wrapper {
width: 1000px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -500px; /* width divided by 2 */
}
You may need to apply overflow: hidden to a parent element to prevent scrollbars.
Related
The main content div #page-content-wrapper is shaded a light grey in color.
How can the height of this div be extended such that the bottom of this div is at the bottom of the screen? height: 100%; does not seem to work.
Content is growable to beyond 1 viewport height, forcing vertical scroll to be necessary.
CSS
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
background: #ddd;
height: 100%;
}
Bootply: http://www.bootply.com/kkrDITPGrO
Use height: 100vh ... or give #wrapper and html, body also height: 100%
For an element to respond to a height using percent, its parent need a height, and if the parent also use percent, you need to go all the way to the html/body element for it to be able to calculate its height on something other than auto.
Updated bootply
Update based on comment
For content to be able to grow, use min-height: 100vh ... or min-height: 100% using the same "percent" principle as above
#page-content-wrapper {
min-height: 100vh;
width: 100%;
position: absolute;
padding: 15px;
background: #ddd;
}
Updated booply
I have a square image that I want to have centered on the screen. Problem is that I want the image to stay a square, while being not more than 80% of both the width and the height. I have used the following code, which makes my image 80% of the height (when height < width), and centers the image vertically, but not horizontally of course. When using a fixed width, I could have used margin-left: 50%; margin-right: 50%, but with relative size, this would set the left side of the image at 50%. Any ideas?
.my_img{
max-width: 80%;
max-height: 80%;
margin-left: 10%;
margin-top: 10%;
}
Try this:
.my_img_container {
position: relative;
}
.my_img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
Here is a fiddle:
http://jsfiddle.net/l0wskilled/voubtxrt/
if your image has display: block then you can probably use margin: auto auto and remove the % margins. If its display is inline or inline-block, you can use text-align: center on the parent element of the image to make it horizontally centered. I have not tested this code. If this doesn't work, and you have no problem with jQuery, this can be done with few lines of jQuery.
You could also try:
<div class="container">
<img src="https://www.webkit.org/blog-files/acid3-100.png" class="my_img" />
</div>
With the style:
.my_img {
max-width: 80%;
max-height: 80%;
margin-left: auto;
margin-right: auto;
display: block;
}
I think this is what you are wanting anyway, maybe i'm wrong!
https://jsfiddle.net/dLozvcmo/2/
Height was not respected on this fiddle
I want the image to have a height and width of 80% relative to its parent, vertically and horizontally aligned. For some reason, it does not work.
HTML:
<div id="menu_header_new_orig">
<img id="menu_logo_orig" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
</div>
CSS:
#menu_header_new_orig {
margin-top: 2.5%;
height:40%;
width:100%;
overflow: hidden;
position: relative;
border: 1px solid green;
text-align: center;
}
#menu_logo_orig {
width: 80%;
height: 80%;
position: relative;
}
I have figured it out here, but just in case somebody have better solution.
If I understand you correct :
The parent #menu_header_new_orig own parent must also have a height (obviously 100%)
html, body {
height: 100%;
}
set display to inline, 10% top to get vertical alignment
#menu_logo_orig {
top: 10%;
display: inline;
position: relative;
width: 80%;
height: 80%;
}
Is that what you were heading for? [not really sure] - try to set #menu_header_new_orig height to other things than 40% to get it in another perspective.
forked fiddle -> http://jsfiddle.net/Dmc7j/
I will like to get help please with building a responsive design.
The thing is that I don't know how to position elements as absolute but keep the same distance from top proportions between them.
Here's a link to an example where you can resize the window width and see that the two elements are moving away from each other instead of always keep the same space between them from top.
So what I'm looking for is to kind of faking scaling of the whole thing so it will only get smaller/larger but look always the same.
How can I make the elements to go up and shrink the space from top when window resize please?
http://jsfiddle.net/QV6DR/
.container {
width: 100%;
height: 1000px;
position: relative;
background: #eee;
}
.container div {
height: 0;
position: absolute;
background: #ccc;
}
.elm1 {
width: 20%;
padding-bottom: 20%;
top: 20%;
left: 5%;
}
.elm2 {
width: 30%;
padding-bottom: 30%;
top: 40%;
right: 10%;
}
Because your container has a height of 1000px and your elements are positioned 20% relative to the top of the container(which is always 200px), they wouldn't be able to shift up when the browser window is resized.
If you change the container styles to the following:
.container {
width: 100%;
height: 100%;
position: absolute;
background: #eee;
}
The elements will shift up when your browser window is resized vertically.
I believe the only way to shift them up vertically without resizing the window vertically, would be by using media queries and modifying the top: 40%; styles on your elements.
Here's the fiddle without media queries.
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.