I am working on a graphically intense layout, so to keep file size down I am limiting the layout to a 1600 pixel fixed width.
Of the 1600 pixels, the important content falls within the center 1230.
I am trying to find a way to center the layout in the browser while keeping the content scrollable.
This solution does not center when the browser window is less than 1600px
#page{margin: 0 auto;}
This solution makes left hand side of content unreachable as the browser width gets smaller.
#page{position: absolute; width: 1600px; top: 0; left: 50%; margin-left: -800px; }
Thanks for any help.
If you want to center an element in a wrapper that is smaller than the element and you can use absolute:
#page{
position: absolute;
width: 1600px;
top: 0;
left:-100%;
right:-100%;
margin-left: auto;
margin-right: auto;
}
example:http://jsfiddle.net/pavloschris/T5d8W/
I'm not sure you need to limit width in pixels. It isn't very portable across devices, and it's not clear why you're doing it. However, if you want to center a 1230px region within 1600px, you can just use fixed-width margins of size (1600-1230) / 2.
For more flexible solutions, are flex-boxes an acceptable technology? If so, they make this task trivial. Make page container with:
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
Then make your items
flex: 0 0 auto
or set a specific width instead of auto.
This solution solves the inaccessible content issues.
If you have the following structure
#wrap.constrained > #layout > #content.constrained
You can use the constrained class to limit both #wrap and #content to the desired width and center both horizontally by setting side margins to "auto".
You could then position #layout absolutely, have it be bigger than .constrained, and use a combination of left positioning and negative left margin to center it in regards to #wrap.
Here's an example: http://jsfiddle.net/caKA7/
Related
When a design is fluid (there is no fixed width), how can wrapper div using margin:0 auto; be centered?
#wrapper {
max-width: 1000px;
min-width: 767px;
margin: 0 auto;
}
The max-width:1000px; means: make a container that has a maximum with of 1000px. If the page is larger (as an users uses a wider window) it'll fill the other part with white space.
The min-width:767px will then set the minimum. So if the users has a smaller window then 1000px then the container doesn't fit. So it'll decrease it's size automatically to a minimum of (in this case) 767px. If the users still has a smaller window, then a scrollbar will appear. The container will be set to 767px.
If an user is loading the page in between the max-width and min-width, then it'll take the maximum width available. Please see the "To be more precise an example per case" section below for more information about this topic.
As you're using margin:0 auto; on this #wrapper. The #wrapper will be centered with no margin on top of bottom. So instead of the whitespace on the right side which will be set on default, now the white space will be shared on both: left and right side of the container.
I made an example with a lower width then your question in the example below to show that it'll become centered. This is all because of the combination of: max-width which is smaller then the window-size of the user (box below) and the margin: 0 auto; which will try to center the div when possible.
#wrapper {
max-width: 200px;
min-width: 100px;
margin: 0 auto;
height:50px; /* added this as example */
background:red; /* add this as example */
}
<div id="wrapper"></div>
To be more precise an example per case:
Note (pre-condition): The cases below are when the div is as main-element in the page. So no other elements that have effect on the #wrapper-element. Just like the code examples in this post.
User has a browser that has a size of 1100px width: The #wrapper will have a width of 1000px and there will be 50px of whitepace left and 50px of whitespace right. (see the above code example).
User uses a browser that has a size of: 920px width: The #wrapper will have width of 920px; and there will be no whitespace on the left and right side.
User uses a browser that has a size of: 600px width: The #wrapper will have width of 767px; and there will be no whitespace on the left and right side. Beside that the user will have a scrollbar on the bottom of it's page to be able to see the complete #wrapper. See the code example below for the scrollbar:
#wrapper {
max-width: 5000px;
min-width: 1000px;
margin: 0 auto;
height:50px; /* added this as example */
background:red; /* add this as example */
}
<div id="wrapper"></div>
You can try this:-
#wrapper {
display: block;
max-width: 1000px;
min-width: 767px;
margin: 0 auto;
}
You can use Flexbox.
Set the following properties on the parent element of the element you want to center
display: flex;
justify-content: center; // for horizontally center
align-items: center; // for vertically center
Ok so I am making my first iOS HTML5 app and it is just a simple quote app. I need to figure out how to make my container div be the full height of the iphone. Here is a jsfiddle of my design - http://jsfiddle.net/gKaDL/1/
.container {
width: 640px;
min-height: 100%;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
}
Because a lot of the quotes are short the container div will not reach the iPhone 4 screen height of 960px let alone the iPhone 5's 1136px height. The container div must be the size of the screen or larger as there is a background image on it that must fill the screen.
Thanks.
You have either the CSS unit vh that is in centieth of viewport height. In which case you would write:
height: 100vh;
Or you can force the div to stick to top and bottom of the closest positioned parent (so give position:relative or position: absolute to a parent that has the appropriate height):
position: absolute;
top: 0;
bottom: 0;
tell me if you need more details
div{
margin:0px auto;
width:100%;
height:100%;
}
I'm building this 15 page website so I really want to make my main container ( the light grey one ) be flexible in height.
When I select specific pixel height on my home page ( the only page so far ) everything is great but when I change it to 100% height, my container completely disappears. Is there anything I should do differently?
My link:
http://dariawdesign.com/acupuncture/StamfordAcupunctureHome.html
CSS for the container:
#maincontainer {
width: 1110px;
height: 3900px;
background-color: #E6E7E8;
margin-left: auto;
margin-right: auto;
margin-top: -16px;
}
Don't set your height to a pixel value, let it be auto. Then add overflow: hidden to your #maincontainer styles to expand the container to fit its floated children.
I have a fixed footer of 970px width, but when I resize my browser smaller the whole footer keeps going off screen with the center of the footer in the middle. I want my footer to stop going off screen when resizing the browser smaller than 970px width.
CSS
footer{
z-index: 1;
position: fixed;
width: 940px;
line-height: 30px;
background: linear-gradient(#232323, #1f1f1f);
margin: 0 auto 0 -485px;
padding: 0 30px;
bottom: 0;
left: 50%;
text-align: center;
}
HTML
<footer>Footer Text</footer>
Anybody know how I could achieve that?
You have a negative left margin of -485px and a left position of 50%. I would just use
footer {
margin: 0 auto;
}
and remove the left position altogether.
Its hard to say without any HTML, but from what I can guess you have two options:
You want to stop the footer being bigger than the browser if the browser is < 940px, if that is so why not set it to have width:100% and max-width:940px;. You may also want overflow:hidden;,
Your footer isnt centering properly, in that case wrap it within a div with width:100% (or calculated to be as wide as your page) with text-align:center; and give the footer (placed within the div) margin:0 auto;
Something like this fiddle
I am trying to create a lead generation page. I want to center all the contents on the page to the center when displayed on any browser size.
i tried using vertical align center. But it seems not to work.
Which are the best practices to do so ?
http://play.mink7.com/h/mspre/
If you just mean centering between left and right edges, you create an element with a fixed width, and declare margin: auto; on it.
If you want to center the element both horizontally and vertically, you position it halfway across the page both horizontally and vertically, then pull it back by half of the element's width and height.
For example:
.someElement {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
For me the best way to do it is to make a container div of set width. I normally choose about 900px as pretty much all displays are wider than this now a days. I then centre div by using margin auto.
#container { width: 900px;
margin: 0px auto 0px auto;
}
This will centre the div. Bob's your uncle.
If you want I can post examples of this.
Mike
Here you go:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html