Ive had this problem before but cant find the fix.
I have a 2 columns, both divs. Left is navigation 150px and the right is the content div. Now I have them aligned next to each other but as soon as the main content div becomes "higher" than the navigation div the content, the content starts to be placed underneath the navigation.
So I added a margin-left: 150px to the content div which fixed the problem in firefox. But again IE makes life difficult.
My problem now is the "Bla bla bla" doesnt line up properly after that navigation div has finished. Anyone lend a hand.
HTML
<body>
<div id="container_top"><!-- --></div>
<div id="container">
<div id="navigation"><b>Navigation</b><br />Item 1<br />Item 2<br />Item 3<br />Item 4</div>
<div id="content">Bla Bla Bla ......</div>
<div id="container_bottom"><!-- --></div>
</body>
CSS
body {
text-align: center;
background-color: #C0C0C0;
color: #FFFFFF;
font-size: 9pt;
font-family: tahoma;
}
#container, #container_top, #container_bottom {
width: 808px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#container {
text-align: left;
background: url("images/container_bg.png") repeat-y;
}
#container_top {
background: url("images/container_top.png");
height: 13px;
}
#container_bottom {
background: url("images/container_bottom.png");
height: 13px;
}
#navigation {
width: 150px;
float: left;
margin-left: 5px;
}
#content {
margin-left: 160px;
margin-right: 5px;
}
Thx
I have a 2 columns, both divs. Left is navigation 150px and the right is the content div. Now I have them aligned next to each other but as soon as the main content div becomes "higher" than the navigation div the content, the content starts to be placed underneath the navigation.
So I added a margin-left: 150px to the content div which fixed the problem in firefox. But again IE makes life difficult.
My problem now is the "Bla bla bla" doesnt line up properly after that navigation div has finished. Anyone lend a hand.
HTML
<body>
<div id="container_top"><!-- --></div>
<div id="container">
<div id="navigation"><b>Navigation</b><br />Item 1<br />Item 2<br />Item 3<br />Item 4</div>
<div id="content">Bla Bla Bla ......</div>
<div id="container_bottom"><!-- --></div>
</body>
CSS
body {
text-align: center;
background-color: #C0C0C0;
color: #FFFFFF;
font-size: 9pt;
font-family: tahoma;
}
#container, #container_top, #container_bottom {
width: 808px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#container {
text-align: left;
background: url("images/container_bg.png") repeat-y;
}
#container_top {
background: url("images/container_top.png");
height: 13px;
}
#container_bottom {
background: url("images/container_bottom.png");
height: 13px;
}
#navigation {
width: 150px;
float: left;
margin-left: 5px;
}
#content {
margin-left: 160px;
margin-right: 5px;
}
Thx