divs overflowing

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.

you either need to add box-sizing:border-box to your container and side bar (only works on newer browsers) or make sure that width + padding + margin doesn't add up to greater than 100% — Pete, Feb 13 '14 at 11:59

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

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.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 13 '14 at 11:57

James Thomas

178
4

Interesting, that's certainly useful information and I'll have to scrap those tables. I get that my sidebar isn't wide enough, but that's part of my problem. Would I be better off using static widths for the whole mid section of my website, and setting them to optimal widths that work well across most resolutions, and leaving the header and footer to be 100% and adjust accordingly? – dweeman Feb 13 '14 at 12:07
Okay I forgot to account for those 1% padding on the left/right of the sidebar and container, and adjusted their widths accordingly, which fixed the hiding problem. But still at certain widths the container is overlapping the sidebar. – dweeman Feb 13 '14 at 12:14
The main issue, really, is that your #main-content div is only 70% of the page width, which in turn limits the width of the two elements contained within it. Try changing that to, say, 80%, and it will make a fair bit of difference. Making divs wider also gives you more scope to add padding. – James Thomas Feb 13 '14 at 12:15
Yes but I would like to keep the 15% padding on the left and right of all the main content, but also want to keep a total width of the div at 100%, so the width has to be 70% – dweeman Feb 13 '14 at 12:18

divs overflowing

1 Answers1