Clever Geek Handbook

Question about divs in HTML page creation

Whenever I design my personal web pages, I always had this problem using divs to create a multi-column layout. I use the float attribute to left or right align them, but when I make the browser window thinner, the columns adjust again, where one column falls below the other and other things are randomly aligned. I would like the columns to stay the same as on all other sites.

What's the best way to do this?

+2


source to share


8 answers


You can specify the width for the column div container.



+4


source


Why reinvent the wheel? There are tons of sites that offer free templates for exactly what you are trying to achieve. Check out some of them:



We hope this helps you!

+4


source


There are several possible explanations:

1) If you have a liquid container with fixed width columns, the container will resize and the columns will no longer fit. You can add a given width to the container, or you can make the columns fluid (% based). You can even make one of the columns fluid if you use Nicole Sullivan's approach here: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

2) If you are using the completely liquid method already, but using IE6 / 7 to view it, you may be experiencing pixel rounding errors at certain sizes. Nicole's approach also solves.

You don't need tables, just math.

+4


source


You can use the min-width

CSS command to specify the minimum width for your page. See this page for an example.

+2


source


You can use min-width and make it work in IE6 with ie7.js

+2


source


The solution shouldn't be used float

for everything. Of course, you can buy a template and "outsource", but usually a columnar web page layout is achieved using a combination of fields and positions (including negative values). Or tables, of course, but be careful not to lose semantic value in HTML when using them (for example, screen readers and line parsers will be confused).

+2


source


Just set an explicit width for your elements. This should make them invulnerable to any size change.

div.clear  { clear:both; }
#container { width:640px; }
  #nav     { float:left; width:200px; }
  #content { float:left: width:440px; } 

<div id="container">
  <div id="nav">
    <p>Hello World</p>
  </div>
  <div id="content">
    <p>Hello World</p>
  </div>
  <div class="clear"></div>
</div>
+1


source


I will probably forget for this, but until IE6 disappears from the face of the earth, using a table for a multi-column layout is the safest and easiest way. Of course, this is not the "right" way to do it, but in this case the reward for doing it right is so tiny that you can just peek at the table and move on to more important things.

Do not misunderstand me; I love CSS. I just think the pragmatic choice for multi-column layouts is still a table. You will spend less time wrestling with browsers and more time focusing on the things that will really benefit your websites.

0


source






More articles:


All Articles