Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Roven Loo
Roven Loo
7,834 Points

How to make a div proportionally fluid when scaling browser?

So I want to make my content a 2 Column layout div that fills up the whole "container". But I want the "335px X 250px" div to be resized proportionally when window is scaled up or down. Here's a sample image of how I want it to look like http://i.imgur.com/z4Zx04d.jpg?1

How can I do this?

Here is a JSFiddle link of what I have so far https://jsfiddle.net/gdkvcnyj/15/

Weellpp!!

2 Answers

Andrea Miotto
.a{fill-rule:evenodd;}techdegree seal-36
Andrea Miotto
iOS Development Techdegree Graduate 23,357 Points

It sounds that you are looking for viewports, that adapts all your layout depending of your windows size with a meta viewport, or you can just use the viewport units as the text size to make your text scalable.

Just google it, or watch out this link: w3cSchool viewport

Roven Loo
Roven Loo
7,834 Points

Ey thanks man this really helped me out! The viewport thing opened up a lot of possibilities for me :) Thanks a lot

Andrea Miotto
.a{fill-rule:evenodd;}techdegree seal-36
Andrea Miotto
iOS Development Techdegree Graduate 23,357 Points

You're welcome. But usually the devs do different css, like 1 or 2 for desktops, 1 for tablet and 1 for mobile. Doing this, you can manually adapt your layout in size, visibility, and position.

Roven Loo
Roven Loo
7,834 Points

You mean different IDs and Classes or different CSS files?

Andrea Miotto
.a{fill-rule:evenodd;}techdegree seal-36
Andrea Miotto
iOS Development Techdegree Graduate 23,357 Points

Different css file, this is an example from one of my projects: <p> <link type="text/css" rel="stylesheet" href="css/reset.css" /> <link type="text/css" rel="stylesheet" href="css/960_16_col.css" media="screen and (min-width: 900px)" /> <link type="text/css" rel="stylesheet" href="css/main.css" media="screen and (min-width: 900px)" /> <link type="text/css" rel="stylesheet" href="css/tablet.css" media="screen and (max-width: 900px)" /> <link type="text/css" rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 480px)" /> <link type="text/css" media="print" rel="stylesheet" href="css/print.css"/>

</p>

Gregory Radek
Gregory Radek
869 Points
Gregory Radek
Gregory Radek
869 Points

Firstly and foremost, if you are after a fluid or responsive layout, which it sounds like you are, then instead of using pixels, you should be using percentages to layout your widths, heights, margins etc.

Secondly, i take it you want the height and width of each div to keep the same width and height ratio as they change in size? This isn't possible with just css unfortunately and depending on the content you want in each div, you will more than likely need a bit of javascript to help you out there.

I hope this helps? :)

Roven Loo
Roven Loo
7,834 Points

Hmm i see i understand now. Thanks for helping me out!