Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Reponsive columns CSS

Posted on 2014-02-16
6
Medium Priority
?
213 Views
Last Modified: 2014-02-27
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
0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39862757
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39863110
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
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39863351
Have you tried giving the floated elements a percentage width?
N
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:coolispaul
ID: 39864218
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
 

Author Comment

by:coolispaul
ID: 39864231
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 39864565
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question