CODEWITHSUNDEEP
htmlcss
john c. j.
john c. j.

Reputation: 1185

Make the left and right margins the same width

What is the way to make the left (large) margin as small as right? I know about CSS resets, but still cannot figure out the actual working way.

<body>
<div id="quote">Foo</div>
<p>Foo</p>
</body> 

<style>
body { padding-left: 10%; background-color: rgb(255,205,205); }
#quote { margin-left: -10%; padding-left: 10%; background-color: rgb(205,255,205); }

/* I can use `calc` as a value, but I understand that it is not 
   the clever way */
/* #quote { margin-left: calc(-10% - 16px); } */

</style>

The problem:

enter image description here

The behaviour I would like to implement:

enter image description here

Upvotes: 1

Views: 394

Answers (6)

S. Nadezhnyy
S. Nadezhnyy

Reputation: 582

Add this to your style:

p {margin-left:16px;}

Upvotes: 0

YounesM
YounesM

Reputation: 2317

Give a width to your div and set margin to auto

jsfiddle

body {  margin 0;background-color: rgb(255,205,205);}
#quote {  margin:auto; width:95%; background-color: rgb(205,255,205); }

Upvotes: 1

ketan
ketan

Reputation: 19351

First of all remove default margin and padding which browser taking.

like:

* {
    margin: 0;
    padding: 0;
}

Then,

Change css like following. There is not need of negative margin.

body {
    background-color: rgb(255, 205, 205);
    padding: 0 1%;
}

#quote {
    background-color: rgb(205, 255, 205);
    padding-left: 10%;
}

Working Fiddle

Upvotes: -1

ewtqwerscx
ewtqwerscx

Reputation: 1

body {
background-color: rgb(255,205,205);
}
#quote {
margin: 0 auto;
width:90%
background-color: rgb(205,255,205);
padding-left:10%;
}
p{
margin-left:14%;
}

For Fiddle

Upvotes: 0

Lion King
Lion King

Reputation: 33823

Is this is what you want ?

body {background-color: rgb(255,205,205); }
#quote {margin: 0 1%; padding: 0 10%; background-color: rgb(205,255,205); }
p {margin: 0 1%; padding: 0 13%;}
<div id="quote">Foo</div>
<p>Foo</p>

Upvotes: 0

Darko Riđić
Darko Riđić

Reputation: 569

Here: 

body { background-color: rgb(255,205,205); }
p { padding-left: 10%; }
#quote { background-color: rgb(205,255,205); }

Upvotes: 2

Related Questions