CODEWITHSUNDEEP
htmlcss
FirstOrderKylo
FirstOrderKylo

Reputation: 99

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>

Upvotes: 0

Views: 1110

Answers (1)

jonju
jonju

Reputation: 2736

Add text-align:right; in .alignright class

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

Upvotes: 2

Related Questions