CSS Layout basic

[kjave]

Hello Friends,

I’m not a complete beginner in CSS and HTML, i do have some knowledge and experience with it. But it’s my first time, making my own layout from scratch(and this time i want to do it the right way :) ). After reading/watching some tutorials on the web, i lost my way about what method to choose. I have read about the grid layout with negative margins, box-sizing, table display, flexbox and so on…all new stuff for me.
My question is, what is the newest(best, and easiest?) way to make a responsive web layout. Where to begin? my project is, creating a good design for a web shop, but i want to make it by myself and don’t want to use templates.

I hope to get some directions here.

Thanks in advance.

[Paulie_D]

My question is, what is the newest(best, and easiest?) way to make a responsive web layout.

That’s not really a proper question…the answer is “all of them”.

There is no “one way” to create layouts because the layout (and your layout choices) will (or at least should) depend on the actual design.

Indeed a mixture of layout methods in a website is common…something needs to wrap around, use a float. Simple div centering, use inline-inline block, need a div to be independent of other divs in a specific spot on the page, absolute or fixed positioning.

Only supporting modern browsers and want full flexibility, perhaps flexbox is the way to go.

Show us the design, support requirements and you’ll get a variety of methods to achieve the same thing.

[kjave]

Hi Paulie_D,

Thanks for the answer.

I made a quick layout design.

http://test.fenfparfumerie.nl/layout/layout.jpg

It’s not the worlds best image, but i hope it is good enough to show you what i want to achieve.
I want the header and the footer to be stretch to full browser width. And the other content at the center, 1280 px width.
I would like to learn how to get this working as a responsive layout.

[Paulie_D]

I would like to learn how to get this working as a responsive layout.

Just googling Responsive Web Design and doing some basic reading will get you started.

Wherever possible, define widths in percentages and use max-width if you need to restrict dimensions.

Then look into media queries for adjusting layout etc at different viewport widths.

Basically, http://justbuildwebsites.com/

Practice, http://learnlayout.com/.

There is no single ‘right’ way as I said.

[Author]

Posts