I have a menu of links on the left, and content in the middle. If the content is longer than the links, it will wrap below them instead of staying neatly to the right.
Adding float:left to my content div fixes this, except in IE, where it causes the menu (and the footer) to disappear entirely.
I need to either fix the problem with float:left, or find another way of keeping all my content to the right of the menu.
Here's a pared-down version of the html and css code that shows the problem in action. Replace the #content { float:left; } with #content {} to see the original wrapping problem.
content {margin:200px;} ALMOST solves this problem -- but the lines that previously would have wrapped are now about 3 pixels further left than those above them, again only in IE.
html:
<HTML><HEAD>
<TITLE>Index</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
<DIV id="main">
<DIV id="nav">
<A href="link1.html">Link 1</A>
<A href="link2.html">Link 2</A>
</DIV>
<DIV id="content">
Content<br>
goes<br>
here<br>
and<br>
sometimes<br>
wraps<br>
under<br>
links
</DIV>
<DIV id="footer">
Footer<BR>
</DIV>
</DIV>
</BODY>
</HTML>
css:
* {
padding: 0;
margin: 0;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #fff;
}
img { border:0px; }
body { background-color:#454547; padding: 4px; }
#main { position: relative; top: 20px; }
#nav {
position: relative;
left: 0px;
width: 200px;
float: left;
font-weight: bold;
padding: .25em;
line-height: 1.25em;
font-size: 1em;
}
#nav a { display: block; height: 35px; padding: 3px; color:#FFFFFF; }
#nav a:hover { background-color:#CCCCCC; color:#333; }
#footer { width: 100%; clear: both; margin: 0px 0px 10px 0px; padding: 10px; font-size:10px; }
#content { float:left; }