1

I need to center a div on the page with the following characteristics:

  • the width page is 80%
  • width and height as a percentage (eg width: 100%; height: 60%)
  • set a minimum and maximum width and height (eg min-width:980px; min-height:588px and max-width:1170px; max-height:702px)
  • if I resize the page the div is resized proportionally to the page both vertically and horizontally (if I resize the page vertically only you have to resize the window horizontally also)

can you help? Thank you.

----HTML

<div id="content">
    <div id="box">
        text
    </div>
</div>

----CSS

    <style type="text/css">
    #content {
        width:80%;
        background:#000;
        margin:0 auto;
    }
    #box{
        width:100%;
        height:60%;
        background:red;
        min-width:980px;
        min-height:588px;
        max-width:1170px;
        max-height:702px;
    }
</style>
Dhaval Panchal
  • 648
  • 6
  • 26
spark87
  • 35
  • 6
  • Can you put your code into [jsfiddle](http://fiddle.jshell.net/) please? It is easier to get helped with it. (Helper can test their solution) – Orelsanpls Jun 20 '14 at 11:55
  • http://jsfiddle.net/webtiki/rmuL9/ – web-tiki Jun 20 '14 at 11:55
  • Also, its so helpful for people reading your css if it is formated verticaly – Sam Denton Jun 20 '14 at 11:56
  • I don't understand the issue here. the box is centered horizontaly. Are you trying to center it verticaly too? Are you trying to keep, the aspect ratio of the box? – web-tiki Jun 20 '14 at 11:58
  • I think that is what spark87 means as the jsfiddle works bar the vertical centering and resizing – Sam Denton Jun 20 '14 at 12:00
  • This code makes no sense. Try to set a container –  Jun 20 '14 at 12:01
  • Im not sure tif this is correct, but this article seems to suggest a new solution to vertical centering. http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ – Sam Denton Jun 20 '14 at 12:03
  • Your requirements are not totally self-consistent. If `#box` is to have a min-width of 980px, then `#content` needs to be at least 1,225px wide (980px/80%). How do you want to handle this? – Marc Audet Jun 20 '14 at 12:38
  • @SamDenton yes, the vertical centering and resizing. – spark87 Jun 20 '14 at 12:48
  • how can I center the div "content"? http://jsfiddle.net/aXdJ7/ – spark87 Jun 20 '14 at 13:39

1 Answers1

1

Checkout the updated fiddle here.

http://jsfiddle.net/rmuL9/10/

I've added to the #box CSS

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

this will position the box centrally even when you change the size of the browser.

Tom Maton
  • 1,564
  • 3
  • 23
  • 41
  • Thank you :) I wish that you resize the width and height to the maximum width and height minimum... maintaining the aspect ratio – spark87 Jun 20 '14 at 12:17
  • @spark87 "while maintaining the minimum aspect ratio" - well since it is a div, there's no easy css way for that. You've to write your own script.. or look around for some plugins... – T J Jun 20 '14 at 12:23
  • @Tilwin Joy thank you! it is possible that the downsizing will resize based on the percentages? now takes the max width and height when resize and does not change the size of the div box – spark87 Jun 20 '14 at 12:34
  • Checkout this post. http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio this shows how to keep aspect ratio of your div using pure CSS – Tom Maton Jun 20 '14 at 13:06
  • dependent on your browser requirements you could use display: flex; - updated jsfiddle with example http://jsfiddle.net/aXdJ7/3/ – Tom Maton Jun 20 '14 at 13:54