Solved

Reponsive columns CSS

Posted on 2014-02-16
6
200 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

862 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now