jlindblom Posted October 26, 2012 Share Posted October 26, 2012 Hello! Hope you're fine! I have three sections. All with a height of 100% in a 100% high body, and then I got some boxes/divs which I want centred in each section, see here. But I can't get it work when I have 3 sections.When I have only one section it works fine to center the box/div, see here. What goes wrong when there is more than one 100% div? What am I doing wrong? Or is it not possible to center in this way? Any tips how to get all boxes center in each section? Thanks for your all kind help! Have a nice day! Sincerly,Jimmy Link to comment Share on other sites More sharing options...
Charles @ CodeConquest.com Posted October 26, 2012 Share Posted October 26, 2012 Hi Jimmy, First, make this the first line of code in your HTML: <!DOCTYPE html> This will make sure that browsers don't render your page in quirks mode. Quirks mode can make some elements on your page render strangely - you don't want to have to deal with that. To answer your question, to center an element with CSS, use margin: auto; This will center it horizontally but not vertically. If you want to center vertically, the only way to do that is to adjust margin/padding manually. Good luck! Link to comment Share on other sites More sharing options...
jlindblom Posted October 26, 2012 Author Share Posted October 26, 2012 (edited) Hello! Thanks for your answer, Charles. Please check the link, now this is the result after the changes with margin: auto;. Here is the first link. I want all colors in each section to fill up the screen, like at this page: http://www.spelltower.com with differents sections. And in each section I want the box centred. But do I need to use javascript/jquery to make it work? Edited October 26, 2012 by jlindblom Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2012 Share Posted October 26, 2012 No, Javascript shouldn't be used to style pages. This can be done with CSS but you have to start off by fixing some problems in your code.An ID attribute can only be used one one single element in the document, so to start off, instead of id="box" use class="box". Remove everything in the #box rule and you'll be able to use the more fluid approach.Use this: .box { background-color: purple; width: 500px; height: 500px; margin: 0 auto;} Your other technique may work, but getting it to work properly means doing things in a specific manner. The first thing is to set the parent's position to relative. Then you set the box position to absolute before setting any numbers. Link to comment Share on other sites More sharing options...
jlindblom Posted October 26, 2012 Author Share Posted October 26, 2012 Hello Ingolme! Thanks! I updated the code now. But all the sections is now adapting to the boxes (.box) height. They are not 100% height anymore, and sections not fill up the screen-size to 100%. Do you have any other ideas? Here is what it looks like. It feels like I have test the most ways now, and thats why I thought it could work with some jquery that counted the height etc. Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2012 Share Posted October 26, 2012 Add another rule: html { height: 100%; } Link to comment Share on other sites More sharing options...
jlindblom Posted October 27, 2012 Author Share Posted October 27, 2012 Morning! I just tested the: html {height: 100%;} Now all sections is 100% height. But. Again the box will not be centered both horizontal and vertical in the section. I can't work it out, why it not works. Please, say that you have more ideas? Have a nice day! Link to comment Share on other sites More sharing options...
jlindblom Posted October 27, 2012 Author Share Posted October 27, 2012 Here is what it looks like right now https://dl.dropbox.com/u/101235437/center/center3_result.htmlI tried the whole day. Can't figure it out, how to center it both horizontal and vertical. Anyone? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 27, 2012 Share Posted October 27, 2012 (edited) This is based on producing a singular centred popup html/css code, this has css/code for working in IE less than 9, but it currently won't work when dealing with 2 or more 100% height containers. the site you referenced actually uses jquery to do this. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title> <script type="text/javascript">/*<![CDATA[*//*---->*/ document.createElement("section"); //for IE less than 9, but since it does not work in these older ie browsers, it is redundant /*--*//*]]>*/</script> <style type="text/css">body,html {height:100%; margin:0; padding:0;}.box { background-color: purple; width: 500px; height: 500px;}section {height:100%; position: relative;}.outer {position:absolute; top:0; left:0; width:100%; height:100%; z-index:120; }.middle {height:100%; display:table; margin:0 auto;}.inner {vertical-align:middle; display:table-cell; z-index:150;} .col01 {background-color:green;}.col02 { background-color: blue;}.col03 {background-color: red;} </style> </head><body><section class="col01"><div class="outer"> <div class="middle"> <div class="inner"> <div class="box"></div> </div> </div></div></section> <section class="col02"><div class="outer"> <div class="middle"> <div class="inner"> <div class="box"></div> </div> </div></div></section> <section class="col03"><div class="outer"> <div class="middle"> <div class="inner"> <div class="box"></div> </div> </div></div></section></body></html> Edited October 27, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
jlindblom Posted October 28, 2012 Author Share Posted October 28, 2012 Hello dsonesuk! Thanks for your nice helping! Really nice! See the result here now. But how to do then, lets say that I add a menu/navigatin-bar at top. Is it possible then to "push" the box down some pixels too, to make the box centered again? See here. Thanks for your kind help! Link to comment Share on other sites More sharing options...
dsonesuk Posted October 28, 2012 Share Posted October 28, 2012 add margin-top: with value the same as the height of nav bar to .box . Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now