[naak2803]

Hej,
Jag behöver uppnå detta med CSS. problemet är att när jag sätter en margin-left: 20px när på en div som är 100%, skjuter den ut diven med 20 px vilket blir fel när jag har text i diven... då syns inte hela texten. Hur ska jag göra för att lyckas? jsfiddler-länk skulle uppskatta mkt.

Kan uppnå det med table, men det känns som man skulle kunna göra det med divvar.

Så här blir det


Så här vill jag att det ska vara

[nosnaj]

Om du tar bort koden som anger div till 100% fungerar det nog som tänkt?
En div fyller ut hela sin bredd som standard, har ingen testmiljö nu, men antar problemet uppstår därför du anger 100% och då putts den ut lika mycket som du ger den margin.

[allstars]

Detta borde fungera

blockquote {margin:0;padding:0; padding-left:20px}
blockquote p{border-left: 5px solid orange; padding-left:20px}

<blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></blockquote>

[naak2803]

Ursprungligen postat av allstars

Detta borde fungera

blockquote {margin:0;padding:0; padding-left:20px}
blockquote p{border-left: 5px solid orange; padding-left:20px}

<blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></blockquote>

tackar det var exakt detta jag letade efter.

[naak2803]

Ursprungligen postat av allstars

Detta borde fungera

blockquote {margin:0;padding:0; padding-left:20px}
blockquote p{border-left: 5px solid orange; padding-left:20px}

<blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></blockquote>

tackar det var exakt detta jag letade efter.