Member Avatar for lewashby

How would I take a liquid layout from a site such as

and use that same design style on a sitle like http://1stbytes.com/

What am I looking for in he html code?

  • 5 Contributors
  • 5 Replies
  • 109 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by domainflipper

Dani AI

Generated

A focused, practical checklist to turn a fixed-width page into a fluid one — plus why your added stylesheet might not have had any effect. asked about copying a site style; several helpers (, , ) pointed in useful directions. The notes below build on those suggestions with concrete steps and a few small code examples you can drop in and test.

Start with a quick workflow: map the outer wrapper and each column (measure pixels in the browser), convert those pixel widths to percentages relative to the wrapper, and replace the fixed widths with those percentages. Use a modern layout model (Flexbox or Grid) instead of floats for predictable resizing and simpler gutters. Make images and embeds scale by adding a rule so media never overflows their containers. Use a small max/min constraint so extremely large or small viewports don’t break the design.

Example conversions (replace values with the ones you measured):

/* make sizing predictable */
*, *::before, *::after { box-sizing: border-box; }

/* simple flex two-column layout */
.row { display: flex; gap: 16px; }
.main { flex: 1 1 70%; min-width: 320px; }
.sidebar { flex: 0 0 30%; min-width: 220px; }

/* fluid media */
img, video { max-width: 100%; height: auto; display: block; }

If your new CSS file seemed ignored, check these common causes: the linked file path or filename is wrong; the browser is serving a cached copy; the rule is being overridden by a later or more specific selector; the stylesheet uses a media attribute that doesn’t match the device; or inline styles/id selectors on the page are stronger. Use the browser Network and Computed Styles panels to confirm the CSS file loads (HTTP 200) and to see which rule is winning.

For modern references and patterns, see the MDN guides on Flexbox and Grid:

Recommended Answers

All 5 Replies

Member Avatar for IIM

The best way to understand the css or html code for a site is to use chrome inpect element or "firebug" of mozilla and check "CSS" ,HTML n script for it
To view example of liquid layout,click here

Edited by IIM because: edit
Member Avatar for Member #671080

Hi Garrett85,

A liquid layout would be created using CSS rather than HTML, so you would need to look at and edit the stylesheet.

There isn't really anything you can 'copy' from a liquid layout and 'paste' into a static layout to change it.

Basically a static layout uses fixed widths (eg. width: 45px;) whereas a liquid layout uses relative widths (eg. width: 15%;), or doesn't define widths.

Bear in mind that liquid layouts can look a bit silly (wide and short) on very large screens. You can get round this problem by setting the max-width.

Member Avatar for veedeoo

Hi,

PLease allow me to add something. I think the closest design you can probably use that is similar to 1stbyste.com is the twitter . It is easy to use and easy to implement. In fact, I use it a lot with smarty templating engine as a parent template...

There is another one, but for some reason I cannot remember its name.. I will post back as soon as I remember the name.. :)

Member Avatar for lewashby

I added this line <link href="a_data/resize.css" rel="stylesheet" type="text/css" media="screen"> to my html code and this line body { width: 100%; } to my resize.css file but I couldn't see a difference.

Member Avatar for domainflipper

Hey garett85 thanks for the code, and helping

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.