0

I have a webpage I made awhile ago, When coding I was not thinking of responsiveness and making it responsive is proving an issue.

When the window is in the original width (currently set as the min-width) the page looks like this: enter image description here

When the window is between 960px and 1380px (my max width) I get a strange mid-way white border on the right hand side of the page: enter image description here

And when the window is at or above 1380px the page looks like this: enter image description here

Please note, you may need to open the image location to see the border on the white stackoverflow background!

I have tried lots of things, such as changing the float for a margin-left margin-right align, and changing floats of alternating cells, but I can't get anything to work. I need the cells to become equally spaced while the page is being re-sized.

Here is my css for the list items currently;

#server_features li{
    width:414px;
    height:200px;
    padding:10px;
    margin:10px;
    margin-top:20px;
    margin-bottom:20px;
    float:left;
    border-width:3px;
    border-style:solid;
}

If you need anymore information, please don't hesitate to ask.

user3576711
  • 45
  • 8

1 Answers1

1

working example jsfiddle update example First: set for ul

overflow: hidden;

and remove 

position absolute;

Next remove your max and min widt and use media queries In media queries set your ul width (margin-left + margin-right + bodrer-left + border-right + padding-left + padding-right + width) in your example width for one column is 460px for 2 colums is 920px for 3 columns is 1380px etc. I used youe example and I change that what I wrote above so you can see how it's works.

mcmac
  • 1,042
  • 9
  • 13
  • 1
    no problem remove this style from #welcome min-width:960px; max-width:1380px; position:absolute; left:0; right:0; You don't will be need this when you set overflow hidden for ul #server_features you will see – mcmac Jan 15 '15 at 20:40
  • This worked well, I had to tweak a few numbers as my outline wrapper was 90% (not 100%). Other than that, perfect! – user3576711 Jan 15 '15 at 20:40