Jump to content
Stef's Coding Community
Sign in to follow this  
ldinet007

Maintaining The Width Of The DIV

Recommended Posts

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..........

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...