Forum Moderators: not2easy
the following code works in firefox and safari yet not in IE... any ideas
<div style="text-align:center;width:100%;">
<div style="background:#333;margin-left:150px;margin-right:150px;height:auto;float:left;">
<div style="background:#eee;width:150px;height:50px;margin-left:-150px;">left</div>
<div style="background:#999;width:150px;height:50px;margin-right:-150px;float:right;margin-top:-50px;">right</div>
center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
</div>
</div>
I could suggest you look at the yahoo layouts, and start from there. They work to start with.
Looking at your code:
- most of us use style sheets and will add an id to the div and style it from there. One of the great things of CSS is that it gives you the ability to change the layout without touching the html (separation of layout and content)
- why do you nest the divs?
- why the negative margins, you're making it complex for yourself...
- I'd float the left and right stuff, next have the center col fill out the rest (not even using margins to keep it a column if I can as it'll make my fluid design much nicer. and not leave half of the screen real-estate whitespace (but margins can keep it small if you need that.
so I'd end up with html that goes like [and many will tell you not to use xhtml, but I ignore that and will fix IE6 misery due to that a bit more than they will (only a little bit, but as always ymmv)]
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="testie.css" />
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="menu">
menu, note I didn't call it left or right, I'll choose in my layout, not while entering what needs to be in the menu
</div>
<div id="ads">
advertising goes here, again I'm refraining from saying where it goes.
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean lorem est, vulputate bibendum, pharetra ut, commodo ut, nulla. Praesent a eros et urna adip iscing imperdiet.
</div>
</div>
</body>
</html>
and the css would be like:
#menu {width:150; float: left;}
#ads {width:150; float: right;}
#content {margin: 0 155px 0 155px;}
But as I said I do think there's little need to continue to use column based layout once you have the ability to wrap text around floated boxes. (Please do try it without the #content line above)
And swapping the menu to a top menu with drop down boxes, the ads underneath that all becomes possible without touching the html.
If you wonder why I added the wrapper div: I do that knowing I'm likely to use it get IE6 to behave in certain layouts, normally body would be usable for all you need, but every so often you need to use coercion on IE6 and that DIV is like it's straitjacket, sitting ready should I need it.
[BTW: I didn't actually test the above in IE6 (no access to IE6 right now)], but it works just fine in IE7. The IE6 stylesheet could use an alternative for the min-width, but I'm not really fond of them hacks so I'd rather hope IE6 users do not make their screen so small there is no space left for the middle column.
