Negative Margin Doesn't Work?

hello guys,
i have a problem with negative margin.
after moving to strict mode, i’ve found several nice things like… textarea of 100% isn’t realy… 100%. it’s 100% + border + padding + + +

ok…
i made a textarea inside a div. it has width of 100% and defined border and padding 0px; great. the parent div has padding of 10px to the right and to the left. which works great on the right… but on the left i have only 8px (since textarea is over exceeding)… i tried “fixing” it using margin left -2px; which seems not to work.

can anyone please tell me why doesn’t it work and better yet, tell me how can i solve this thing ?

here is my code:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>2010-01-18 18</title>
<style type="text/css">
html {
	direction:rtl;
}
.newStyle1 {
	padding: 5px;
	width: 690px;
	margin: 0px auto 0px auto;
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
	font-style: normal;
	color: #5F819A;
	text-align: center;
	background-color: #DEEBFA;
	border: 1px solid #CACACA;
}
.newStyle2 {
	border-style: solid;
	border-width: 0px 1px 1px 1px;
	border-color: #CACACA;
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
	font-style: normal;
	color: #000000;
	padding: 10px;
	width: 680px;
	overflow: hidden;
	margin: 0px auto 0px auto;
	background-color: #F3FBD9;
}
.newStyle3 {
	margin: 0px 0px 0px 5px;
	width: 90px;
	height: 30px;
	line-height: 30px;
	font-family: Arial;
	font-size: 10pt;
	font-weight: bold;
	font-style: normal;
	color: #000000;
	float: right;
	clear:right;
}
.newStyle4 {
	margin: 0px;
	padding: 0px;
	width: 585px;
	float: right;
	line-height: 30px;
	height: 30px;
}
.newStyle5 {
	padding: 0px;
	margin: 0px;
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	color: #40668C;
	border: 1px solid #000000;
	width: 583px;
}
.newStyle6 {
	overflow: hidden;
	width: 680px;
	height: 30px;
	padding: 0px;
	margin: 0px;
}
.newStyle7 {
	width: 100%;
	height: 200px;
	padding: 0px;
	margin: 0px 0px 0px -20px;
	border: 1px solid #808080;
	float:right;
}
</style>
</head>

<body>
<div style="margin: 0px auto 0px auto; width:700px; height:100px; overflow:hidden;">
<input type=hidden id="UserName" name="UserName" value="kosem">
<div id="OuterBox" name="OuterBox" style="width:700px; background: blue; font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold;">
<div id="DateDiv" name="DateDiv" style="height:30px; line-height:30px; font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold; text-align:center; width: auto; float: left; background: green; padding-left: 5px; padding-right: 5px">2010-01-18 18:49:06</div>
<div style="height:30px; line-height:30px">
<div id="SubjectDiv" name="SubjectDiv" style="font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold; text-align:right; background: yellow; padding-right: 5px"></div>
</div>
</div>
</div>
<div class="newStyle1">
	&#1492;&#1493;&#1505;&#1508;&#1514; &#1492;&#1493;&#1491;&#1506;&#1492; &#1495;&#1491;&#1513;&#1492;</div>
<div class="newStyle2">
	<div class="newStyle3">
		&#1499;&#1493;&#1514;&#1512;&#1514; &#1492;&#1492;&#1493;&#1491;&#1506;&#1492;:</div>
	<div class="newStyle4">
			<input class="newStyle5" name="Text1" type="text">	</div>
	<br>
	<div class="newStyle6">
		rgrg</div>

		<textarea class="newStyle7" cols="20" name="TextArea1" rows="2"></textarea></div>
</body>

</html>


You can solve the textarea problem like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
form {
    width: 476px;
    border: 2px solid red;
    padding:0 12px;
    overflow:hidden;
    background:#eee;
    margin:auto;
}
textarea {
    border: 2px solid green;
    padding: 5px;
    width:100&#37;;
    margin:5px 0 5px -7px;
    float:left;
}
</style>
</head>
<body>
<form>
    <div>
        <textarea>test</textarea>
    </div>
</form>
</body>
</html>


When you place a negative margin on the opposite side of a float (e.g. float left and you apply a right negative margin) then the float is not moved at all. What happens is that content on that side of the float will approach and overlap the float.

To move a float with negative margins the margin must be in the same direction that the element is floated.

e.g.


.newStyle7 {
    width: 100%;
    height: 200px;
    padding: 0px;
    [B]margin: 0 0 0 -2px;[/B]
    border: 1px solid #808080;
    [B]float:left;[/B]
}

Of course your example allows for no padding in the textarea which looks bad.

In my example I added the padding to the parent and then also added padding to the textarea with 100% width and then dragged the textarea into the space provide by the padding on the parent for a perfect fit :slight_smile:

The extra 2px width on the textarea is caused by the 1px border (which adds an extra px width on each side).

If fixed width is ok for you (which is seems to be) change your textarea width to 678px, and remove the margin altogether, like so:


.newStyle7 {
	[COLOR="Red"]width: 678px;[/COLOR]
	height: 200px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #808080;
	float:right;
}

PS You don’t need the float there at all. I would remove it.

well, i can use fixed pixel width… and i think i would do it.
still, it buggs me to know why negative margin didn’t work out… :slight_smile:
since sooner or later, i’ll need a 100% width come in handy…
either way, i thank you for the solution and idea but i’m on the process of learning this new strict mode thingy… :slight_smile:

i did try to do the way you described and still no go… i would thank you if you correct my code if possible and tell me what was my mistake.
as said, the green box (MainCenterDiv Class) has padding:10px; (which is similer to your <form>) now… textarea i added padding: 5px; and did float to right and margin right -x px … still no go :frowning:

i tried implementing your technic to my own code but failed. if you could correct me and explain what did i do wrong, would be great.
thanks again for help !

here is my code after an attempt to correct it… :



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>2010-01-18 18</title>
<style type="text/css">
html {
	direction:rtl;
}
.TopSubject {
	padding: 5px;
	width: 690px;
	margin: 0px auto 0px auto;
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
	font-style: normal;
	color: #5F819A;
	text-align: center;
	background-color: #DEEBFA;
	border: 1px solid #CACACA;
}
.MainCenterBox {
	border-style: solid;
	border-width: 0px 1px 1px 1px;
	border-color: #CACACA;
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
	font-style: normal;
	color: #000000;
	padding: 10px;
	width: 680px;
	overflow: hidden;
	margin: 0px auto 0px auto;
	background-color: #F3FBD9;
}
.D1 {
	margin: 0px 0px 0px 5px;
	width: 90px;
	height: 30px;
	line-height: 30px;
	font-family: Arial;
	font-size: 10pt;
	font-weight: bold;
	font-style: normal;
	color: #000000;
	float: right;
	clear:right;
}
.D2 {
	margin: 0px;
	padding: 0px;
	width: 585px;
	float:right;
	line-height: 30px;
	height: 30px;
}
.GeneralTextBox {
	padding: 0px;
	margin: 0px;
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	color: #40668C;
	border: 1px solid #000000;
	width: 583px;
}
.OptionsDiv {
	overflow: hidden;
	width: 680px;
	height: 30px;
	padding: 5px 0px 2px 0px;
	margin: 0px;
}
.GeneralTextArea {
	width: 100%;
	height: 200px;
	padding: 5px;
	margin: 0px -12px 0px 0px;
	border: 1px solid #808080;
	float: right;
}
.GreyButton {
	font-family: Arial;
	font-size: 10pt;
	font-weight: normal;
	font-style: normal;
	color: #434765;
	padding: 0px;
	margin: 0px;
	height: 25px;
	border: 1px solid #3F437A;
	background-color: #DFDFDF;
	cursor: pointer;
}
.OrangeButton {
	font-family: Arial;
	font-size: 10pt;
	font-weight: normal;
	font-style: normal;
	color: #434765;
	padding: 0px;
	margin: 0px;
	height: 25px;
	border: 1px solid #3F437A;
	background-color: #F7DD77;
	cursor: pointer;
}
.SubmitSection {
	padding: 10px 5px 0px 5px;
	width: 670px;
	margin: 0px;
	text-align: center;
}
.FormStyle {
	padding: 0px;
	margin: 0px;
}
</style>
</head>
<body>
<div style="margin: 0px auto 0px auto; width:700px; height:100px; overflow:hidden;">
<div id="OuterBox" style="width:700px; background: blue; font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold;">
<div id="DateDiv" style="height:30px; line-height:30px; font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold; text-align:center; width: auto; float: left; background: green; padding-left: 5px; padding-right: 5px">2010-01-18 18:49:06</div>
<div style="height:30px; line-height:30px">
<div id="SubjectDiv" style="font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold; text-align:right; background: yellow; padding-right: 5px"></div>
</div>
</div>
</div>
<form method="post" action="index.php" class="FormStyle">
<fieldset style="display:none;">
	<legend></legend>
	<input type=hidden id="UserName" name="UserName" value="kosem">
</fieldset>
<div class="TopSubject">
	&#1492;&#1493;&#1505;&#1508;&#1514; &#1492;&#1493;&#1491;&#1506;&#1492; &#1495;&#1491;&#1513;&#1492;
</div>
<div class="MainCenterBox">
	<div class="D1">
		&#1499;&#1493;&#1514;&#1512;&#1514; &#1492;&#1492;&#1493;&#1491;&#1506;&#1492;:
	</div>
	<div class="D2">
		<input class="GeneralTextBox" name="Text1" type="text">
	</div>
	<div class="OptionsDiv">
		<input class="GreyButton" style="width:156px" type="button" value="&#1514;&#1495;&#1497;&#1500;&#1514; &#1492;&#1491;&#1490;&#1513;&#1492; \\ &#1505;&#1493;&#1507; &#1492;&#1491;&#1490;&#1513;&#1492;">
		<input class="GreyButton" style="width:170px" type="button" value="&#1514;&#1495;&#1497;&#1500;&#1514; &#1511;&#1493; &#1514;&#1495;&#1514;&#1493;&#1503; \\ &#1505;&#1493;&#1507; &#1511;&#1493; &#1514;&#1495;&#1514;&#1493;&#1503;">
		<input class="GreyButton" style="width:120px" type="button" value="&#1514;&#1495;&#1497;&#1500;&#1514; &#1511;&#1493;&#1491; \\ &#1505;&#1493;&#1507; &#1511;&#1493;&#1491;">
		<input class="GreyButton" style="width:120px" type="button" value="&#1492;&#1506;&#1514;&#1511;&#1514; &#1514;&#1493;&#1499;&#1503; &#1492;&#1492;&#1493;&#1491;&#1506;&#1492;">
		<input class="GreyButton" style="width:98px" type="button" value="&#1502;&#1511;&#1500;&#1491;&#1514; &#1493;&#1497;&#1512;&#1496;&#1493;&#1488;&#1500;&#1497;&#1514;">
	</div>
	<textarea class="GeneralTextArea" cols="20" name="TextArea1" rows="2"></textarea>
	<div class="SubmitSection">
		<input class="OrangeButton" style="width:110px; text-align: center;" type="button" value="&#1492;&#1493;&#1505;&#1507; &#1502;&#1493;&#1491;&#1506;&#1492; &#1495;&#1491;&#1513;&#1492;">
		<input class="OrangeButton" style="width:110px; text-align: center;" type="button" value="&#1514;&#1510;&#1493;&#1490;&#1492; &#1502;&#1511;&#1491;&#1497;&#1502;&#1492;"></div>
</div>
</form>
</body>
</html>

Hi,

You need to add padding to the parent to equal the padding and borders that are added to the textarea. As your parent houses other things you will need to use another wrapper like so.


.[B]textwrap{padding:0 6px;overflow:hidden;}[/B]
.GeneralTextArea {
    width: 100&#37;;
    height: 200px;
  [B]  padding: 5px;[/B]
   [B] margin: 0px -6px 0px 0px;[/B]
    [B]border: 1p[/B]x solid #808080;
    float: right;
}



<div class="textwrap">
        <textarea class="GeneralTextArea" cols="20" name="TextArea1" rows="2"></textarea>
</div>

10px padding + 2px borders =12px total extra length.

Therefore 6px padding each side is added to a parent and then a negative margin of -6px will make it all line up.

Here is is in place:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>2010-01-18 18</title>
<style type="text/css">
html {
    direction:rtl;
}
.TopSubject {
    padding: 5px;
    width: 690px;
    margin: 0px auto 0px auto;
    font-family: Arial;
    font-size: 11pt;
    font-weight: bold;
    font-style: normal;
    color: #5F819A;
    text-align: center;
    background-color: #DEEBFA;
    border: 1px solid #CACACA;
}
.MainCenterBox {
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: #CACACA;
    font-family: Arial;
    font-size: 11pt;
    font-weight: bold;
    font-style: normal;
    color: #000000;
    padding: 10px;
    width: 680px;
    overflow: hidden;
    margin: 0px auto 0px auto;
    background-color: #F3FBD9;
}
.D1 {
    margin: 0px 0px 0px 5px;
    width: 90px;
    height: 30px;
    line-height: 30px;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    color: #000000;
    float: right;
    clear:right;
}
.D2 {
    margin: 0px;
    padding: 0px;
    width: 585px;
    float:right;
    line-height: 30px;
    height: 30px;
}
.GeneralTextBox {
    padding: 0px;
    margin: 0px;
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    color: #40668C;
    border: 1px solid #000000;
    width: 583px;
}
.OptionsDiv {
    overflow: hidden;
    width: 680px;
    height: 30px;
    padding: 5px 0px 2px 0px;
    margin: 0px;
}
.textwrap{padding:0 6px;overflow:hidden;}
.GeneralTextArea {
    width: 100%;
    height: 200px;
    padding: 5px;
    margin: 0px -6px 0px 0px;
    border: 1px solid #808080;
    float: right;
}
.GreyButton {
    font-family: Arial;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    color: #434765;
    padding: 0px;
    margin: 0px;
    height: 25px;
    border: 1px solid #3F437A;
    background-color: #DFDFDF;
    cursor: pointer;
}
.OrangeButton {
    font-family: Arial;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    color: #434765;
    padding: 0px;
    margin: 0px;
    height: 25px;
    border: 1px solid #3F437A;
    background-color: #F7DD77;
    cursor: pointer;
}
.SubmitSection {
    padding: 10px 5px 0px 5px;
    width: 670px;
    margin: 0px;
    text-align: center;
}
.FormStyle {
    padding: 0px;
    margin: 0px;
}
</style>
</head>
<body>
<div style="margin: 0px auto 0px auto; width:700px; height:100px; overflow:hidden;">
    <div id="OuterBox" style="width:700px; background: blue; font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold;">
        <div id="DateDiv" style="height:30px; line-height:30px; font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold; text-align:center; width: auto; float: left; background: green; padding-left: 5px; padding-right: 5px">2010-01-18 18:49:06</div>
        <div style="height:30px; line-height:30px">
            <div id="SubjectDiv" style="font-family: Arial; font-size: 10pt; color: #000000; font-weight: bold; text-align:right; background: yellow; padding-right: 5px"></div>
        </div>
    </div>
</div>
<form method="post" action="index.php" class="FormStyle">
    <fieldset style="display:none;">
    <legend></legend>
    <input type=hidden id="UserName" name="UserName" value="kosem">
    </fieldset>
    <div class="TopSubject"> &#1492;&#1493;&#1505;&#1508;&#1514; &#1492;&#1493;&#1491;&#1506;&#1492; &#1495;&#1491;&#1513;&#1492; </div>
    <div class="MainCenterBox">
        <div class="D1"> &#1499;&#1493;&#1514;&#1512;&#1514; &#1492;&#1492;&#1493;&#1491;&#1506;&#1492;: </div>
        <div class="D2">
            <input class="GeneralTextBox" name="Text1" type="text">
        </div>
        <div class="OptionsDiv">
            <input class="GreyButton" style="width:156px" type="button" value="&#1514;&#1495;&#1497;&#1500;&#1514; &#1492;&#1491;&#1490;&#1513;&#1492; \\ &#1505;&#1493;&#1507; &#1492;&#1491;&#1490;&#1513;&#1492;">
            <input class="GreyButton" style="width:170px" type="button" value="&#1514;&#1495;&#1497;&#1500;&#1514; &#1511;&#1493; &#1514;&#1495;&#1514;&#1493;&#1503; \\ &#1505;&#1493;&#1507; &#1511;&#1493; &#1514;&#1495;&#1514;&#1493;&#1503;">
            <input class="GreyButton" style="width:120px" type="button" value="&#1514;&#1495;&#1497;&#1500;&#1514; &#1511;&#1493;&#1491; \\ &#1505;&#1493;&#1507; &#1511;&#1493;&#1491;">
            <input class="GreyButton" style="width:120px" type="button" value="&#1492;&#1506;&#1514;&#1511;&#1514; &#1514;&#1493;&#1499;&#1503; &#1492;&#1492;&#1493;&#1491;&#1506;&#1492;">
            <input class="GreyButton" style="width:98px" type="button" value="&#1502;&#1511;&#1500;&#1491;&#1514; &#1493;&#1497;&#1512;&#1496;&#1493;&#1488;&#1500;&#1497;&#1514;">
        </div>
        <div class="textwrap">
        <textarea class="GeneralTextArea" cols="20" name="TextArea1" rows="2"></textarea>
        </div>
        <div class="SubmitSection">
            <input class="OrangeButton" style="width:110px; text-align: center;" type="button" value="&#1492;&#1493;&#1505;&#1507; &#1502;&#1493;&#1491;&#1506;&#1492; &#1495;&#1491;&#1513;&#1492;">
            <input class="OrangeButton" style="width:110px; text-align: center;" type="button" value="&#1514;&#1510;&#1493;&#1490;&#1492; &#1502;&#1511;&#1491;&#1497;&#1502;&#1492;">
        </div>
    </div>
</form>
</body>
</html>


Hope that makes sense :slight_smile:

As always, great teacher
i thank you for helping out and explaining on the way

  • thanks for everyone who helped :slight_smile:

have a nice day you all.
till the next time =]

emm… thought i had another question… got it :slight_smile:
as always, thanks for help !
realy did great for me =]