Have text sit next to a side panel - html

Question

I am trying to make some information sit next to a side panel I have created using Div's.
I have tried to float the text on the left but this hasn't worked.
Here is what I have
Click here
And this is what I want
Click here
I'll show you my page and the style sheet I'm using as well :D
Page:
FitnessHub
<div class="SidePanel">
Text
</div>
<div class="WelcomeText">
</div>
<?php
$db = new mysqli("127.0.0.1", "root", "root", "fitnessbooking");
$query= $db->query("select Username from users where Username = '$_POST[username]' and Pass = '$_POST[password]'");
if ($query->num_rows ==1){
echo "";
}
else {
header("Location: http://localhost/pages/login.php?fail=1");
exit;
}
?>
</body>
</html>
Style Sheet:
.SidePanel {
background-color: white;
width: 250px;
height: 100%;
}
.WelcomeText {
Float left;
}

Answer 1

First, be advised that you code is susceptible to SQL injection attacks. You should be using parameterized queries or at least escaping them.
http://php.net/manual/en/security.database.sql-injection.php
Second, float both items left:
.SidePanel { float: left; }
.WelcomeText { float: left; }

Answer 2

You are missing : in your style,
.WelcomeText {
Float: left;
}

Answer 3

You could remove the float:left and add display: inline-block; to both the side-panel and welcome-text classes.
The default display property for a div is block, which means it would be forced below the sidePanel div.
So a quick way around this is to use the inline-block property.
.SidePanel {
background-color: white;
width: 250px;
height: 100%;
display: inline-block;
}
.WelcomeText {
display: inline-block;
}
Here is a great explanation of why inline-block is now preferable to float: https://stackoverflow.com/a/15177860/5995092
"A huge benefit of display:inline-block is that when other developers are maintaining your code at a later point, it is much more obvious what display:inline-block and text-align:right is trying to accomplish than a float:left or float:right statement." - Alex W.