Have text sit next to a side panel

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;
}

score 1 · Answer 1 · answered Jul 14 '16 at 20:03

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; }

answered Jul 14 '16 at 20:03

Josh K

765
3
11

Thanks, I'm not very pro at all this website stuff, I'm only using localhost as it's just for a computer science project. Would this matter? – Jamie Blacknell Jul 14 '16 at 20:09
1

If it isn't public-facing, then there is no harm that could come of it, but it is important while you are learning to get in the habit of always doing things the right way. Especially something like this, because you really don't want to mess that up in the real world. Also, your professor might notice and take points off or at least say something about it. – Josh K Jul 14 '16 at 20:16

score 0 · Answer 2 · answered Jul 14 '16 at 20:03

0

You are missing : in your style,

.WelcomeText {
    Float: left;
}

answered Jul 14 '16 at 20:03

score 0 · Answer 3 · edited May 23 '17 at 11:58

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.

Have text sit next to a side panel

3 Answers3