[CSS] Text geht über Rahmen

[27o8]

Hallo,
ich übe aktuell wie ich meine vorhanden Designs so umgestalte das sie nur noch mit divs arbeiten und nicht mehr mit tabellen .

Ist ja relativ einfach doch nun hab ich ein Problem bei dem Contentbereich einer Seite das ganze schaut so aus:



der Code:

      <div id="content">
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
         Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
      </div>

Der entsprechende CSS Teil:

#content {
        width:620px;
        background-image:url('./img/content.jpg');
        background-repeat:repeat-x;
        padding-left:30px;
        margin-right:30px;
        overflow:hidden;
    }

Wie man jedoch auf dem Screen sieht geht der Text
rechts über den Rahmen drüber und hört nicht in diesem hellblauen
Kästchen auf, so wie links.

margin-right:30px; scheint also nicht zu funktionieren, hab auch
schon padding-right:-30px; probiert, aber geht auch nicht .

Was muss ich verwenden damit es klappt?

Gruß
cdp

 

[Renegade]

padding-right:30px

 

[27o8]

padding-right:30px

Damit schaut es so aus:

 

[Renegade]

Hi,

Hast du

padding-right:30px;
oder
padding-right:-30px;

gemacht?

//Edit: Es ginge auch anstatt

padding-left:30px;
padding-right:30px;

padding:0 30px;

 

[27o8]

padding-right:30px;

Bei -30px tut sich garnichts, bzw. da sieht es so aus wie bei margin-right:30px;

*edit*
Zum edit: mal probieren

*edit2*
Mit padding: 0 30px sieht es wieder so aus wie auf dem zweiten Screen von mir.

 

[ZeroCCC]

Du musst width reduzieren wenn du das padding erhöst.

#content {
        width:590px;
        background-image:url('./img/content.jpg');
        background-repeat:repeat-x;
        padding: 30px;
        margin-right:30px;
        overflow:hidden;
    }

Die die sich das Boxenmodel ausgedacht haben hattens scheinbar nicht so mit Logik. Border und Padding zählen nicht zur Weite...

 

[27o8]

So geht es, danke!

 

[Renegade]

Hi,

Wenn deine Box insgesamt x-breit sein soll musst du die Werte links und rechts wieder abziehen, also müsste die Breite sein: x-(padding-left)-(padding-right).

Also wenn sie 100px insgesamt sein soll, padding links und rechts je 10px ist, darfst du als Breite nur 80px angeben.

//Edit: Zu lahm

 

[flaschenkind]

Die die sich das Boxenmodel ausgedacht haben hattens scheinbar nicht so mit Logik. Border und Padding zählen nicht zur Weite...

Die Leute vom IE6 hatten sonne Logik Für die musste nämlich extra die volle Breite angeben

 

[ZeroCCC]

Die Leute vom IE6 hatten sonne Logik Für die musste nämlich extra die volle Breite angeben

Ja ich weiß, der IE kanns falsch und richtig. Dabei find ich die falsche Variante aber besser. In der Praxis interessiert mich bei weitem öfters die äussere Weite als die innere. Da brauch man nicht ständig 2 Werte ändern wenn man das padding oder den Rahmen ändert. Mit CSS 3 sind ja beide Modele richtig und man kann sich entscheiden welches man nimmt, aber das kann ja noch ein paar jährchen dauern.