ldinet007 Posted October 20, 2011 Report Share Posted October 20, 2011 Hello guys........ i have question that i want to put in this forum and the question is "How to maintain two div's in a horizontal line so that all the width of the screen covered by those two divs." Now as i have put two divs in a horizontal line where first DIV acts as a left menu bar where as the second DIV acts as the content. I have used the float property to make them in a horizontal line but as the screen width is not same of all computers it is raising two problems: 1. For less width screen the div tag for the body content come down to the div of menu bar. 2. For larger width screen a gap is creating between those two divs. Please suggest me a solution that overcome this screen resolution problem. Thanks.......... Quote Link to comment Share on other sites More sharing options...
Andrea Posted October 20, 2011 Report Share Posted October 20, 2011 You can apply a width in percent - example, give your menu bar 25% and the content div 75% - or you can give your nav div a set width and a percentage to the content div. You can float both those divisions, or you can float just one. HOWEVER - consider this: People's screens and with that, resolutions, are growing. Once your site starts getting too wide, it'll take some tennis-action from your eyeballs and/or entire head to follow your content right to left - not a good way to read. A better solution (in most cases) is to put your content into a set width wrapper to fit the lowest, most-viewed resolution. Center it with margin: 0 (or whatever you want your top and bottom margins to be) auto - and let the background adjust to whatever size people view. Your actual content and nav will stay the same. Here's an example of one of these options: http://how-to-build-websites.com/2011/center-aligned-webpages-with-html-and-css/ Quote Link to comment Share on other sites More sharing options...
BuildMyWeb Posted May 18, 2012 Report Share Posted May 18, 2012 A better solution (in most cases) is to put your content into a set width wrapper to fit the lowest, most-viewed resolution. Center it with margin: 0 (or whatever you want your top and bottom margins to be) auto - and let the background adjust to whatever size people view. Your actual content and nav will stay the same. agreed. your columns will want to be fixed width as well in this case 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.
Note: Your post will require moderator approval before it will be visible.