Aug 24, 2009

Floating DIV’s are tricky

A page layout using DIV’s are much more flexible than a table layout. However, I often went back to using tables because it seemed more stable across different browsers. After spending some time researching how to use DIV’s effectively, I came up with a list of basics I wish I’ve known before.

1. Is a container DIV not stretching accordingly to the size of content DIV’s?

  1. <div id="container_div" style="width: 500px;">
  2.     <div id="left_column" style="float: left; width: 200px"></div>
  3.     <div id="right_column" style="float: left; width: 200px"></div>
  4.     <div style="clear: both;"></div>
  5. </div>

The last DIV will make sure that container_div will stretch accordingly to the size of left_column and right_column.

2. IE 6 3px gap
When I set the left_column and right_column’s width to 250px, it looked as though IE6 is completely ignoring the fact that these DIV’s are floating. It turned out, IE 6 has a gap of width 3px and the contents of the right_column gets pushed underneath the left_column.

http://www.positioniseverything.net/explorer/floatIndent.html

3. Peek-A-Boo bug in IE6
Now all the DIV’s are positioned where I want them. Surprise! It seems as though the contents of the DIV is hiding behind the background image in IE 6. You can sort of see it when you mouse over and try highlight it. Setting z-index won’t do the trick because there is no z-indexing in IE6. But do not worry. Once again, http://www.positioniseverything.net came to a rescue.

http://www.positioniseverything.net/explorer/peekaboo.html

His second solution of setting ‘position: relative;’ usually does the trick for me.

Happy Web Development!

About the Author

Object Partners profile.
Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
Performance Test Liquibase Update
When doing a liquibase update to a database if you’re having performance issues, it can be hard to find out which updates are causing problems. If you need to measure the time to apply each […]
TICK Stack Monitoring for the Non-Technical
TICK – Telegraf, Influx, Chronograf, and Kapacitor – is a method of monitoring your systems and applications. In this article, I discuss in non-technical terms what the difference is between TICK and Prometheus Grafana A […]
Design Systems, Part 1 • Introduction
Business leaders need a practical guide to plan and execute Design System Initiatives. The aim of this series is to be that guide. This installment introduces terms and definitions as a primer on Design Systems.
ML for Translating Dysarthria Speech (Pre-Part 1)
What is Dysarthria? Per the Mayo Clinic, Dysarthria occurs when the muscles you use for speech are weak or you have difficulty controlling them. Dysarthria often causes slurred or slow speech that can be difficult […]