Position the text next to a side panel

I have been attempting to arrange some text next to a side panel that I created using Divs.

My initial attempt was to float the text on the left, but unfortunately, this did not produce the desired result.

Here is what I currently have: Click here

And this is what I am aiming for: Click here

I would like to provide you with a preview of my page along with the corresponding style sheet:

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

It's important to note that your code is vulnerable to SQL injection attacks. To mitigate this risk, consider using parameterized queries or escaping inputs properly.

https://php.net/manual/en/security.database.sql-injection.php

Additionally, ensure that both items are floated to the left:

.SidePanel { float: left; }
.WelcomeText { float: left; }

Answer №2

Don't forget to include a colon in your style declaration:

.WelcomeText {
    float: left;
}

Answer №3

To adjust the layout, consider replacing the float:left with display: inline-block in both the side-panel and welcome-text classes.

The default display property for a div is block, which would typically push it below the sidePanel div.

Switching to inline-block can quickly resolve this issue.

.SidePanel {
  background-color: white;
  width: 250px;
  height: 100%;
  display: inline-block;
}

.WelcomeText {
  display: inline-block;
}

For more information on why inline-block is preferred over float, check out:

"Using display:inline-block and text-align:right makes code maintenance easier for future developers compared to float:left or float:right." - Alexa W.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Would you like to store modified CSS properties in a cookie?

Currently, I am facing a challenge while working on an ASPX page where CSS is used to define DIV properties. Although these properties can be altered on the page, they do not reflect when attempting to print them. Is there a method to modify CSS properties ...

TinyMCE toolbar missing the "hr" option

I am encountering an issue while using TinyMCE as my editor. I have added the plugin as instructed, but I cannot find the "hr" button/option in the editor interface. If anyone has any insights or solutions to this problem, please share! This is how I am ...

What if there was a magical jQuery method that could automatically trigger a callback function? What could it possibly be named?

Is there a way to load only images and iframes, similar to the .load() function? I want to automatically add a selector element into the "this" variable for this purpose. $('document').ready(function({ $('a').<Something to trigg ...

Arranging items in a flex-row towards the right side

I am working with a layout that aligns elements to the right HTML <div class="flex-row"> <div class="flex-1"> <button class="el-button el-button--primary">Add File</button> <ul class="el-upload"> ...

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

I'm stuck trying to find a straightforward solution to this problem. The array of objects I have contains two values: team.seed: number, team.placement: string In the team.placement, there are simple strings like 7 to indicate 7th place or something ...

The data in MongoDB is organized using unique identifiers called ObjectId

I am currently working on a MEAN Crud project and encountering some issues. Despite the data being received in the mongodb, it is displaying as an objectId instead of the actual content. You can see this issue in the image below: https://i.stack.imgur.com ...

Guide to Utilizing Roboto Light/Thin Font from Google Fonts on Chrome

I'm struggling with using the Roboto fonts in Chrome, specifically with getting Condensed and Thin/Light font weights. I have downloaded all three complete fonts: @import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic, ...

Stylish CSS selector

Is there a way to target CSS path based on the style of an element? For instance, if I have two ul elements on a page - one with a style of list-style-type: lower-alpha;: <ul start="1" style="list-style-type: lower-alpha;"> and the other ul without ...

Using JavaScript/JQuery, change relative or viewport sizes to fixed sizes when the page loads

Wishing you a delightful day. As I work on my website, I find myself relying heavily on viewport units like vw and vh for all measurements such as font size, padding, margin, width, and height. These units provide the flexibility needed to ensure that the ...

Clicking on the label for Semantic UI Radio Buttons does not result in a check

Is anyone else experiencing difficulty with radio buttons not checking when the label is clicked? Oddly enough, this issue does not seem to be present on Semantic's website. For reference, here is Semantic UI Documentation where the radio buttons wor ...

The justify-content property aligns single-line text horizontally, but its alignment may not be consistent when the text expands over

Seeking a deeper understanding of flexbox alignment, I decided to experiment with aligning content using only flexbox properties. One puzzling observation is how "justify-content" centers items with single lines of text (flex-item-1 and flex-item-5), but n ...

Making modifications to index.html that is being hosted on GitHub Pages

Need to make a minor change to a website hosted on Github pages, specifically updating the title in the index.html file. Considering modifying and committing the change directly in the Github code editor for ease. Upon checking the repository's Sett ...

Identifying the presence of a CSS class in order to add styling to a different element

Looking for help with CSS: /* targeting laptops */ @media only screen and (pointer:fine) and (max-device-height: 620px) { #root:has(.projects) ~ body { overflow: auto; /* allow scrolling */ } } My desired outcome is to set overflow: auto o ...

Achieve video lazy loading in JavaScript or jQuery without relying on any external plugins

I've been experimenting with lazy loading videos using jQuery. While I've had success with lazy loading images and background-images using the same technique, I ran into issues when trying to apply it to videos. Here's what I've tried s ...

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

Looking for help positioning arrows in HTML/JS for a pop-up gallery

Currently, I am working on developing a Flask application that displays a list of videos fetched from a database in an HTML template. Upon clicking a video link, the video opens and plays in a pop-up window with arrow buttons for navigating to the next or ...

Extracting text using Python and Selenium

Having trouble extracting text from HTML using Selenium and Python innerHTML <span data-select="" data-selected="Selected" data-deselect="Press enter to remove" class="multiselect__option"><span>ONE</span></span> <!----> ...

"Using a combination of Php, Html5, and xampp for

While attempting to run this PHP file using XAMPP, I encountered an issue. I am working on updating data in a database through a form submission. However, when I input the information and click submit, the page either just reloads or displays a message s ...

Verifying CSS updates with Capybara detection

I'm in the process of developing a web application that dynamically changes its CSS styles based on user input. Everything is working smoothly, but I'm facing an issue with my automated tests not confirming whether the CSS updates are actually ta ...

Elastic canvas to always match the full size of the container or screen

I am facing an issue with my responsive canvas that should resize to fit the screen window within a div. The canvas is intended to be 1100x1100 but needs to scale based on the screen size while maintaining a square aspect ratio. The problem arises when th ...