The div does not extend fully across the page

I have tried following similar instructions on Stackoverflow but to no avail. Even after setting margin:0 and padding:0 in my code, the issue persists.

The first div represents the side bar, the second div is the content (blue), and there is mysterious white space on the right. This whitespace does not belong to a third div, it simply exists as empty space. I am looking to eliminate this unwanted white space.

https://i.sstatic.net/fOfym.png


Here's how my CSS/HTML looks:


       #dashboard {
           width: 100%;
       }
       
       #content {
           float: right;
           width: 80%;
           overflow: hidden;
           background: aqua;
       }
       
       #sidebar {
           font-family: "Open Sans";
           /* More styles... */
       }
    

      <section id="dashboard">
          <div id="sidebar">
              <!-- Logo -->
              <div id="logo"><img src="img/FDMxLogo.png" /></div>

              <!-- Nav -->
                <a class="mob-nav"> </a>
              </nav>
          </div>
        
          <div id="content">
            <a href="create.php" class="add">Add Graph<br></a>
            <br>
            <br>
            <br>
            <?php echo $div;?>

             <button style="margin-top:0em;width:100%; " type="submit" onClick="remove();">REMOVE</button>
        </div>
    </section>
   

Answer №1

Why not make a simple tweak and see the difference?

I made a small change by adding

display:table;

to #dashboard. I eliminated the float property from both #content and #sidebar. I also got rid of the width percentages in both, keeping only the width:220px for sidebar.

Next, I included

display:table-cell;

for both #content and #sidebar elements.

Check it out on Fiddle:https://jsfiddle.net/r5jcv2yu/

Answer №2

It seems like the 80% width on #content is causing some issues. Additionally, you have applied the width property twice on #sidebar.

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

Adjust the background color of a non-selected Material-UI checkbox

Currently, I am working with a combination of React-Redux and Material-UI to style my project. Within this setup, I have a checkbox component that is placed on a toolbar with a blue background color (#295ED9). So far, I have successfully altered the color ...

Z-Index Problem with PureCSS Horizontal Scrollable Menu

I've been working on this issue but can't seem to get it right. I have a purecss menu with a horizontal scrollable feature, but the submenus at depth 1 and 2 don't appear on hover in Firefox and Safari - they are being hidden underneath. I ...

Using Bootstrap to create a fixed footer on a webpage

Is there a substitute for navbar-static-bottom? I currently have my footer set up like this: <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text pull-left">&a ...

Display a <div> element styled using CSS3

Question: I am facing a challenge with CSS3 styling. I have one class and one div. The class is currently set to display:none, but I want it to show when the mouse hovers over it (display:block). I have attempted the following: .1:hover + div#2 { dis ...

Using a single datalist in HTML5 to define options for multiple input elements

When working with HTML5, I discovered that you can create multiple input elements that share the same option list like this: <datalist id="list1"> <option value="A"> <option value="B"> </datalist> input1: <input list="l ...

OutOfMemoryError caused by Bitmap

I'm experiencing an issue with this error. I created a favicon parser from URLs using the following code: public class FavIconParser { public static String extractUrl(String url) { StringBuffer sb = new StringBuffer(); Pattern p = Pattern.co ...

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

Position the div to align with just one side of the table-cell

I am struggling with making the height of my code dependent on only the left column, while still allowing the right column to be scrollable if it contains more content than the left column. Despite my best efforts, I can't seem to figure out how to a ...

Retrieving the selected value from a dropdown menu without having to click on a

I'm facing an issue with 2 dropdown menus outside of an HTML table that is generated by PHP code. There's a submit button within this table, and here's how it's set up: <!doctype html> Select Year: ...

The art of spinning in CSS

Can anyone help me figure out how to make an animation in CSS stay at its last frame instead of reverting back to the beginning? The <i>animation-fill-mode: forwards;</i> property doesn't seem to be doing the trick. Is there a workaround ...

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

Implementing a function trigger upon selection in JavaScript

I'm currently studying JavaScript and working on a basic project that involves generating random strings of different lengths. If you're interested, feel free to check out my codepen code [here][1]. My question revolves around the functionality ...

Are there any methods to achieve smoother font icons on Firefox?

When it comes to using icons on different browsers, I've noticed an issue. Icons appear sharp on Google Chrome and Opera, but when viewed on Firefox they tend to look blurry if the font-size is less than 20px. Strangely enough, once the font size reac ...

Looking for an API to retrieve random quotes and images from a website?

Greetings, my name is Antika. I recently embarked on a coding journey and have been focusing on learning HTML/CSS along with the basics of JS. Level of Expertise: Beginner During my exploration, I stumbled upon this intriguing website - . It stands out a ...

The arrow extends just a hair below the boundaries of the div, by approximately 1 pixel

I am facing an issue with my nav bar code. In Firefox and Chrome, everything works perfectly fine - there is a small arrow displayed below the links when hovered over. However, in Internet Explorer, the arrow appears slightly below the div, causing only pa ...

How can I shift the button's location within a pop-up in Ionic 1?

enter image description here I am struggling to make the button green underneath the three other buttons. Can someone please assist me with this? Here is my code: $scope.showIntroductionPage = function(childs){ if(childs == 0){ var myPopup = $io ...

Troubleshooting issues with document.querySelectorAll in JavaScript

Can someone explain why document.querySelectorAll isn't functioning properly in this code snippet? I'm a beginner and could use some help. <p id="demo">This is a paragraph.</p> <h1 id="1demo"> Hello </h1&g ...

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Seeking advice on troubleshooting a CSS keyframes animation issue. I have created an animation with 5 frames where the background image fades and transitions to the next image smoothly in all cycles, except for the first cycle where it glitches before each ...

Why do certain full screen websites not align with my screen width properly?

When I use my 1920px wide screen and inspect the HTML tag with Chrome DevTools on websites like Firebase or Facebook Messenger, I notice a difference: https://i.sstatic.net/1nknq.png Despite my screen width being 1920px, these websites appear fullscreen ...

Exploring scraping capabilities in Node.js

Currently, I am in the process of developing a scraping engine using Node.js to collect data for my currency exchange graphs. I am utilizing request and cheerio for this task. However, due to some bank websites not following standard HTML practices by not ...