Member Avatar for yaragalla_mural

Hi I have some problem with body margin and unable to fix it. any help will be appreciated. Thanking you. My code is as follows

<body style="margin-left:60px;width:970px">

with the above code i am able to reduce the body width to 970px but unable to control body right margin. No matter what the value i give for "margin-right" the right margin takes the entire width of the browser. how to resolve this?

Edited by pritaeas because: Added markdown.
  • 3 Contributors
  • 13 Replies
  • 254 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by yaragalla_mural
Member Avatar for JorgeM

Do you have this online or on jsfiddle.net so that we can see what you mean..at least I do not clearly understand the issue. You've already assigned a left margin to the body element and it has a width...so what is the right margin for? What are you trying to accomplish?

Edited by JorgeM
Member Avatar for yaragalla_mural

suppose my screen resolution width is 100px so the browser width by default is 100px(think it is). now when i define the body element with width=970px by default the right margin does not restrict itself to the width of the body. even though the body size is restricted to 970px but there is right margin for the rest of the browser width, I mean the element still occupies the entire browser width which i dont want. I have solved this by positioning to absolute.

Now the problem is the browsers horizontal bar. A horizontal bar appears in the browser when i load the page. how to avoid this why is horizontal scroll bar appearing even when the body is lower than the width of browser?

Member Avatar for yaragalla_mural

Please run the following code in jsfiddel you will be able to see a horizontal scroll bar appearing

<body style="position:absolute;margin-left:60px;width:970px">
    happy
</body>

Kindly help me resolve this?

Member Avatar for JorgeM

I'm not sure if I understand, but what I am interpretting is that you want a maximum width of 970px? if so, then it would be...

<body style="margin-left:60px;max-width:970px">
    happy
</body>
Member Avatar for EvolutionFallen

I think you need to brush up on your understanding of the box model.

when i define the body element with width=970px by default the right margin does not restrict itself to the width of the body

Margins are not supposed to restrict themselves based on width. Margins goes outside of the box, they push the box away from the edges of the element containing them. So if your <body> has margin-left: 60px, your document body will have its left edge 60px from the left edge of the document window.
As for the right margin, it will basically be ignored if the containing element is wider than margin-left + width + margin-right. It will also be ignored if there is no sibling element sitting alongside it (with float, for example), and possibly in other cases as well.

Why are you trying to add a margin-right to the body?

Member Avatar for JorgeM

Why are you trying to add a margin-right to the body?

I found that odd as well as that's why I had asked for more information about the objective here. If this is about content, I would tend to think it be more appropriate to start with a div element in the body and apply the appropriate margins, padding, etc.. I assume there is some reason for this.

lets see the response..

Member Avatar for yaragalla_mural

hi my screen resolution width is "1366px". so my browser width on my machine is "1366px" so if i define the body width as "970px" and max-width:970px still the body element including its margins occupying 1366px . this i have solved by using the body position as absolute. I am using chrome. you can see the margin easily by using chrome developer tools. but the problem now is with browsers horizontal bar? why is it appearing even when my body is only 970px? it is less than browsers width that is "1366px". how to avoid this scroll bar? if you want to see the horizontal scroll bar just save the above code as html and try to load in any browser. i have tested this on chrome and firefox.

Member Avatar for EvolutionFallen

Things would be a lot clearer if you provided full information. You've indicated your left margin for us, but never your right margin.

Your screen resolution is irrelevant. You can't design for your own monitor unless you are the only one using the site, as others will have screens of varying resolutions. I have three monitors for my setup, with two at 1920x1080 and one at 1440x900. If you are basing your margins based on your own resolution, what happens when someone with a different resolution views it?

I'll ask again, why are you adding a margin-right? Are you trying to center your <body> element? If so, you should be using margin-left: auto; margin-right: auto;, or in shorthand margin: 0 auto;.

Member Avatar for yaragalla_mural

hi i am not sure why it is being misunderstood. what i am designing, whether i only will be using and what my screen resolution is irrelavent. I tried to explain what the problem is? why right margin, is also not that important. That is not the problem now. Those problems are gone. Please ignore those things.

The current problem is there is a horizontal scrollber appearing in the browser. Even if i use auto in the body for margin still the horizontal bar appears. I want to avoid that as it is not necessary because the body is lesser than screen width.

Member Avatar for EvolutionFallen

I understand, I was trying to determine if the margins set might be expanding the width of the document. The issue must be coming from some other HTML/CSS, as the code you provided earlier would not cause scrollbars to appear in a window that is wider than 1030px.

Member Avatar for yaragalla_mural

i am uploading the complete html with this post. Please have a look at it.

<!-- saved from url=(0046)http://localhost:8080/ums/jsp/lv/voteTopic.jsp -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
				
		<title>Voting Topic</title>
	</head>
	<body style="margin:0 auto;width:970px;">
		<form action="http://localhost:8080/ums/jsp/lv/createVotingTopic.action" method="post">	
			<div style="position:relative;left: 0px; top: 0px; width: 970px; height: 30px;text-align:center;text-decoration: underline;"><h2>Create Voting Topic</h2></div>
		  	




  
 	

			<div style="position:relative;height:312px;margin-top:30px;width:970px">
				<div style="position:absolute;left: 0px; top: 0px; width: 970px; height: 190px;">
					<div style="position:absolute;left: 0px; top: 80px; width: 300px; height: 30px"><b>Topic That Should Be Open For Voting :</b></div>
					<div style="position:absolute;left:300px;top: 0px; width: 670px; height: 190px;"><textarea rows="10" cols="80" name="votingTopic.votingTopic"></textarea></div>
				</div>				
				<div style="position:absolute;left: 0px; top:190px; width: 970px; height: 80px;">
					<div style="position:absolute;left:0px;top: 0px; width: 300px; height: 40px;"><b>Voting Options :</b><br>(Max Options : 8)</div>
					<div style="position:absolute;left:300px;top: 0px; width: 670px; height: 60px;">
					
						<input type="text" size="20" name="votingTopic.options">
						<input type="text" size="20" name="votingTopic.options">
						<input type="text" size="20" name="votingTopic.options">
						<input type="text" size="20" name="votingTopic.options">
						<br>
						<input type="text" size="20" name="votingTopic.options">
						<input type="text" size="20" name="votingTopic.options">
						<input type="text" size="20" name="votingTopic.options">
						<input type="text" size="20" name="votingTopic.options">
					
					</div>				
				</div>
				<div style="position:absolute;left: 0px; top:270px; width: 970px; height: 420px;">
					<div style="position:absolute;left: 480px; top:0px; width: 970px; height: 40px;"><input type="submit" value="Submit" style="height: 40px; width: 150px;background:lightblue"></div>
				</div>
			</div>
		</form>
	
</body></html>
Member Avatar for yaragalla_mural

when i check with developer tools it says the document size is 1640. I dont know why?

Member Avatar for yaragalla_mural

I found the problem. one of the element in the div is causing this problem. its width is causing this problem. I have corrected it. Thanks for all your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.