If you are looking for a simple way to convert any of the liquid layouts into fixed-width designs. The process is very simple and it will work with most liquid layouts.
To ensure that the fixed-with design is in the middle, centrally aligned on all common browsers you need to add the text-align:center on the body tag, plus also left and right margins of ‘auto’ on our new div. You have three choices of units; pixels, ems and percent.
Step one : Add following to your HTML
Add a div around the existing liquid layout and give it an id:
<div id="fixed"><!-- existing liquid layout here --></div
Step two : Change your CSS
We need to add some CSS rules to the new div plus to the body of the page:
body {
text-align:center;
}
#fixed {
margin:0 auto;
width:90%;Â Â Â /* you can use px, em or % */
text-align:left;
}
best of the best it is,
Hi,
Much appreciated article. But I have the opposite problem – I bought a template which is fixed and I want changed to a liquid layout – how do I go about achieving this please?
Jus
Doesnt work for me.
Of no use