100% Weite mit Margin

[nvidia3]

Hallo,
ich hab ein Element, das im Textfluss bleiben soll und durch 100% Breite die breite vom Elternelement übernehmen solll. Jetzt soll es aber einen festen Rand rechts und links haben z.b. 2px;
Das Problem dabei ist, dass 100% der Breite unabhängig von dem Rand genommen wird, also ist es dann folglich größer als das Elternelement.
Wie kriegt man das hin?
gruß nvidia

 

[marc2010]

Hy,könntest du vielleicht genauer werden ?!


MFG

Marc2010

 

[nvidia3]

<style>
	.calc { height:500px; width:500px; border:1px solid black;}
	.unfo_output {border:1px solid #DDDDDD; margin-left:2px; margin-right:2px; width:100%;}
</style>
....
<div class="calc">
<input class="unfo_output"/>
<div>

ich möchte das das input genausgroß ist mit 2px margin auf jeder seite;
aber mit 100% width ist es größer als das eltern-element

 

[lascaux]

Ich kann Dir zwar nicht genau sagen woran es liegt, aber Du solltest padding anstatt von margin benutzen.

Grafisch dargestellt sieht man, dass es an deinem input liegt, vielleicht hilft es ja ein wenig

<style>
    div.calc {height: 500px; width: 500px; border: 1px solid black; padding-left: 5px; padding-right: 5px; background-color: #666;}
    div.input_box {height: 40px;; width: 100%; background-color: #F00;}
    input.unfo_output {border:1px solid #DDDDDD; width:100%;}
</style>
....
<div class="calc">
<div class="input_box">
<input class="unfo_output"/>
</div>
</div>

 

[nvidia3]

danke das ist die lösung einfach .calc padding geben, dann passt das danke