0

I have been trying to build a website that always keeps its ratios and adapts to user screen size but i can't achieve that.

I've startedd with building a simple fixed width/height frame like this: http://jsfiddle.net/WxNrh/ and started playing around with it but I always get stuck.

What I want to achieve is that the max-width would be 800px and depending on the user screen resolution (or how much I shrink my browser window) the website would shrink accordingly but always keep its width/height ratios.

Here is my fixed website:

<div id="wrapper">
<div id="header">Header</div>

<div id="content">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

<div id="footer">Footer</div>

And css:

#wrapper{width: 800px; height: 400px;}
#header{background-color: red; width: 800px; height: 100px;}
#left{float: left; background-color: yellow; width: 200px; height: 200px;}
#right{float: left; background-color: orange; width: 600px; height: 200px;}
#footer{clear: both; background-color: blue; width: 800px; height: 100px;}

I would really appreciate any help! :)

Edit:

I got the desired effect with this css:

#wrapper{max-width: 800px;}
#header{background-color: red; width: 100%; padding-top: 12.50%;}
#left{float: left; background-color: yellow; width: 25%; padding-top: 25.00%;}
#right{float: left; background-color: orange; width: 75%; padding-top: 25.00%;}
#footer{clear: both; background-color: blue; width: 100%; padding-top: 12.50%;}

But the problem is it works by using padding which forces my div content down which means it's not very usable - due to content not being where it supposed to be.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
user1985273
  • 1,817
  • 15
  • 50
  • 85
  • Please don't bypass the rules of this website by turning a line of text into code. Don't you think there was a reason you got an error telling you to post code along with that jsFiddle link? – Sparky Mar 23 '13 at 14:35
  • Google for "Responsive" web design, there are MANY articles and videos on the subject, and when you have a specific question about that, post back. – box86rowh Mar 23 '13 at 14:38
  • http://jsfiddle.net/WxNrh/1/ – box86rowh Mar 23 '13 at 14:44
  • He wants to keep the width/height ratios. That's more than responsive. The trick is padding =) I'll update your fiddle. – Rudie Mar 23 '13 at 14:51
  • Thanks box86rowh, thats exactly how far i got myself. The problem is i dont know how to make height keep its ratio to width. For example if header width is 800 and height is 100 and i shrink it by half then width will be 400 and i want height to be 50px bur currently it will still stay 100px. – user1985273 Mar 23 '13 at 14:51
  • It implies font-size will shrink to unreadeable sizes, isn't it? – FelipeAls Mar 23 '13 at 15:04
  • What you're asking for is in fact what smartphones and tablets - by lack of alternatives on existing websites a few years ago - do since the first iPhone: asssume the width is approx. 960px, render the page as on desktop and let the user zoom in and out and scroll on both axis to have a chance to read anything. This rendering respects the ratio W/H as it's the desktop view... – FelipeAls Mar 23 '13 at 15:09

3 Answers3

3

Voila. http://jsfiddle.net/rudiedirkx/WxNrh/2/show/

padding to the rescue. It's not very useful though, because your content might not fit into the boxes...

The magic is relative padding and absolute positioning:

.outer {
    height: 0;
    position: relative;
    /* padding-bottom: 25%; in the actual div like #header */
}
.inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

and a whole load of wrapper divs =( (.inner and .outer):

<div class="outer" id="wrapper">
    <div class="inner">
        <div class="outer" id="header">
            <div class="inner">Header</div>
        </div>
        <div class="outer" id="content">
            <div class="inner">
                <div class="outer" id="left">
                    <div class="inner">Left</div>
                </div>
                <div class="outer" id="right">
                    <div class="inner">Right</div>
                </div>
            </div>
        </div>
        <div class="outer" id="footer">
            <div class="inner">Footer</div>
        </div>
    </div>
</div>

There IS one case this is very useful in. Sometimes you really need to keep that aspect ratio: responsive video. For content boxes and entire pages: not so useful.

But you asked!

Rudie
  • 52,220
  • 42
  • 131
  • 173
  • +1 Nice, I did [an answer](http://stackoverflow.com/a/10441480/552067) on this padding behavior a while back. – Web_Designer Mar 23 '13 at 15:09
  • Yup, that's the one. Only useful for responsive video. – Rudie Mar 23 '13 at 15:10
  • Thanks, i messed around with paddings myself and also found it a bit problematic for content divs and whole website. But then again there doesent seem to be a better solution for what im looking for :) – user1985273 Mar 23 '13 at 15:15
1

Try something like this:

#wrapper{width: 800px; height: 400px;}
#header{background-color: red; width: 100%; height: 25%;}
#left{float: left; background-color: yellow; width: 25%; height: 25%;}
#right{float: left; background-color: orange; width: 75%; height: 25%;}
#footer{clear: both; background-color: blue; width: 100%; height: 25%;}

Using percentages may not work with float: left;. See how it goes. It it fails, you can trying using max-width and max-height or min-width and min-height.

rhughes
  • 9,257
  • 11
  • 59
  • 87
  • I tried this myself too (with max-width and max-height). The problem is that i want my height always stay the right ratio with my width. With this code my width changes ok but height always stays the same. – user1985273 Mar 23 '13 at 14:57
  • @user1985273 OK, try just using the percentages then. – rhughes Mar 23 '13 at 15:07
1

Using an Image to Drive Ratio

I've found the best way to do ratios is often to use an img set to the ratio you desire, and have that drive the container size.

Here is an example fiddle that modifies your original code:

HTML

<div id="wrapper">
    <img class="ratioDriver" src="http://dummyimage.com/200x100/000/fff.gif&text=2w:1h+Ratio" />
    <div id="header">Header</div>

    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>

    <div id="footer">Footer</div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

#wrapper{
    width: 100%; 
    max-width: 800px; 
    position: relative;
    margin: 0 auto;
}

.ratioDriver {
   width: 100%;   
   display: block; 
}

#header{
    background-color: red; 
    width: 100%; 
    height: 25%; /* 100 / 400 = .25 = 25% */
    position: absolute;
    top: 0;
    left: 0;
}
#left{
    position: absolute;
    top: 25%;
    left: 0;
    background-color: yellow; 
    width: 25%; /* 200 / 800 = .25 = 25% */
    height: 50%; /* 200 / 400 = .5 = 50% */
}
#right{
    position: absolute;
    top: 25%;
    left: 25%;
    background-color: orange; 
    width: 75%; 
    height: 50%;
}
#footer{
    position: absolute;
    top: 75%;
    left: 0;
    background-color: blue; 
    width: 100%; 
    height: 25%;
}

Two ways to deal with the content

You still have to decide how to deal with your content.

Option 1

Do you want it to have separate scroll bars on overflow using overflow: auto on your components? This is the best option if content is unknown in size.

Option 2

Do you want to try and scale it, which will require a fixed size content for you to work out the factors for. This is really only workable in modern browsers (working well in Firefox 19 and IE9, but Chrome 25 is not functioning correctly as of this writing). This fiddle roughly achieves it using these additions to the above css with some added content in the html:

html {
    font-size: 1vw;
}
 #header{
    font-size: 3rem;
}
#left{
    font-size: .99rem;
}
#right{
    font-size: 1.25rem;
}
#footer{
    font-size: 1.3rem;
}
ScottS
  • 71,703
  • 13
  • 126
  • 146