[Nublet]

So, I have yet another problem with my website, and now it's the footer. It works fine when there's only one line in it, which is the makers name. But when I added a source and floated the source to the left and name to the right the rgba background disappeared. If I don't float them to the left and right it works fine, what can I do to fix this?

Here's the CSS code for the footer:

footer {
	background-color: rgb(255,255,255); /* IE fallback - http://css-tricks.com/rgba-browser-support/ */
	background-color: rgba(255,255,255,0.4);
	font-style:italic;
	color:#990000;.
}
.heimild
{
	float: left;
}

.hofundur
{
	float: right;
}

And the HTML

<footer>
			<p class = "hofundur">
			Nublet 2012.
			</p>
			<p class = "heimild"> Source: <a href = "http://en.wikipedia.org/wiki/Big_L">http://en.wikipedia.org/wiki/Big_L</a>
		</footer>

And if you don't understand what I'm talking about, here's a picture before I float them:



And after:

[Utael]

You have two background color elements, remove the one you don't want and done.

[Nublet]

Utael, on 14 October 2012 - 11:51 AM, said:

You have two background color elements, remove the one you don't want and done.

Removed the top one, it still looks like the bottom picture

Also tried using margin-left and margin-right but that just screwed things up. Using text-align doesn't work either

[Nublet]

It also doesn't work to use

footer.heimild
{
    float: left;
}

footer.hofundur
{
    float: right;
}

[Utael]

Check your html closing tags

[Nublet]

The footer looks like this now:

<footer>
			<div class = "hofundur">
			<p>Nublet 2012.</p>
			</div>
			
			<div class = "heimild">
			<p>Source: <a href = "http://en.wikipedia.org/wiki/Big_L">http://en.wikipedia.org/wiki/Big_L</a</p>
			</div>
			
		</footer>

Again, the float works perfectly but the background isn't there

Accidentally erased the ">" at the end of the source link whilst pasting this in here

[Utael]

hmm...
this ones got me stumped.

[Nublet]

Oh well, thanks for the help though!

Does IE read pixels differently than Chrome? My div is much larger in IE and also the embedded videos than in Chrome.

[exiles.prx]

Since you are floating the heimild and hofundur within the footer element, the footer will collapse. You will either have to set a min-height on the footer or insert a <div style="clear:both"></div> right before your closing footer element.

[Nublet]

exiles.prx, on 14 October 2012 - 02:56 PM, said:

Since you are floating the heimild and hofundur within the footer element, the footer will collapse. You will either have to set a min-height on the footer or insert a <div style="clear:both"></div> right before your closing footer element.

Thank you! Clearing the <div> worked! Too bad I had to turn it in before you replied But it still feels awesome to have been able to fix it