Trouble with intersecting DIV (and picture)

Question

Trouble with intersecting DIV (and picture)

I'm facing an issue with a DIV overlap on my webpage.

When the window is maximized, here's how the webpage looks:

And this is how it appears when the window is resized:

What happens is, when users scroll to the right (indicated by the red arrow) to view the content, the text/image overlaps the sidebar (as shown by the blue arrow).

So, my question is, how can I prevent this from happening or what should be the correct approach?

Below is the HTML/CSS code. I haven't provided a Fiddle link as the issue can't be replicated that way:

<!DOCTYPE html>
<head>
...

Note: The reason why the sidebar has a position: fixed is because without it, this issue occurs:

html css

Answer 1

Answer №1

The reason for this is that the sidebar is fixed in place. To accomplish your desired layout, you can try floating both the sidebar and the content to the left.

Here is a simple example to demonstrate: Code Sample

#sidebar
{
    float:left;
    background-color:#56B7BF;
    width:150px;
    height:400px;
}
#content
{
    float:left;
    background-color:#BF5E56;
    width:400px;
    height:400px;
}

Answer 2

The reason for this is that the sidebar is fixed in place. To accomplish your desired layout, you can try floating both the sidebar and the content to the left.

Here is a simple example to demonstrate: Code Sample

#sidebar
{
    float:left;
    background-color:#56B7BF;
    width:150px;
    height:400px;
}
#content
{
    float:left;
    background-color:#BF5E56;
    width:400px;
    height:400px;
}

Answer 3

Answer №2

To achieve the desired position for the side bar, use the position absolute property. You can find more information here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

  <!DOCTYPE html><head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
... (omitting the rest of the code for brevity) ...

</head>
<body>
<section><div id="sidebar">
<div id="logo"><img src="http://dummyimage.com/200x89/000/fff&text=Logo" width="200" height="89" alt="" /></div>
<ul id="menubar">
      <li ><a href="#">Link 1</a></li>
       <li ><a href="#">Link 2</a></li>
      <li ><a href="#">Link 3</a></li>
      <li ><a href="#">Link 4</a></li>
      <li ><a href="#">Link 5</a></li>

    </ul> 
    </div></section>
... (omitting the remaining body content for brevity) ...
</body>

Answer 4

To achieve the desired position for the side bar, use the position absolute property. You can find more information here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

  <!DOCTYPE html><head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
... (omitting the rest of the code for brevity) ...

</head>
<body>
<section><div id="sidebar">
<div id="logo"><img src="http://dummyimage.com/200x89/000/fff&text=Logo" width="200" height="89" alt="" /></div>
<ul id="menubar">
      <li ><a href="#">Link 1</a></li>
       <li ><a href="#">Link 2</a></li>
      <li ><a href="#">Link 3</a></li>
      <li ><a href="#">Link 4</a></li>
      <li ><a href="#">Link 5</a></li>

    </ul> 
    </div></section>
... (omitting the remaining body content for brevity) ...
</body>

Trouble with intersecting DIV (and picture)

Answer №1

Answer №2

Similar questions

The fixed header in IE8 is preventing the absolute positioned menu from displaying correctly

The layout of my website is perfect when my laptop's zoom is set to 90%, but at 100% it starts overflowing

Mastering the art of utilizing particles.js

Create an animated effect using JavaScript to toggle the classList

When using JQuery's html() function on a table cell, it may result in an error message stating "undefined is not a function."

Unable to locate element by index using XPath

What is the best way to position the section and footer to the left side of the sidenav?

What methods can I employ to utilize the name attribute for POST requests instead of the ID attribute in TinyMCE?

Issue with website header disappearing

Sliding left and right with the help of jQuery

Scroll bar displayed on a non-editable text box

How can I adjust the height of an iframe dynamically using AngularJS?

A step-by-step guide to showcasing dates in HTML with Angular

Styling columns with full height using CSS Flexbox

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

CSS properties are ineffective in scaling the image strip

In order to work with the optionSelectionChanges property of the MdSelect directive in Angular Material2, it

Gain command over the underline style of text without relying on the border property

Contrast between Identification and Category

How can we efficiently parse HTML without downloading the entire page source while being smart about it?