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
Solved

Reponsive columns CSS

Posted on 2014-02-16
6
206 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
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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 500 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

856 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