Reponsive columns CSS

Hi

I have 2 columns floated left. They are sat within a parent div that has a maximum width of 1024px and width auto.

I want the columns to adjust reponsively as the browser resizes and the parent div shrinks

Currently i have set the 1st column to have a max-width of  660px with a margin-right of 60px.
the 2nd column has a max-width of 300px; both set to width auto.

Why does this not work?

http://jsfiddle.net/cK2zs/

Thanks
coolispaulAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
You can use whatever you like for margin-right, percentage or pixels. In your jsfiddle, you have margin-right:60px. That would be a lot of right margin on an iPhone screen. It would take up a fifth of the screen width. By using percent, it would be less significant of a margin on a tiny screen. If it were my design I would use a media screen definition that would eliminate the right margin on small screens.
why doesnt the left colunmn stretch to fill the 1020px available space on large scrrens?
That's not what your jsfiddle tried to do. You called for the parent container, fixedwidth, to max out at 1020px and the left to max out at 660px on a large screen. But you can design it any way you like.

Don't be concerned about fractional percentages like 64.7%. Below 1020px, all percentages will be fractional.

Using percentages and max/min widths IS the standard way to create fully responsive web pages. It's the only way. As soon as you introduce fixed widths in pixels you lose responsiveness.
0
 
Tom BeckCommented:
It doesn't work on jsfiddle because the jsfiddle page adds css that contradicts the css you need to get want you want in the output.

You want to set the width of left and right divs using percentage. Also the margin-right should be percentage. Plus, you need to override the user agent's built-in margin and padding and you should make the body and html width 100% just to reset the browser to a clean environment.

Here's a jsbin example:

http://jsbin.com/boy/1/

Look at the css here:

http://jsbin.com/boy/1/edit?css,output
0
 
Kyle HamiltonData ScientistCommented:
Just to add to Tom's post, width auto will set the width of the element such that is is no wider than the content. your max-width settings will only prevent the elements getting wider than specified.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Neil_BradleyWeb UX/UI DeveloperCommented:
Have you tried giving the floated elements a percentage width?
N
0
 
coolispaulAuthor Commented:
how can i give the margin of 10px?  10% is not the look  i want to achieve. Is it possible to use pixels for the margin?

Thanks
0
 
coolispaulAuthor Commented:
Also, Tom regarding your exmaple - why doesnt the left colunmn stretch to fill the 1020px available space on large scrrens?

On large screens i want this to be 660px and then scale down...


also - would it be better that i made my parent container (fixedwidth)  1000px rather than 1020px? because then the percentages would round up. At the moment, left column is  64.7%, right is 29.4%  and margin is 5.88%...

Whats the standard way to tackle this?


Cheers
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.