[thelist] div-based layout alignment

Sarah Adams sarahwbs at gmail.com
Tue Jan 18 06:35:41 CST 2011

On 2011-01-17 1:50 PM, Greg Holmes wrote:
> Could anyone enlighten me as to why I can't get the pieces of this
> layout to line up?
> http://www.magazineline.com/magazineline/test1.htm
> The long story - to get jquery ui dialog to work right in IE, I had to
> change the doctype on the affected page (where I wanted to use jquery
> ui dialog).
> But *that* messed up the topbar layout. So then I tried making a
> stripped-down page with only the topbar present, for troubleshooting.
> No amount of tweaking seemed to help. Then I even tried redoing the
> whole topbar, from its old table layout tag soup form to a new
> div-based layout, and it *still* has essentially the same layout
> problem. It seems to be something to do with the search form area, but
> I haven't been able to pin it down.

First thing:
img {
  vertical-align: top;

Then remove the <br> just before the Search label, and instead use
padding on the div to achieve the same effect.

After that I would recommend stepping *away* from Dreamweaver and using
a text or html editor to edit your html source files :) Get the inline
CSS out and use an external stylesheet instead - it will make your html
source infinitely easier to read. Then clean up the CSS. For example,
you don't need to specify a unit for a padding or margin of 0, and I
strongly recommend against using points as a unit of measurement at all
(e.g. "padding: 0pt;"). That should get you started towards making your
source look better, load quicker, and be much easier to debug in the future.

sarah adams
web developer & programmer

More information about the thelist mailing list