Forum Moderators: not2easy
Sorry if this has been posted before. I couldn't find a similar post.
When creating a simple left/right split (eg between a nav bar and main page content) with one div floated to the left and another pushed to the right of this using margin-left I find that IE 6 always pushes the content that is 'level' with the nav bar slightly further to the right than required. such that the main content 'underneath' the nav bar is slightly out of alignment with that above it.
This is difficult to explain so code follows:
---
<head>
<style type='text/css'>
<!--
#nav {
float:left;
background-color:#cccccc;
width:150px
}
#main {
margin-left:180px
}
-->
</style>
</head>
<body>
<div id='nav'>
link 1<br />
link 2<br />
link 3<br />
</div>
<div id='main'>
text goes here. text goes here. text goes here. text goes here. text goes here. text goes here.
text goes here. text goes here. text goes here. text goes here. text goes here. text goes here.
text goes here. text goes here. text goes here. text goes here. text goes here. text goes here.
text goes here. text goes here. text goes here. text goes here. text goes here. text goes here.
text goes here. text goes here. text goes here. text goes here. text goes here. text goes here.
text goes here.
</div>
</body>
</html>
---
You may need to make your IE window narrower to see what I mean.
Any suggestions would be appreciated.
Cheers
Nick
One way would be to float the main box as well. You would use:
#main {
margin-left: 30px;
float:left;
}
The problem with this is it probably will interfere with other layout items you have.
