CSS: Floating div to right causes container div to stretch full width of screen in IE

Question

Hi all,

I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:

<div id="journal" class="journalIE">
    <div class="title_bar">
        <div>
            Testing
        </div>
        <div class="actions"></div>
        <div class="clear"></div>
    </div>
</div>

The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).

#journal
{
    z-index: 1;
}

.journalIE
{
    right: 1px;
    bottom: 18px;
    position: fixed;
}

#journal .title_bar
{
    background: #F3F3F3;
    border: 1px solid #C5D6E8;
    color: #363638;
    font-size: 11pt;
    font-weight: bold;
    height: 20px;
    padding: 4px;
    margin-bottom: 4px;
}

#journal .title_bar .actions
{
    float: right;
}

.clear
{
    clear: both;
}

Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.

For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.

Any assistance would be greatly appreciated. Thanks very much.

Answer 1

Do this

<div id="journal" class="journalIE"> 
<div class="title_bar"> 
    <div class="Test"> 
        Testing 
    </div> 
    <div class="actions"></div> 
    <div class="clear"></div> 
</div> 

and then add a Css class

.Test { float:right; }

should do it, let us know if it does not work.

MNK

Answer 2

You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *

via: W3C

Answer 3

I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.

.floatr {
float: right;
}

with .floatr class, apply that to "actions" div:

<div class="actions floatr"></div>

I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...

Oh wait.

I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:

#journal .title_bar, .actions
{
    float: right;
}

I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.

Answer 4

hi Mega Matt due got your answer?, i facing same problem with ie7. i have div with a width of 600px in that i have a div which is floated right, i am generating a dynamic content in that so it should have width according to its content which is supported all browser except ie7. I am trying to get fix from last 2 days and i found this post which is totally related to my problem but not found any solution yet. can we define width with jquery to floated right div according to its content rather defining specific which is not possible for dynamic contents.

Please advice if u got any solutions or anybodyelse. Thanks!!!