Skip to main content

Magazine-style layouts

Web design has developed a look of its own over the last decade. But although it's possible for designers to break away from tradition, when they do they tend to abandon one of the primary tools of print design - the grid.

Magazines and newspapers have different rules, and even when those rules are broken they're broken in an orderly fashion. A 'callout' or 'boxout' may take up several columns, but they still fit into an overall grid system.

Originally, HTML wasn't designed for formatting content in such a regimented manner, but CSS enables you to make those columns to create a kind of grid. However, you will still need to fix certain aspects of that layout to successfully reproduce the look of magazine pages.

For example, text doesn't automatically flow from column to column, and you can't 'wrap' text around an object that breaks across more than one 'column' (or <div> container) either. The solution in both cases is to fake it.

In this tutorial you'll take a magazine layout and translate it for the web using Dreamweaver. The end result will be a CSS-powered, easy-to-tweak template.

Click here to download the tutorial for free

Want to learn more about CSS and JavaScript? Check out the top CSS and JavaScript (opens in new tab) tutorials and examples of CSS (opens in new tab) from our sister site Creative Bloq (opens in new tab).

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.