Pls Help!! Body { Margin-right;} Doesnt Work!!!.. - Webmasters

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,153,845 members, 7,820,947 topics. Date: Wednesday, 08 May 2024 at 04:28 AM

Pls Help!! Body { Margin-right;} Doesnt Work!!!.. - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Pls Help!! Body { Margin-right;} Doesnt Work!!!.. (889 Views)

Problem With Namecheap Cpanel Host. My Sms Api Doesnt Work. 1k airtime if u help / Pls Help / Pls Help-how Do I Stop Bloggers From Copying My Post (2) (3) (4)

(1) (Reply) (Go Down)

Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by phililp(m): 8:03am On Mar 03, 2017

dear webmasters.. pls who knows why this happens. i was working on ma site and realised this.. so i created a
simple html file with just a div in it just to be sure.. and set left and right margin to 100px
the left margin worked but the right did not...

pls does anybody body have a good explanation for this.

here is the code

<html>
<head>
<title>troubleshooting</title>
<style>
body {
width:100%;
background-color: red;
margin-left: 100px;
margin-right: 100px;
}
div{
width: 100%;
background-color: blue;
text-align: center;
height: 400px;}

</style>
</head>

<body>
<div>

<p>content of the div</p>
</div>
</body>

</html>

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by Nobody: 8:40am On Mar 03, 2017

Checking your CSS File, the margin-left works automatically because your browser reads and converts your HTML/CSS codes from the left of the window. Your margin (both left and right). Try changing your code from Margin to Padding.

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by mokoshalb(m): 9:03am On Mar 03, 2017

wait! are you trying to margin your HTML body.? shocked

from your CSS you are trying to margin right the BODY... thats not what you intend doing I believe...

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by Nobody: 9:47am On Mar 03, 2017

It's working ..
It's your code.. You set the body to 100% of the screen and added extra 100 px to both left and right sides.... making the screen scrollable sideways...

Solution:
Be consistent, use either % or px throughout. %is more advisable tho

or just set the margin to Margin: 0 auto; That would center the contents.

1 Like

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by Realphilo(m): 10:18am On Mar 03, 2017

phililp:
dear webmasters.. pls who knows why this happens. i was working on ma site and realised this.. so i created a
simple html file with just a div in it just to be sure.. and set left and right margin to 100px
the left margin worked but the right did not...

pls does anybody body have a good explanation for this.

here is the code

<html>
<head>
<title>troubleshooting</title>
<style>
body {
width:100%;
background-color: red;
margin-left: 100px;
margin-right: 100px;
}
div{
width: 100%;
background-color: blue;
text-align: center;
height: 400px;}

</style>
</head>

<body>
<div>

<p>content of the div</p>
</div>
</body>

</html>

My namesake! Check out the width 100% and also giving margin-left; margin-right wink

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by DualCore1: 12:00pm On Mar 03, 2017

Bootstrap!

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by phililp(m): 1:49pm On Mar 03, 2017

DualCore1:
Bootstrap!

yea bootsrap... whats with bootstrap

u mean it can remedy the situation?

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by phililp(m): 2:01pm On Mar 03, 2017

mokoshalb:
wait! are you trying to margin your HTML body.?
from your CSS you are trying to margin right the BODY... thats not what you intend doing I believe...

i want my body centered 200px from the left and 200px from the right....

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by phililp(m): 2:11pm On Mar 03, 2017

Khaynet:
It's working ..
It's your code.. You set the body to 100% of the screen and added extra 100 px to both left and right sides.... making the screen scrollable sideways...

Solution:
Be consistent, use either % or px throughout. %is more advisable tho

or just set the margin to Margin: 0 auto; That would center the contents.

ok can u pleas help me with the code to acheive that?.. i want body to be centered 200px from left and right...

though i have achieved that by using two divs the container div set to 100% then the div inside set with margin left and right to desired
px and that worked perfectly but... why the mistery behind this one here pls help me understand..

if the left margin moved quite well by the 200px why why why the hell dint the right moved. even if its going to get scrollable. atleast why dont it get scrollable and then show me the distance brom the right edge to that blue content just like the left

hope u u'stand me

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by infoeag: 2:14pm On Mar 03, 2017

Bro, your body width is 100% which mean this box would occupy all available space, and it's not advisable to set the width of the body tag.
what you can possibly do is this,,
create a div element in the body section. your html will look something like this
<body>
<div id="wrapper">
</div>
</body>

Css:
#wrapper {
width: 90%
/* your width can be anything sha but not 100%; */
margin: 0 auto;
}
the auto value will cause your container to be position at the center of the page

I hope I help, CSS is simple but a little bit tricky

1 Like

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by infoeag: 2:20pm On Mar 03, 2017

since you are making use of bootstrap another easy way of doing this without messing with your css file is this,.
<body>
<div class="container">
<div class="row>
<div class="col-md-10 col-md-offset-1>
<div class="row">

</div>
</div>
</div>
</div>
</body>

I hope I have helped and not complicated the situation

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by phililp(m): 2:39pm On Mar 03, 2017

infoeag:
Bro, your body width is 100% which mean this box would occupy all available space, and it's not advisable to set the width of the body tag.
what you can possibly do is this,,
create a div element in the body section. your html will look something like this
<body>
<div id="wrapper">
</div>
</body>

Css:
#wrapper {
width: 90%
/* your width can be anything sha but not 100%; */
margin: 0 auto;
}
the auto value will cause your container to be position at the center of the page

I hope I help, CSS is simple but a little bit tricky

u killed it bro.. thanks .. but i still dont get some miseries behind how the body works

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by infoeag: 2:47pm On Mar 03, 2017

Lol, you welcome.. Na months of practice, making mistakes all over again (like this one you did), the misery behind will be well understood as you climb up the ladder in your design/development journey

Re: Pls Help!! Body { Margin-right;} Doesnt Work!!!.. by benniearinze: 6:46pm On Mar 03, 2017

It's not as if this is a big deal, u cant use a width of 100% on ur body and still marginalize it on both sides....
Practise bro, practise...

(1) (Reply)

A New Feature Has Being Introduced In Nairaland! / Which Framework Are The Below Websites Using? Can you build the same ? / My Blog: Www.bamgist.com For Sale(screenshot) Inclusive

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 22
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.