Float:left/right not working in prod

HTML & CSS
1

Have some html content with some float:left, float:right css that isn’t displaying correctly on the production site. Works fine on the test site, naturally. Here’s a snippet… (the two spans with the class=“alignleft/right” are the problem) They overlap on the production site. Anyone have any ideas, suggestions, etc?

<p>
<span class=“BoldCAP”>Spotlight Theatre Art Gallery</span>
<br>
1622 19th St
<br>
<span class=“alignleft”>Bakersfield</span>
<span class=“alignright”>661 634-0692</span>
<br>
<a target=“_blank” href=“http://www.theatreap.com”>www.theatreap.com</a>
<br>
The theatre presents works of local artists on a monthly, rotating basis.
</p>

Here’s the css:

.alignleft {
float:left;
}

.alignright {
float:right;
}

2

Hi alex_brambila. Welcome to SitePoint. :slight_smile:

Works fine on the test site … They overlap on the production site.

We probably need to know more about the production site. Do you have a link?

3

Here you go…

Bakersfield arts-organizations | Find arts-organizations in Bakersfield, CA

4

This rule on line 154 of your stylesheet is nullifying your floats:

#maindiv span {
  position: absolute;
}

Your code is a bit of a spaghetti bowl, though, so it might be worth validating your HTML and [URL=“http://jigsaw.w3.org/css-validator/”]CSS first (over 200 errors). Removing that position: absolute might cause other problems.