solon Posted March 22, 2011 Share Posted March 22, 2011 Hey guys i have a problem with one of my designs. I have this page designed using html/css with only div's and at the bottom of the page it show a large empty space. I read somewhere that the problem has to do with using position:relative; but i couldn't resolve the problem. Any one has any ideas as to why this is happening? By the way the code has passed the validation of w3c. (http://validator.w3.org/check?uri=http%3A%2F%2Fmkwebcy.com%2Falboro%2F) This is the link to the test page so you can see the problem as well as the code: http://mkwebcy.com/alboro/ Thanks in advance Solon Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 22, 2011 Share Posted March 22, 2011 You made your design more difficult than needed, you are using loads of min widths to compensate for that. This could have been done with just floats. position relative or absolute is not needed here. Besides that your wrapper div, is smaller than the contents,. have a read on overflow:hidden instead of setting a fixed height. Although that article is aimed at people using a clearfix, if you read it well, you can apply the same to your site. Other wise your clients will call you within a week that they can make the page grow in height. Quote Link to comment Share on other sites More sharing options...
solon Posted March 22, 2011 Author Share Posted March 22, 2011 Thanks cssfreakie, i will try that. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 22, 2011 Share Posted March 22, 2011 No problem, If you take a pen and pencil, for the way this site is made. you will notice you have 1 wrapper div Give it a fixed width and set overflow hidden. Than place the content and use floats to put block on the same line and clear to start at a new line. this design could be done completely without any positioning relative. Quote Link to comment Share on other sites More sharing options...
solon Posted March 22, 2011 Author Share Posted March 22, 2011 Great, i did not know that could be done without positioning. Although now that you mention it , it's logical. I'll have to use margins and paddings for spacing between elements though right? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 22, 2011 Share Posted March 22, 2011 well it depends on your design how much padding and margin you use. Just remember padding is to add extra background around an element and margin is for transparent space. It's all about the boxmodel and using float and clear the proper way Quote Link to comment Share on other sites More sharing options...
solon Posted March 22, 2011 Author Share Posted March 22, 2011 Excellent!! Thank you very much cssfreakie . Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 22, 2011 Share Posted March 22, 2011 Excellent!! Thank you very much cssfreakie . cheers! good luck on the hunters website Quote Link to comment Share on other sites More sharing options...
solon Posted March 22, 2011 Author Share Posted March 22, 2011 Thanks!!! 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.