Freid001 Posted July 20, 2013 Share Posted July 20, 2013 (edited) Hi, so I am trying to create a CSS page main up from 3 parts: 1: Main which holds parts 2 & 3.2: Left which is a panel to the left of the page. 3. Right which the main section of the page located to the right off the left panel. My problem is that the page works fine until it is collapsed to a point, where the right block drops below the left block. I am not sure why it does this. Ideally what I want to happen is when the page is collapsed the left and right blocks shrink. Any help would be great thanks! You can see what I am talking about here: http://worldwarfare-v3.atwebpages.com CSS code: #main{background-color:#FFFFFF; border-bottom:1px solid #1C2A49; height:auto; } #right{float:left; background-color:#FFFFFF; border-left: 1px solid #1F1C11; min-width:49%; max-width:79%; padding: 5px 5px; border-top: 1px solid #1F1C11;} #left{float:left; background-color:#FFFFFF; width:20%;} #full{height:auto;} Edited July 20, 2013 by Freid001 Quote Link to comment Share on other sites More sharing options...
Freid001 Posted July 20, 2013 Author Share Posted July 20, 2013 Any Suggestions? Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted July 20, 2013 Share Posted July 20, 2013 I think if they have content they'll only shrink so far before one div drops below the other. I looked at it and can't figure it out, however I placed your html code here http://validator.w3.org/#validate_by_input and came up with 14 error's. Fix them and see if that helps I would say use a minimum width but it's pretty wide when the right div falls Quote Link to comment Share on other sites More sharing options...
Freid001 Posted July 20, 2013 Author Share Posted July 20, 2013 Cool thanks. The content in the right block is held in a table. Could that be why it does not shrink properly ? Quote Link to comment Share on other sites More sharing options...
Freid001 Posted July 20, 2013 Author Share Posted July 20, 2013 I can add a min page width so that it does not drop below but will that effect some users experience as they may have to scroll horizontally? Quote Link to comment Share on other sites More sharing options...
Freid001 Posted July 20, 2013 Author Share Posted July 20, 2013 The smallest I can get the page width is : min-width:1098px; is that good or bad? Quote Link to comment Share on other sites More sharing options...
Freid001 Posted July 20, 2013 Author Share Posted July 20, 2013 Just got it down to 1024px which I think is ok? Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted July 20, 2013 Share Posted July 20, 2013 (edited) I just copied the page and css to my computer but not the header image. I then took the min width off and it worked. The only problem Is that it over rode the left column when I collapsed it. So remove you header bg image and width and see if it works. With that said the bg image shouldn't stop the collapse of the page. I'd only have min width on the left column and min width on the main of about 400-500 or so. Also you have the contents of the left column at 100% then 5px in padding, so your contents width is 100% plus (5px * 2) also was the world of warfare graphic with the jet a background image? Edited July 20, 2013 by floridaflatlander Quote Link to comment Share on other sites More sharing options...
Freid001 Posted July 21, 2013 Author Share Posted July 21, 2013 Yeah it does kind of work now but I think I will still have the min width because other wise the left column collapse too much in on its self. So not sure how to stop that cos when I give the left block a min width that stops this then the right block goes below it again.umh the world warfare graphic is just a logo for the site. Cant remember if it was supposed to be a back ground or not but what would u recommend? Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted July 21, 2013 Share Posted July 21, 2013 So I take it you didn't build this. Anyway I'd put another div inside the main div and give it the world of warfare graphic with the jet a background image, that way you'd have two background images in the two divs in the header, one with the gradient background image and the other with the graphic and jet Quote Link to comment Share on other sites More sharing options...
Freid001 Posted July 21, 2013 Author Share Posted July 21, 2013 (edited) That sounds good I will look at adding that. Yes I did make this template, what do you think of it? This is v3 template: http://worldwarfare-v3.atwebpages.com This is v2 template: http://worldwarfare.atwebpages.com Which one do u think looks better? Edited July 21, 2013 by Freid001 Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted July 21, 2013 Share Posted July 21, 2013 The first one looks fine, the I couldn't open the second one, do you need to fix the errors to increase the chances of cross browser compatibility. Quote Link to comment Share on other sites More sharing options...
Freid001 Posted July 21, 2013 Author Share Posted July 21, 2013 (edited) yeah I was trying to fix the CSS probables to try and increase the sites accessibility across multiple platforms not just laptops/PC's. I am also looking at developing a mobile version of the site too. Edited July 21, 2013 by Freid001 Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted July 21, 2013 Share Posted July 21, 2013 yeah I was trying ... to increase the sites accessibility across multiple platforms not just laptops/PC's. I am also looking at developing a mobile version of the site too. Well the very first step will be fixing your html Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.