divs overflowing [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

---

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 3 years ago.

Improve this question

I have been having trouble for many days, and have asked several related questions in regards to these issues. My main question here is how to stop my divs from overflowing. I just managed to fix a problem with them being wrapped onto a different line.

Here is a fiddle.

And here is a snippet:

#main-content {
  padding: 0% 15% 0% 15%;
  overflow: hidden;
  height: 620px;    
  clear: both;
  width: 70%;
  border-style: solid;
  border-color: #31679a;
  border-width: 0px 0px 2px 0px;
}

#side-bar { 
  float: left;  
  max-width: 28%;       
  height: 99%;
  padding: 1% 1% 0% 1%;
  font-size: 14px;
}

#container {
  float: left;
  max-width: 68%;
  height: 100%;
  padding: 1% 1% 0% 1%; 
}

Main content contains both sidebar and container, which sit side by side (with the sidebar to the left)

You can see in the main content area, that the container overlaps the sidebar at certain widths, instead of stopping at it's edge. This also happens with the images in the header, but that doesn't show in the fiddle.

I would greatly appreciate any help.

Answer 1

As a quick fix, adding the following code to your CSS would stop the links from wrapping onto a new line:

#sidebar a {
    white-space: nowrap;
}

However your real problem is that your sidebar div isn't wide enough to contain its content.

You should also be using divs instead of tables for layout purposes: read why here.