Member Avatar for Monkey101

My right column is overlapping into my main content column how do I prevent this from happening? I tried using overflow: hidden; and overflow: auto;. I used the clear property for my left and main column which worked to prevent them overlapping.

  • 2 Contributors
  • 3 Replies
  • 197 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Monkey101

Dani AI

Generated

Quick diagnosis and context drawn from the posted markup: a sidebar that overlaps the main column most often points to mismatched widths, floats/positioning, or broken document flow. The markup shows some red flags (an empty clear declaration on the right column, many blocks forced to clear, and a negative top margin on the outer wrapper). ’s request for the stylesheet is relevant — the CSS usually holds the definitive cause — but the checklist and patterns below address the common failures that produce overlap.

Useful troubleshooting checklist:

  • Inspect computed widths, padding and margins in browser devtools to see which box is wider than expected.
  • Temporarily toggle float/position rules on the sidebar to observe flow changes.
  • Validate HTML structure (li elements should be inside a ul/ol; unclosed tags can break layout).
  • Look for absolute positioning or z-index on the sidebar.
  • Check total of main + sidebar widths (include padding, borders unless using box-sizing: border-box).
  • Remove negative wrapper margins and any empty clear: declarations.

A modern, robust layout that prevents overlap uses Flexbox. Example CSS pattern:

.row { display: flex; align-items: flex-start; gap: 20px; }
.main { flex: 1 1 auto; min-width: 0; } /* avoids overflow of long content */
.sidebar { flex: 0 0 300px; }          /* fixed sidebar width */

Float-based fallback (common on older pages):

.container { overflow: auto; } /* clearfix */
.main { margin-right: 320px; } /* leave room for sidebar */
.sidebar { width: 300px; float: right; }

Final notes: a quick debug trick is applying temporary outlines/backgrounds to each column to reveal boundaries. Prefer Flexbox for new layouts; for legacy float layouts, ensure the container establishes a block formatting context and that main+sidebar widths never exceed the wrapper.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

It would really help if you provided a link to your site, or your code.

Member Avatar for Monkey101

My html code

<head>
<title>Sample</title>
<link rel ="stylesheet" type= "text/css" href="SampleWeb_Killebrew.css"/>
</head>

<body>
<div style="width:100%; margin-top: -18px;">
    <div style="width: 100%; height: 100px;  background-color: white;">
    <p style="padding-top: 3%;font-size:30px; font"><i>Welcome to Marketing page </i></p>
     </div>  

    <div style="width: 100%; overflow: hidden;">
    <div><li><a href="#" class="nav">About</a></li></div>
    <div><li><a href="#" class="nav">Books</a></li></div> 
    <div><li><a href="#" class="nav">Electronics</a></li></div>  
    <div><li><a href="#" class="nav">Apparel</a></li></div>
    <div><li><a href="#" class="nav">Activities</a></li></div>
    <div><li><a href="#" class="nav">Engagement</a></li></div>
    </div>

    <div class="thumbnail">
    <p class="center"><img src="Images/Books.png" alt="Books" width="325" height="290"/>
    <img src="Images/PC-Mac.jpg" alt="PC-Mac" width="325" height="290"/></p>
    </div>

    <div style="float: left; background-color: white; margin-left: 80px;">
    <img src="Images/Apple.jpg" alt="Apple" width="225" height="125"/>
    </div>

    <div style="width: 100%;">
    <div id="left-col" style="clear: left;">
    some text
    </div>

    <div id="central-col">
    some text
    </div>   

    <div id="central-box" style="clear: both; text-align: center;">
    some text
    </div>

    <div id="central-box2" style="clear: both; text-align: center;">
    some text
    </div>       

    <div id="central-box3" style="clear: both;">
    some text
    </div>

    <div id="central-box4" style="clear: both;">
    some text
    </div>

    <div id="right-col" style="text-align: center; clear:">
    some text
    </div>

    <div id="right-box2">some text</div>  

    <div id="right-box3">
    some text
    </div>

    <div id="right-box4" style="text-align: center;">
    some text
    </div>
    </div>

    <div id="footer"><p style="text-align: center;">Web-page</p> </div>
</div>
</body>
</html>
Member Avatar for Monkey101

CSS file

CSS.zip (0.66 KB)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.