Stack elements one over the other in fluid or responsive layout for small screens

HTML & CSS
1

Hello All…
I had been working with fixed width layout quite some time and now i am starting with responsive layout for the web pages.
What i learnt is that for responsive layouts of your div(s) you should give the widths in percent.

I tried with that and it is working but what i am not able to implement is that the elements don’t stack one over the other after a certain screen width.

The elements just re-sizes as i decrease the window size but what i want is to get elements stacked one-over the other after a certain minimum screen width.

How to achieve this…
what css do i have to write for this…?

Thanks…

2

Check out media queries. You’ll most likely have to stop the floating on some of your elements.


@media screen and (max-width: 800px) {
	.element-to-stack {
		float: none;
		width: auto;
		/* whatever else needs to be done... */
	}
}
3

Hi,

You will need to utilise media queries so that at certain widths you change the columns from floated to non floated and change their width to 100% and then they will line up underneath each other. You can’t automatically make elements change from floated to non-floated without using [URL=“http://mediaqueri.es/”]media queries.

The mobile first approach is recommended these days if you are catering for mobile.

If you do a search of the forums for “responsive design” you should find many threads on the subject.

4

I think i got what i needed…
Thanks a lot to both of you… !