# Solved: CSS Float Issue in Firefox



## CoasterFreak (Aug 22, 2003)

Hey All, I'm having a problem. I'm a Web Developer for my University and we're in the process of deploying a new Drupal site. Unfortunately we're having a problem. Would anyone mind taking a look at the attached image and code (sorry I cannot provide a link to the site) and help me out.

Basically, what's going on is that the div starting with *Campus Involvement* should be floating right. However in Firefox and IE8 it "hangs" below the first div containing the image and demographics. I had a feeling that something in the Drupal theme template was causing the error, however, inline styles should override external css, correct?

Thanks a million guys! I'll be watching out.


```
<div class="content">
		<div style="float:left;">
		<?php  if ( ($img = $node->field_studentphoto[0]['filepath'] ) ) {
                  echo "<div><img src='/" . $img . "' alt='" . @$node->field_studentphoto[0]['data']['alt'] . "' /></div>"; } /**/ ?>
		<?php $data = ($node->field_hometown[0]['value']); echo "<div><h6>Hometown:&nbsp;</h6><div class='data'>" . $data . "</div></div>"; ?>
		<?php if ( $data = ($node->field_major[0]['value'])) echo "<div><h6>Major:&nbsp;</h6><div class='data'>" . $data . "</div></div>"; ?>
		<?php if ( $data = ($node->field_gradyear['0']['value'])) echo "<div><h6>Graduation Year:&nbsp;</h6><div class='data'>" . $data . "</div></div>"; ?>
        </div>
        <div style="float:right; padding:0 0 0 5px;">
		<?php  if ( $data = $node->field_studentinv['0']['value']) echo "<div><h6>Campus Involvement:&nbsp;</h6><div class='data'>" . $data . "</div></div>"; ?>
		<?php if ( $data = $node->field_studentexp['0']['value']) echo "<div><h6>What your IU Experience has meant to you:&nbsp;</h6><div class='data'>" . $data . "</div></div>"; ?>
		<?php if ( $data = ($node->field_studentadvice['0']['value'])) echo "<div><h6>Words of advice about getting involved at Immaculata University:&nbsp;</h6><div class='data'>" . $data . "</div></div>"; ?>
        </div>
		<div style="clear:both;"></div>

  </div>
```


----------



## peterjamesnorcro (Aug 31, 2008)

you might try making them block elements


----------



## tomdkat (May 6, 2006)

Firefox 2.x/3.0.x has a bug where if you float two elements, the one floated to the right doesn't appear in the right place.

Try reversing the floated DIVs, like this:


```
<div style="float: right;">
.....
</div>
...
<div style="float: left;">
....
</div>
```
See if that helps.

Peace...


----------



## CoasterFreak (Aug 22, 2003)

Hey guys,

I actually figured out what was going on. The Drupal theme was overriding (and ignoring) some settings which was causing issues with the code. I've managed to figure it out by ONLY floating the left div and that seems to be working now. Thanks for everyone's input though.


----------

