چگونه با html یک قالب ستونی خوب بسازیم

یکی از مسائلی که همه با آن مطرح هستند.، ساخت یک قالب با یک یا دو ستون است. مواردی که معمولا مشکل ساز می شوند، موارد زیر هستند:

• دوست داریم به صورت حداقلی از float استفاده کنیم تا مشکلات بعدی رخ ندهد.
• دوست داریم در هیچ مرورگری مشکلی نداشته باشد.
• دوست داریم عرض کل طرح ثابت نباشد (قابل تغییر باشد)، یعنی مثلا کل صفحه یا ۹۰ درصد صفحه را بگیرد.
• دوست داریم عرض ستون کناری ثابت نباشد، مثلا ۱۰ درصد صفحه

در مجموع راه حل زیر به نظر بهترین راه حل است:

 

قاب اصلی { width: 90% } میتواند طول ثابت یا متغیر داشته باشد

ستون کناری

{ float:right; width: 200px }

میتواند طول ثابت یا متغیر داشته باشد

{ margin-right: 210px }
دقت کنید که float نیست.

قسمت قرار دادن محتوا
{ float: right; width: 100% }
دلیل اصلی وجود این div امکان استفاده از clear:both داخل همین div است

clear:both
برای اینکه قسمت اصلی همیشه بزرگتر یا مساوی ستون کناری باشد، البته محتوای این div خالی و بنابراین عرض آن صفر خواهد بود.