Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with div 100% width overfflowing to the right?

Status
Not open for further replies.
dlwhitehouse

dlwhitehouse

Programmer
Dec 14, 2005
2
GB
Hi Guys

Ive got a problem where ive got a 120px menu on the left hand side (floated or absolute doesnt make a difference) and then ive got a content div to the right of it to hold all the main content...

however when i set the percentage of this content div to 100% it overshoots to the right of the screen by an extra 120px

This happens on both IE and firefox. Ive tried creating a div for the content then a div within that to set the 100% precentage and that doesnt work, only fix can see is setting the content div width to 87% instead of 100% but it doesnt look very good when re-sized and not the ideal solution.

Any help would be much appreciated! Thanks
 
Sort by date Sort by votes
Incidentally, it will make a difference if the nav is floated or absolutely positioned. However, I can't advise which is best for your needs without knowing more about the site layout (how the page extends downwards, etc).

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi, thanks

yeh I already tried adding 'margin-left:120px' in replace of 'left: 129px;' and it did exactly the same

Ive also tried using both float and absolute positions and still no joy?
 
Upvote 0 Downvote
Here is some code:


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Categorical Working Categorical Test</title>
<style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            height:100%;
        }

        div#content {
            position: absolute;
            margin-left: 121px;
            background-color:#F60;
        }
        
        div#menu {
            position: absolute;
            width: 120px;
            height: 100%;
            background: #999999;
        }
    </style>

</head>
<body>
<div id="menu"></div>
<div id="content">
  <p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
  <p>eeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
  <p>eeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
  <p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeee eeeeeeeeee eeee eee eeeeeeeeeee eeeeeeee e eeeeeeeeeeeeeeee eeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeee </p>
</div>
</body>
</html>

oh, I also corrected your code to use margin-left which is the categorically correct method.... ;-)

A smile is worth a thousand kind words. So smile, it's easy! :)
 
Upvote 0 Downvote
OK, one last time, just in case some poor innocent stumbles across this thread at a later date and wants real working code, rather than farsical stuff:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Categorical Working Categorical Test</title>
<style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            height:100%;
        }

        div#content {
	    margin-left: 121px;
            background-color:#F60;
        }
        
        div#menu {
	    float:left;
            width: 120px;
            height: 100%;
            background: #999999;
        }
    </style>

</head>
<body>
<div id="menu"></div>
<div id="content">
  <p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
  <p>eeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
  <p>eeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
  <p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeee eeeeeeeeee eeee eee eeeeeeeeeee eeeeeeee e eeeeeeeeeeeeeeee eeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeee </p>
</div>
</body>
</html>


A smile is worth a thousand kind words. So smile, it's easy! :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
744
3esolar
3
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
737
bdwilcox
bdwilcox
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
211
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top