Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2006-04-29 10:31:33
- the-bhp
- Member
- Registered: 2005-10-18
- Posts: 26
Problems with floating div in IE
Hi everyone,
after spending hours trying to find a solution for my problem via Google, I decided to bother the TXP community.
I am working on a site with a simple two column layout: One main column and one navigation bar. The navigation bar is supposed to float on the right, but it doesn’t work on Internet Explorer 6. There, I get the sidebar on the right, and the main column on the left, but it’s below the sidebar.
Here’s the website
(It still has some minor graphical inconsistencies, I will fix that later.)
Here’s a part of the TXP page:
<code>
<div id=“container-bg”>
<div id=“container”>
<!— head —>
<div id=“head”>
<img src=”/contents/images/head.jpg” alt=“Regina Hermans. Psychoanalytische Psychotherapie und Psychoanalyse.” />
</div>
<!— /head —>
<!— right —>
<div id=“menu”>
<img src=”/contents/images/hl-menue.png” class=“hl” alt=“Menue” />
<txp:output_form form=“menu” />
</div>
<!— /right —>
<!— center —>
<div id=“content”>
<!— <txp:output_form form=“header” /> —>
<txp:article />
</div>
<!— /center —>
<div style=“clear:both;”></div>
</div>
</div>
<!— footer —>
<div id=“foot”></div>
<!— /footer —>
</code>
Here’s the CSS code:
<code>
#container-bg
{
width: 578px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
background: url(/contents/images/bg.png);
clear: none;
}
#container
{
width: 560px;
margin: 0px 9px 0px 9px;
padding: 0px 0px 10px 0px;
background: url(/contents/images/bg-main.png);
clear: none;
}
#head
{
text-align: center;
width: 560px;
height: 344px;
background-color: #fff;
}
#head img
{
margin: 0px;
padding: 0px;
}
#content
{
margin-right: 200px;
}
#menu
{
margin: 0px;
float: right;
width: 200px;
clear: none;}
#foot
{
width: 578px;
height: 19px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
background: url(/contents/images/foot.png);
}
</code>
(I only posted the important parts of the code.)
The problem might be somewhere within #container-bg or #container. I tried a website that only included #content and #menu and it worked. But I just can’t figure out what’s IE’s problem.
Please help, I’m at the brink of a nervous breakdown.
Thank you!
Last edited by the-bhp (2006-04-29 12:00:59)
Offline
Re: Problems with floating div in IE
Ok, simple solution. Remove the width from the Content div. In the example above you have no width in your Content, but in the CSS on your site, you have a width of 360px. Remove this and see what happens.
Offline
#3 2006-04-29 13:11:53
- the-bhp
- Member
- Registered: 2005-10-18
- Posts: 26
Re: Problems with floating div in IE
ricetxp, thank you so much! That’s it! You saved my day!
Offline
Pages: 1