Adaptive html layout using only CSS

Question

I think this is my second post regarding Adaptive HTML/CSS layout. I got a helpful answer in my previous post where I implemented the adaptive layout, which was more straight where I need to remove the float and place the containers one below another.

This time I have got some what complex design. Let me show the designs how it should be looking in Landscape and Portrait modes.

Landscape Design:

In the portrait mode that is if the width is less than 1024px then the design should be looking like this

Portrait Design:!

Would be helpful if someone guides me how to approach this design. In case if some more information is required then please feel free to ask

Thanks Raaks

Can you give more information about the properties and purposes of divs 1-6? Why are they different sizes in the two layouts? Can you describe with words how you want them be positioned, especially in portrait mode. — RoToRa
– RoToRa, Commented Jan 12, 2012 at 12:31
Hi RoToRa, I have edited the portrait design, you can check it out. Almost all divs are same size, but they need to be aligned in the following fashion in Portrait mode. — 125369
– 125369, Commented Jan 12, 2012 at 12:45
"Almost all divs" doesn't really help. Either they all need to be the same size, or you need to describe exactly which sizes the divs can have. Also you still haven't described the portrait layout. Why is div5 right aligned and div 6 centered and why only in portrait mode and not in landscape mode? — RoToRa
– RoToRa, Commented Jan 12, 2012 at 14:13

Lautaro Orazi · Accepted Answer · 2012-01-12 15:55:36Z

2

You can try using media queries

@media all and (max-width: 1023px) {
  /* CSS you need for portrait */
}

You can read a lot of good articles about "Responsive web design".

answered Jan 12, 2012 at 15:55

Lautaro Orazi

1661 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adaptive html layout using only CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related