the side panel is positioned under the main content

Can anyone help me figure out why my sidebar is not positioning correctly next to the content on the right side? No matter what I try, it keeps going underneath the content. Here's the CSS code I'm using:

body {
    font: 10pt Calibri, Helvetica;
    background: #E8E8E8;
    margin: 0;
}
h2 {
    font-size: 1.1em;
    color: #1C1C1C; 
    margin-bottom: 0;
}
#wrapper {
    width: 990px;
    margin: 0 auto;
}
#header{
   width:100%; 
   height:150px;
   background-color:#0000FF;
   color:#1C1C1C;
   font-size: 20px;
}
#sidebar {
    width: 250px;
    height: 300px;
    float: right;
    background: #FF69B4;
}
#content {
    background: #FF4500;
    margin-right: 220px;
    width: 700px;
    word-break: break-all;
    color:#1C1C1C;
    font-size: 10px;
}
#footer {
    height: 50px;
    color: #fff;
    background: #000;
    clear: both;
}

This is part of one of my pages:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<table border="0" cellpadding="50">
<tr>
<th><a href='/first.php' target="content" style="color: #E8E8E8">Home</a></th>
<th><a href='/search.php' target="content" style="color: #E8E8E8">Search</a></th>
<th><a href='/2.php'target="content" style="color: #E8E8E8">Ask Question</a></th>
<th><a href='/3.php'target="content"style="color: #E8E8E8">Contact Us</a></th>
<th><a href='/all_list.php'target="content" style="color: #E8E8E8">Admin Panel</a></th>
<th><a href='/category.php'target="content" style="color: #E8E8E8">Categories</a></th>
</tr>
</table>
</div>
<div id="wrapper">
<div id="content">
<h1 align="center">Administrator Page</h2>
<?php
 $conn = mysql_connect ("localhost", "root", "") or die ("Unable to connect!");
 mysql_select_db('university'); 
 mysql_query("SET NAMES 'utf8'");
 echo '<table border="1" cellspacing="0" cellpadding="12" align="center">';
 echo '<thead>';
 echo '<tr>';
 echo '<th>ID</th>';
 echo '<th>Name</th>';
 echo '<th>1</th>';
 echo '<th>2</th>';
 echo '</tr>';
 echo '</thead>';
 echo '<tbody>';
 $res = mysql_query("SELECT * FROM news");
 while($news = mysql_fetch_assoc($res)) {?>
 <tr>
 <td><a href="detail.php?id=<?=$news['id']?>"><?=$news['id']?></td>
 <td><a href="detail.php?id=<?=$news['id']?>"><?=$news['program']?></td>
 <td><a href="delete.php?id=<?=$news['id']?>">Delete</td>
 <td><a href="edit_form.php?id=<?=$news['id']?>">Edit</td>
 </tr><?
 }?>
 </tbody></table>
 <form name="add" action="add_form.php">          
 <p><input type="submit" value="Add Program"></p>
 </div>
 <div id="sidebar">
<h2>Here i will have sidebar</h2>
</div>
</div>
</body>
 </html> 

Answer №1

It seems like your calculations are a bit off: the #wrapper is currently set to 990px.

The sum of #content width, #content margin, and #sidebar width is...
700px + 220px + 250px = 1170px

To resolve this issue, you can either increase the wrapper size or decrease the margin on #content.

Answer №2

Your website layout needs some adjustments. The header has a width of 100%, while the wrapper is set to 990px.

  1. You can choose to use either percentages or pixel values consistently.
  2. Make sure the widths of your inner divs do not exceed the parent container by using margin and width correctly.
  3. Apply float:left to the ID content and sidebar, and specify their widths in percentage.
  4. Inspecting with Firebug, I noticed that the div with the ID slidebar is nested within a tag.

By resolving these issues, your layout should be fixed and look much better.

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

What is the best way to retrieve classes from arrays and apply styling to them using javascript?

Imagine having 3 unique classes: alpha, beta, and gamma. Each class contains 3 individual div elements like so: <div class="alpha"></div> <div class="alpha"></div> <div class="alpha"></div> <div class="beta">< ...

In what way is the JavaScript file able to locate the dependencies following the execution of npm install?

Upon receiving a javascript file named "neededjavascriptfile.js" along with a package.json file, I am faced with the task of running it in an html index file while utilizing certain functions from the javascript file. After executing "npm install --omit=d ...

Creating dynamic image carousels using the latest versions of Bootstrap and AngularJS

I have created an array that stores various images using angularJS: $scope.docImg = [ '../../Content/Image/BackGrounds/abra.png', '../../Content/Image/BackGrounds/background_black.jpg', '../../Content/I ...

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

Display one div and conceal all others

Currently, I am implementing a toggle effect using fadeIn and fadeOut methods upon clicking a button. The JavaScript function I have created for this purpose is as follows: function showHide(divId){ if (document.getElementById(divID).style.display == ...

Identify and forward to the mobile-friendly version of the site

I am currently working on a website that requires separate files for mobile view as the html layout poses challenges in making it responsive. My goal is to find code that can detect if the user is accessing the site from a mobile device, and automatically ...

Looking for CSS templates for improving your business web apps?

Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...

Combining images with PHP

I have a collection of numerous images that are all the same size in terms of width and height. In total, there are over 50 unique images. My goal is to combine these images along both the horizontal (X) and vertical (Y) axes. Specifically, I would like ...

Creating a blank grid using ng-repeat in angularJS

I'm attempting to create an empty grid using angularJS, but I've only been working with it for 2 days so I'm not very experienced. This is what I have come up with so far: <!doctype html> <html ng-app> <head> < ...

Transform colored svg:image elements into grayscale when clicked upon by utilizing d3

Visit this site I'm attempting to change all SVG images created using d3.select to grayscale by using the following function: JavaScript: <script> function convert() { d3.selectAll("image") .style('filter', 'graysc ...

The resource could not be loaded: net::ERR_FILE_NOT_FOUND error encountered when trying to load <img> tag

I attempted to insert an image using the 'img html tag' on my page (index.html). The image is located in the folder (imgs) within my project directory (Book_Store). Despite my efforts, I encountered this error message: Failed to load resource: ...

Will the identifier "id" be considered unique if the element with the matching id has its display property set to "none"?

Imagine you have a DIV element in your document with the id "row". Now, if you add another DIV with the same id and change the display property of the first DIV to "none", does the id of the second DIV become unique? ...

Achieving label center alignment within a Bootstrap 4 container

Can anyone help me with centering the labels within the container? I'm encountering difficulties uploading an image to a website, so I've included a URL link as an alternative. To prevent the labels from filling the entire fluid container, I&ap ...

Steps to insert a logo into a Bootstrap navbar

Hey there, I'm having trouble fitting my logo into a Bootstrap navbar. The issue is that the logo appears larger than the navbar itself, and I've tried various solutions without success. Can someone please assist me with this problem? Below is th ...

The text in the image caption has been drastically reduced along with the size of the image

Currently, I am dealing with the following code: <div style="min-width: 1000px;"> <p> Some text </p> <div class='div_img_left'> <img src="images/sth.png" alt="missing image" style="max-width ...

Safari shows a contrasting outcome

Having an issue with compatibility in the safari browser You can check out the site here: The problem lies with the text inside the image, I want it to display properly like it does in Chrome. Here is the desired result for Safari as well. Below is the ...

Can you please explain the primary distinction between these two identification numbers?

Can you explain the distinction between the following two css ids? p#id1 { insert code here } and #id1 p { insert code here } ...

CSS absolute positioning not functioning as expected

I am experiencing an issue with positioning child elements within a parent element. The parent element is relatively positioned, while the two child elements are absolutely positioned to be in the top left and top right corners. However, despite having exp ...

Press the button to automatically scroll to a designated div section

One of the challenges I'm facing involves a fixed menu and content box (div) on a webpage. Whenever I click on the menu, the content box should scroll to a specific div. Initially, everything was working fine. Here is a sample of it in action: http ...

Using Bootstrap 3 to create a carousel with a seamless fading transition as the background

I want to utilize Bootstrap Carousel as the background for my website. I've successfully incorporated a standard carousel as the background, but I'm encountering difficulties with making fade transitions. Here is my current implementation: HTML: ...