OK. Here's the deal. I've read quite a few articles on this site and others about vertical centering but they all seem to refer to centering a single div and I haven't been able to apply it correctly to a more complex layout. I'm working on a site which has a header, navigation bar, content area, sidebar, and footer. A mockup of the design can be seen here: mockup
I've got all the divs fitting together nicely thanks to the use of the 0px text trick in the container div and the content & sidebar sit next to each other using display:inline-block. the header, navbar, and footer are horizontally centered using margin-left:auto & margin-right:auto. together this nicely renders the whole site horizontally centered but I can't figure out how to apply vertical centering to the whole site without breaking the design. This is not a fluid layout, all divs have fixed pixel sizes that the content fits into very nicely. It seems that there should be some way to use absolute or relative positioning and percentages to center everything vertically but I can't figure out how to do it. The code for the mockup is attached. Thanks!
<style type="text/css">
<!--
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
#header {
width:650px;
height:87px;
z-index:1;
background-color:#C90;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
font-size:12px;
}
#navbar {
width:650px;
height:32px;
z-index:2;
background-color:#0FF;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
#content {
width:500px;
height:265px;
z-index:3;
background-color:#33F;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#sidebar {
width:150px;
height:265px;
z-index:4;
background-color:#999;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#footer {
width:650px;
height:58px;
z-index:5;
background-color:#F69;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
-->
</style>
</head>
<body>
<div class="container">
<div id="header">Header</div>
<div id="navbar">Navbar</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div></div>
</body>
</html>
You need to put a container around the whole part that you want vertically centered, and you need to know the height. Then you give it an absolute position that is 50% from the top and give it a margin-top of minus half the height.
So if your container is 400px high you would use the following css:
#container {
position: absolute;
top: 50%;
margin-top: -200px;
}
In your case your 'container' is 442px high, so change this css:
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
To this:
DIV.container {
position:absolute;
top:50%;
margin-top:-221px;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
Your stylesheet can be much cleaner/smaller.
See this demo fiddle.
And if you don't want a scroll bar when the browser window becomes small, then add overflow: hidden to the body, see this fiddle. But that's NOT a tip in the light of usability.
And to make it dynamic, use Javascript/jQuery to find the height of the window, and adjust DIV.container's margin-top as shown by Kokos.
Related
I'm currently playing around with HTML and using position to align my div content.
At the moment, I have 3 divs. 2 divs using position:fixed and the other using position:relative.
My two fixed divs span the width of the page at 100% and are aligned at the top of the webpage. Like a top bar.
My third div is placed underneath the top bar with position:relative. The problem i'm having is that the third div is not being positioned underneath the two fixed divs (see picture)
Here is my code:
.topbar-container {
position:fixed;
width:100%;
height:72px;
background-color:#ffffff;
border-bottom:1px solid #e0e0e0;
z-index:2;
top:0;
}
.topbar {
position:fixed;
width:1200px;
height:72px;
left:50%;
margin-left:-600px;
top:0;
}
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
}
My HTML:
<div class="topbar-container">
<div class="topbar">
</div>
</div>
<div class="body-container">
</div>
As you can tell by the picture, the div with the red border is being pushed up to the top of the page, where i thought by using position:relative would have fixed the problem.
Could someone please take a look for me?
Thanks in advance
http://www.dumpt.com/img/viewer.php?file=d96p2ywgzqs5bmnkac7q.png
Setting position: fixed or position: absolute will remove the element from the page flow. You now need to explicitly set the top property for .body-container to make it appear under the .topbar-container:
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
top: 72px; /* must be >= the height of .topbar-container */
}
I can't seem to centre align my div(title) which sits inside another div.
HTML
<div class="wrapper">
<div id="header">
<div class="title">Home</div>
</div>
</div>
CSS
#header {
position:relative;
width:1200px;
height:400px;
margin:auto;
border:1px solid red;
}
.title {
position:absolute;
width:1000px;
height:140px;
background-color:red;
margin:auto;
}
Remove position: absolute and it works perfectly.
Position: absolute is only necessary when you need very specific placement outside of the normal document flow. In this case, nothing special is needed apart from automatic left and right margins, which you already have.
you are mixing stuff.
Remove position absolute.
or if you want it to be absolute you can do this
.title {
position:absolute;
width:1000px;
height:140px;
left: 50%;
background-color:red;
margin-left:-500px;
}
I am designing a webpage that needs to be split into 4 equal DIVs. This would be easy if I didn't also need to overlap text onto two of these DIVs. So, I have decided the best route would be to stack two container DIVs on top of each other, each with a width of 100% and height of 50%. Then, I would split these into two DIV classes, each with a height of 100% width of 50%, thus giving me 2 DIVs per container DIV, which are 2 in number.
My current CSS:
#collectionsTop {
width: 100%;
height: 50%;
overflow:hidden;
margin: 0 auto;
}
.topRight {
background-color:red;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
.topLeft {
background-color:blue;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
#collectionsBottom {
width: 100%;
height: 50%;
overflow:hidden;
margin: 0 auto;
}
.bottomRight {
background-color:yellow;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
.bottomLeft {
background-color:green;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
And my HTML:
<div id="collectionsTop">
<div class="topRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
<div class="topLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
</div>
<div id="collectionsBottom">
<div class="bottomRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
<div class="bottomLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
</div>
Apparently, none of the above works in any capacity at all, displaying the images in their full resolution, not floated, and in no way limited by their parent DIVs. I have no idea why. Please help.
You have placed - clear:both in the css of topLeft , topRight elements
idea => clear:both; - No floating elements allowed on the left or the right side of a specified element ,
hence in your case also similar thing is happening,
check this fiddle : http://jsfiddle.net/4q4Jz/
update:
now check the fiddle.. demo
remove all the `clear:both;
and try it.
`
Easiest (I hope) to just check it out here: http://jsfiddle.net/UG7un/
There is a fixed wrapper that covers the whole page with a 20px margin. How do I get content to scroll within that wrapper?
<div id="wrap">
<div id="content">
<p>How can I get this to scroll within this white content area only, using the native browser scroll?</p>
</div>
<div id="photo"></div>
</div>
html {
background:url(http://i1210.photobucket.com/albums/cc406/Ingutuks/2012/P5211369.jpg) no-repeat center center fixed;
background-size:cover;
}
#wrap {
background:#fff;
margin:20px;
position:fixed;
overflow:hidden;
}
#content {
width:45%;
padding:2.5%;
float:left;
}
#photo {
width:50%;
background:url(http://i1351.photobucket.com/albums/p790/KrazyKobraRawr/Jojothecat_zps448af247.jpg) no-repeat center center;
background-size:cover;
float:right;
}
If I understand correctly then you can use overflow:auto; in your wrap div.
#wrap {
background:#fff;
margin:20px;
position:fixed;
overflow:auto;
}
it will show the scroller in your wrap div.
You need to specify height;
#content {
overflow:auto;
height:360px;
width:45%;
padding:2.5%;
float:left;
}
http://jsfiddle.net/UG7un/1/
You mean like this?
http://jsfiddle.net/UG7un/3/
Commented out the:
position:fixed;
and a couple lines of the JS.
My basic layout for my page is:
<body>
<div id="headWrap"></div>
<div id="contentWrap"></div>
</body>
headWrap has all my menu items and search bar. contentWrap holds the content of each page. Both have a width of 100%. headWrap uses a repeating background images contentWrap uses a background image much larger than the screen size.
Somehow, when the page is rendered, the horizontal scroll bar is visible. Even though it appears that all content is on the page. If I scroll to the side, the background image does not continue, and the scrolled part of the screen is white. If I stretch the window wide enough the background image takes up the entire page.
How can I find out what is causing the horizontal scroll bar, and why does the background show up when I stretch the window, but not when I scroll.
#headWrap{
position:relative;
width:auto;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:auto;
height:1005;
margin:0 0 0 0;
padding:0 0 0;
float:left;
background:url(images/contentBg.jpg) repeat-x;
}
Use following CSS styles: width and overflow:hidden;
html{
margin: 3px 1px;
}
*+html{
overflow:auto;
}
body{
margin:0;
width:100%;
min-width:800px;
position:relative;
}
#headWrap{
position:relative;
width:100%;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:100%;
margin:0;
padding:0;
float: left;
background:url(images/contentBg.jpg) repeat-x;
}
Maybe you have some default margins that are added in addition to the 100% width? I suggest using a reset css, for instance YUI 2: Reset CSS.
You're looking to set the overflow CSS property.