Solved

Reponsive columns CSS

Posted on 2014-02-16
6
209 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

688 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