View Full Version : div alignment

07-05-2011, 08:46 PM
I'm trying to make this page work in firefox and ie. It works fine in ff, but doesn't align properly in ie. The header div needs to be static and positioned above the divs below it. The menu div also needs to align statically next to the specs div. Attached a pic showing how it should look.

body {background-color: #666666;}
#header {z-index:9000; position:fixed; height:25px; margin-top:0; width:100%; background-color: #666666;}
#form {width:400; margin-left:auto; margin-right:auto;}
#info {text-align:center; width:800px; margin-left:auto; margin-right:auto;}
#specs {text-align:center; width:800px; height:1041px; background: url('spec-bg.png') no-repeat; margin-left:auto; margin-right:auto;}
#model {text-align:right; padding:40 25 0 0; }
.model {font-weight:bold; font-style:italic; font-size:32px;}
.description {font-weight:normal; padding-top:10px;}
#menu {color:#ffffff; float:left;}
#prod-img {position:relative; float:right; width:200px;margin:15 30 15 15; padding: 5 30 5 5;}
#spectable {position:relative; float:left; width:450; margin:25 10 15 35; padding:5 5 5 5;}
.table th {font-weight:bold; font-size:12px;}

<div id="header">
<div id="form">
<input onkeyup="getSpecs(this.value)" />
<div id="getspecs">
<div id="info">
<div id="menu">
<script type="text/javascript" src="sticky.js" />
<div id="specs">
<div id="model">
<span class="model"><?php echo $model; ?></span><br />
<span class="description"><?php echo $desc; ?></span><br />
<div id="prod-img">
<img src="<?php echo $imgpath; ?>" height=200 />';
<div id="spectable">
<table><th colspan="2" align="left">Table 1</th>';
</table><br /><br />
<table><th colspan="2" align="left">Table 2</th>';
</table><br />

07-06-2011, 12:14 AM
It's hard to see the problem without seeing the actual webpage. But try adding: display: inline; to the css for the menu. I've been told there is a bug in old IE versions that need that to display divs side by side.

Also, why are you using tables inside you're divs?

07-06-2011, 01:18 AM
I tried validating your code at validator.w3.org, and got:

Line 8, Column 19: document type does not allow element "DIV" here
<div id="getspecs">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Try correcting that and see if it works. I'm guessing you have improperly nested divs, which IE is very picky about, though I didn't read through your entire markup.

07-06-2011, 07:28 AM
Ensure you have define DOCTYPE in your each page, b'coz many of CSS properties won't work in IE without defining DOCTYPE.

I prefer to use floats instead of position or z-index.

The layout you shared is possible without positioning or z-index...

Cheers :)

07-06-2011, 09:04 AM

please make w3c validation for your code ,because checking for w3c validation would be remove browser compatibility errors.or please do provide ur website url to check