How come the content division isn't inside the wrapper division?

I'm having an issue where my 'content' div is not staying within the 'sitewrapper' div.

The HTML code:

<div class="sitewraper">
   <div class="categorietree">
      <?php echo $categorietree; ?>
   </div>
   <div class="content">
      <?php echo $content; ?>
   </div>
</div>

The CSS code:

div.sitewrapper
{
    height:99%;
    width:100%;
    top:75px !important;
    position:relative;
}

div.categorietree
{
    float:left;
    height:100%;
    width:20%;
}

div.content
{
    float:left;
    height:100%;
    width:80%;
}

It seems like the content is not being contained properly. Can anyone point out what might be going wrong?

Answer №1

Maybe:

  1. Your scripts are manipulating DOM elements (unlikely*).

  2. You might have extra </div> tags in your dynamic injections like $content or $categorietree.

*Typically, libraries such as jQuery Mobile only affect their specific elements and do not interfere with other elements.

It's likely #2 causing the issue.

Always make sure to sanitize and clean HTML if you are injecting content dynamically!

Quick tip: Use the following function on your content before displaying it: http://www.php.net/strip_tags

Here's a suggestion...

<div class="sitewrapper">
   <div class="categorietree">
      <?php echo strip_tags( $categorietree ); ?>
   </div>
   <div class="content">
      <?php echo strip_tags( $content ); ?>
   </div>
</div>

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

Display additional information upon hovering without disrupting the neighboring elements

When I hover over a component, I want to display more details and scale it up. However, this action ends up displacing the surrounding components. Take a look at the screenshot for reference: https://i.sstatic.net/ElXvk.jpg Below is the code snippet wher ...

When using the get function, the HTML text remains unchanged

In my game, I am encountering an issue where the score does not update within my get function every time the game is played. Instead, I keep receiving null property errors. Any assistance on resolving this would be highly appreciated. I attempted to inclu ...

Add a pop of color to the container by applying a background color over the background

I am currently using the bootstrap4 framework to build this page, and I would like to incorporate a blue background color to the div that has the "globe-img" class. I attempted to achieve this by wrapping the content in an inner div (an overlay), but it re ...

When my website is viewed on a local server, it is responsive and utilizes flex and bootstrap. However, now that it is hosted online, the flex function is not working properly on the mobile site

As a novice web developer, I've created a portfolio site hosted at www.j-price.co.uk. However, I've encountered a responsiveness issue after hosting it on GitHub Pages and GoDaddy. The site displays differently compared to when it's hosted l ...

Arrange a pair of buttons side by side within a Bootstrap Div

Are you in need of a title, subtitle, and two boxes aligned closely together in the final third div? Having trouble getting 2 buttons to align center next to each other? It looks fine at certain widths but flows onto the next line at full width. <div ...

Which camera is typically activated for the getUserMedia API on mobile devices: front or rear?

When utilizing the getUserMedia API to access the camera on a desktop, it will open the web camera. This is useful for video communication, but when used on a mobile device, which camera is invoked - the front cam or rear cam? Is there a specific code ne ...

Responsive images in CSS3/HTML5 are designed to adapt to different

I am looking to implement responsive image sizing based on the webpage size. My images come in two different sizes: <img src="images/img1.jpg" data-big="images/img1.jpg" data-small="images/img1small.jpg" alt=""></img> The data-small image has ...

What is the best way to check if an email address already exists in a PHP MySQL database?

Challenge <?php mysql_connect('localhost','root','123456') or die(mysql_error()); mysql_select_db('email') or die(mysql_error()); ?> <?php if(isset($_POST['submit'])) { extract($_ ...

How can I pass a variable to withStyles in Material UI?

Here is the code I am currently working with: class StyledInput extends React.Component{ styles = (color, theme) => ({ underline: { borderBottom: `2px solid ${color}`, '&:after': { borderBottom: `2px solid ${col ...

Mobile Safari on iOS devices is known for its capability to overlay HTML5 <video> on top of everything

Although a similar question was asked 6 years ago without any answers, I am currently facing the same issue. Problem: The <video> tag in my Angular/Ionic application overlaps my image and two buttons in iOS Mobile Safari - no matter what I try! It ...

What makes text-decoration a crucial element of the foreground design?

<span>Educating children on unlocking their creative and intellectual potential through the world of Computer Science.</span> Here is the HTML code provided above along with the corresponding CSS: span { text-decoration: underline; color: red ...

Interpret the ng-model data into the input field

My challenge involves translating a value within an input. The input is disabled to prevent users from typing text into the textbox. Currently, the data is entered using ng-model and appears as shown below: <input ng-model="reason" ng-disabled="true" t ...

What other option is there instead of using a span tag?

Take a look at this illustration. <span id="s1">Goodbye</span> <span id="s2">cruel</span> <span id="s3">world</span> <span id="s4">this</span> <span id="s5">is</span> <span id="s6">a</sp ...

Switching FontAwesome Stacks on Hover

I'm facing a challenge with creating a quick animation that replaces an entire span on hover. How can I successfully approach replacing a span on hover? <h1>I am looking to have this element replaced...</h1> <span class="fa-stack fa-lg ...

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

Canvas - Drawing restricted to new tiles when hovered over, not the entire canvas

Imagine having a canvas divided into a 15x10 32-pixel checkerboard grid. This setup looks like: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var tileSize = 32; var xCoord var yCoord ...

Is there a tool available to monitor the assets being loaded by a website?

During my site review of one of our properties, I noticed it is quite messy. The .js folder alone contains 123 files, and I am unsure of how many are actually being used since each page on the site calls specific dependencies in its own header. I am curio ...

Challenges with the Task List Board

I'm facing a bit of a challenge with this task. As a newcomer to JavaScript, I've set out on a quest to create a task list board where users can input tasks along with dates and times. The goal is for these entries to appear inside a photo using ...

Do not execute the script if the window's width is below a certain threshold

I have a unique website layout that adjusts to different screen sizes, and I've incorporated some jQuery functionality. Here is a snippet of the code: <script> $(document).ready(function(){ $("#D1000C36LPB3").click(function(){$("#D ...

What is the Bootstrap method for incorporating these two lines into the code?

Can someone please help me figure out how to use Bootstrap to create a header with a TITLE that has blank borders on the top and bottom? Is it possible to achieve this design with Bootstrap? I'm new to this, so any guidance would be greatly appreciate ...