FirstOrderKylo FirstOrderKylo - 4 months ago 10
HTML Question

Float: right; not floating all the way

I'm trying to make a simple footer box with some text on the left and some text on the right however when I set the right bit of text to

float: right;
it only goes about 60% of the way to the right.

Apologies if this is super simple but I've been looking at it forever and just can't get it.

Here's my CSS and HTML code for reference. (ignore the empty classes, they're for later)

CSS:

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);

html {
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 20px;
background-image: url('images/backgrounds/wallpaper.jpg');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: RGBA(255,255,255,0.6);
}

body {
width: 70%;
margin: auto;
background-color: RGBA(200,200,200,0.4);
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-bottom: 20px;
padding-top: 10px;
border-radius: 6px;
}

div {

width: 95%;
margin: auto;
background-color: RGBA(50,50,50,0.95);

}

.alignleft {float: left;}

.alignright {float: right;}

.header {

border-top-left-radius: 10px;
border-top-right-radius: 10px;

}


.main {



}

.footer{

margin: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;

}

.footerText {

font-size: 13px;
color: RGBA(255,255,255,0.3);
width: 350px;

}


HTML:

<!DOCTYPE html>

<html>

<head>

<title>Site for Things and Stuff</title>

<!-- Style Sheets/Scripts/Misc Stuff -->
<link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>

<div class='header'>HEADER TEST HEADER TEST</div>
<div class='main'>MAIN CONTENT TEST MAIN CONTENT TEST</div>


<!-- Footer -->
<div class='footer'>
<p class="footerText alignleft">No images are owned by this website unless specified.
<br><br>To recieve help with an issue on the website or other matters, please use the contact button above.</p>
<p class="footerText alignright">Test test test</p>
<div style="clear:both"></div>

</div>
</body>
</html>

Answer

Add text-align:right; in .alignright class

.alignright {
    float: right;
    text-align:right;
 }
Comments