CSS: floating div to the right causes the container div to stretch the entire width of the screen in IE

Question

I saw a similar question here and did not see the answer. I am having a problem when an element moves to the right, inside the parent div, and this causes the div to stretch the entire width of the page in IE7. This does not happen in other browsers (Firefox and Chrome). I also posted photos after the question, for reference. The HTML I use 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 that I use for these tags is also below. One thing that I noticed in a consistent way between the other person’s question mentioned above and my problem is that both parent divs have applied positioning (the person above has absolute, I 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; } 

Note that the action class moves to the right. If I take this float, the box looks like this . But with the addition of float, it stretches the whole screen and looks like this . Is this a known IE bug because it doesn't happen in any other browser and it drives me crazy.

For those who wondered, I had the content in the "actions" div, but I managed to remove all this before the root problem.

Any help would be greatly appreciated. Many thanks.

Answer 1

You need the width: * The polarized box must have an explicit width (assigned through the width property or its internal width in the case of replaced elements). *

via: W3C

Answer 2

Do it

 <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 the css class

.test {swim: right; }

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

MNC

Answer 3

I’m not quite sure what you want, since you didn’t explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float next to the "Test" div, I just tried to make a separate the .floatr class, or it will also work if you just apply the style directly to the div.

 .floatr { float: right; } 

with the .floatr class, apply this to the div action:

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

I don’t know why, but it seems to me that the "actions" of the div ignore the float parameter in the class that you set this way. I personally prefer to apply several classes to the div, which allows me to reuse this class over other divs for which I want this effect, but I heard that some browsers will ignore any classes declared after the first. Well, I have not yet encountered this problem with major browsers ...

Oh wait.

I looked at the code again and I think you had a problem with how you set your classes. Your "action" div was not in action, try adding a comma in CSS:

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

I suppose that sometimes, in order to understand something, you have to apply the effect directly, to make sure that it can behave as you expect, and perhaps draw it like some kind of syntax error if it works. heh.