Grafik breiter als div - Umbruch soll vermieden werden

[Jürgen]

Hallo!

Ich hab hier ein kurzes HTML/CSS-Beispiel, in welchem ich die Breite eines div´s vordefiniert habe, aber eine div-box samt einer Grafik diese Breite zusammen überschreiten.

Dadurch rutscht die Grafik in nächste Zeile. Wie bekomme ich die Grafik immer neben die grüne Box, egal wie breit diese ist?

  
<div id="hauptbox">  
<div id="textbox">Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
Text Text Text Text Text Text Text Text Text Text Text Text</div>  
HIER SOLLTE DAS FOTO DIREKT RECHTS NEBEN DER GR&Uuml;NEN BOX  
ANSCHLIEESEN<img alt="" src="fotos/hochzeit22.jpg"></div>  

  
div#hauptbox {  
height: 452px;  
width: 800px;  
margin: auto;  
background-color: #ff0000;  
}  
div#textbox{  
height: 452px;  
width: 200px;  
background-color: #00ff00;  
float: left;  
}  
div#hauptbox img{  
border: 1px solid #bfbfbf;  
}  

[Beat]

Ich hab hier ein kurzes HTML/CSS-Beispiel, in welchem ich die Breite eines div´s vordefiniert habe, aber eine div-box samt einer Grafik diese Breite zusammen überschreiten.
Dadurch rutscht die Grafik in nächste Zeile. Wie bekomme ich die Grafik immer neben die grüne Box, egal wie breit diese ist?

mit max-width ?

mfg Beat

[Jürgen]

Dadurch rutscht die Grafik in nächste Zeile. Wie bekomme ich die Grafik immer neben die grüne Box, egal wie breit diese ist?

mit max-width ?

mfg Beat

Hmm ..... glaube, das funktioniert nicht.

Vereinfacht ist das Problem so:
ich habe ein div mit fixer Breite von zB 200 px und eine Grafik mit zB 300px soll einfach aus dem div rausragen und nicht in die nächste Zeile, also unter das div, rutschen.

[bleicher]

Grüße,
je nach - wahlweise overflow:visible, position:absolute oder float, je nahc gewünschtem layout
MFG
bleicher

[Jürgen]

Grüße,
je nach - wahlweise overflow:visible, position:absolute oder float, je nahc gewünschtem layout
MFG
bleicher

danke erstmal: overflow nutzt nix, float bekomme ich nicht hin (setze ich die grüne box mit float:left passiert gar nix) und position: absolute passt glaub ich nicht.

Hier nochmal das Beispiel vereinfacht:

IM rot umrandeten div ist linksbündig ein grünes text-div an welches die nachfolgende Grafik IMMER andocken soll, auch wenn so das rot umrandete div nach rechts überschritten wird.

Derzeit rutscht aber leider die Grafik immer nach unten.

Ich bekomme die floats einfach nicht gebacken ..... *help* ... ;-(

LG, Jürgen

[bleicher]

Grüße,
dock er doch an? grüne "spalte", rechts dran "klebt" das bild - wie willst du es denn haben?
MFG
bleicher

[Beat]

mit max-width ?
mfg Beat
Hmm ..... glaube, das funktioniert nicht.

Soso...

Vereinfacht ist das Problem so:
ich habe ein div mit fixer Breite von zB 200 px und eine Grafik mit zB 300px soll einfach aus dem div rausragen und nicht in die nächste Zeile, also unter das div, rutschen.

Wenn Inhalte nicht unter das gefloatet Element umbrechen sollen (Hat nichts mit dem Bild zu tun!), dann brauchst du ein Element mit einem block formating context als Wrapper um all diese Inhalte. overflow lässt Grüssen.

mfg Beat

[Jürgen]

Wenn Inhalte nicht unter das gefloatet Element umbrechen sollen (Hat nichts mit dem Bild zu tun!), dann brauchst du ein Element mit einem block formating context als Wrapper um all diese Inhalte. overflow lässt Grüssen.

Sorry für meine Begriffsstutzigkeit, aber was heisst das nun in Anfängersprache? ;-)

Ich hab doch das rot umrandete div, in welchem ich die Inhalte aneinander stellen möchte. NOCH ein div drumrum? Oder weile ich auf dem falschen Dampfer?

[Don P]

Hallo,

Dadurch rutscht die Grafik in nächste Zeile. Wie bekomme ich die Grafik immer neben die grüne Box, egal wie breit diese ist?

Denke, mit float geht das nicht. Float fließt ja, wie der Name schon sagt.
Aber vielleicht so:

div#hauptbox {
height: 452px;
width: 800px;
margin: auto;
background-color: #ff0000;

white-space:nowrap;
   overflow:hidden;

}
div#textbox{
height: 452px;
width: 200px;
background-color: #00ff00;

display:inline-block;

}
div#hauptbox img{
border: 1px solid #bfbfbf;
}

  
Ungetestet, müsste aber theoretisch gehen:  
Auch die Textbox sollte sich dann wie ein inline-Element verhalten (wie `img`{:.language-css}), aber ein Zeilenumbruch sollte wegen `nowrap`{:.language-css} nicht stattfinden und das Bild wegen `overflow`{:.language-css} notfalls abgeschnitten werden.  
  
Gruß, Don P  

[Jürgen]

Hallo,

Dadurch rutscht die Grafik in nächste Zeile. Wie bekomme ich die Grafik immer neben die grüne Box, egal wie breit diese ist?

Denke, mit float geht das nicht. Float fließt ja, wie der Name schon sagt.
Aber vielleicht so:

div#hauptbox {
height: 452px;
width: 800px;
margin: auto;
background-color: #ff0000;
   white-space:nowrap;
   overflow:hidden;
}
div#textbox{
height: 452px;
width: 200px;
background-color: #00ff00;
   display:inline-block;
}
div#hauptbox img{
border: 1px solid #bfbfbf;
}

>   
> Ungetestet, müsste aber theoretisch gehen:  
> Auch die Textbox sollte sich dann wie ein inline-Element verhalten (wie `img`{:.language-css}), aber ein Zeilenumbruch sollte wegen `nowrap`{:.language-css} nicht stattfinden und das Bild wegen `overflow`{:.language-css} notfalls abgeschnitten werden.  
>   
> Gruß, Don P  
>   
  
Danke mal für den Denkanstoß!  
  
Problem dabei:  
Das Bild soll ja im gesamten sichtbar sein, auch wenn es aus dem div rausragt. Und setze ich Dein Beispiel auf overflow: visible ragt die grüne textbox nach unten raus ..... zum Haare raufen  
  
Ist mein Wunsch tatsächlich CSS-technisch so schwierig umzusetzen????

[Don P]

Hallo,

Das Bild soll ja im gesamten sichtbar sein, auch wenn es aus dem div rausragt. Und setze ich Dein Beispiel auf overflow: visible ragt die grüne textbox nach unten raus ..... zum Haare raufen

LOL – kommt mir irgendwie bekannt vor. Hatte solche Probleme auch schon, weiß auch dass es eine Lösung gibt, aber nicht mehr genau welche :(

Ist mein Wunsch tatsächlich CSS-technisch so schwierig umzusetzen????

Ja, so eine CSS-Denke ist nicht jedem gegeben... Da sind bestimmte verwickelte Kurven in der Großhirnrinde (sog. Hirndivs) nötig.

Alternativ könnte man natürlich ganz *problemlos* eine Tabelle benutzen, aber dafür wird man hier im Forum gesteinigt ;) ... also doch nicht ganz problemlos.

Probier' doch mal float:left wie am Anfang und für das Bild margin-left:200px... dann passt es vielleicht daneben mit overfow:visible im Hauptdiv... Das Hauptdiv vielleicht ein paar px größer, so ganz pixelgenau geht das in CSS nie auf...

Gruß, Don P

[dave]

Hallo!

Hi,

div#hauptbox {
height: 452px;
width: 800px;
margin: auto;
background-color: #ff0000;
}
div#textbox{
height: 452px;
width: 200px;
background-color: #00ff00;
float: left;
}
div#hauptbox img{
border: 1px solid #bfbfbf;
}

  
Probier mal folgendes:  
~~~css
  
div#hauptbox {  
  border:5px solid #FF0000;  
  height:452px;  
  margin:auto;  
  overflow:hidden;  
  width:800px;  
}  
div#textbox{  
  background-color:#00FF00;  
  float:left;  
  margin-bottom:-452px;  
  width:200px;  
}  
div#hauptbox img{  
  padding-left:200px;  
}

[bleicher]

Grüße,
gib der roten box einfach position:relative ohne weiteres, und dem bild position:absolute,  offsetParent bleibt dann das rote div, aber wegen der absolute positionierung wird es auch "rausragen" wie nötig?
MFG
bleicher

[Jürgen]

Grüße,
gib der roten box einfach position:relative ohne weiteres, und dem bild position:absolute,  offsetParent bleibt dann das rote div, aber wegen der absolute positionierung wird es auch "rausragen" wie nötig?
MFG
bleicher

Prompt Deinen Vorschlag versucht - leider mit null Erfolg ... ;-(

HIER (Test2) hab ich ein rotes div, in welches eine Grafik UND daneben ein kleines blaues div rein sollen.

Grafik UND blaues div haben locker Platz im roten div - trotzdem passiert ein Zeilenumbruch und das blaue div rutscht darunter. WARUM zum T.... nochmal???

  
div#rot {  
height: 450px;  
width: 675px;  
margin: auto;  
border: 5px solid #ff0000;  
background-color: #ff0000;  
}  
div#blau {  
height: 300px;  
width: 300px;  
background-color: #0000ff;  
}

  
<div id="rot"><img src="fotos/hochzeit/01.jpg"  
 alt="">  
<div id="blau"></div>  
</div>

Vielen Dank für eure Hilfe!

LG, Jürgen

[Don P]

Hallo,

Grafik UND blaues div haben locker Platz im roten div - trotzdem passiert ein Zeilenumbruch und das blaue div rutscht darunter. WARUM zum T.... nochmal???

DIV ist ein Block-Element und IMG ein inline-Element. Die können nicht immer so einfach miteinander, wie die Leute auf deinem Bild.

So geht's z.B.:

div#rot {
height: 450px;
width: 675px;
margin: auto;
border: 5px solid #ff0000;
background-color: #ff0000;
}
div#blau {

float: right;

height: 300px;
width: 300px;
background-color: #0000ff;
}

>   
>   
> ~~~html
  

> <div id="rot"><img src="fotos/hochzeit/01.jpg" alt="">  
> <div id="blau"></div>  
> </div>

Und so auch, wenn das Bild rechts rausragen soll:

div#rot {  
height: 450px;  
width: 675px;  
margin: auto;  
border: 5px solid #ff0000;  
background-color: #ff0000;  
}  
  
div#bild {margin-left:450px}  
  
div#blau {  
float: left;  
height: 300px;  
width: 300px;  
background-color: #0000ff;  
}

<div id="rot">  
<div id="blau"></div>  
<div id="bild"><img src="01.jpg" alt=""></div>  

Das mit dem Einpacken in DIV und mit margin wurde dir aber oben schon gesagt.

Gruß, Don P

[bleicher]

Grüße,
ich habe etwas rumgemogelt, das kam raus:

  
  
<style type="text/css">  
div#hauptbox {height: 452px;  
width: 500px;  
margin: auto;  
position: relative;  
border: 5px solid #ff0000;  
}  
div#textbox{  
height: 452px;  
width: 200px;  
background-color: #00ff00;  
float:left;  
}  
  
img{  
position: absolute;  
left:205px;  
display:block;  
}  
  </style>  

MFG
bleicher

[Jürgen]

Nach vielem Probieren die (für mich praktikable) Lösung, die in FF und IE funktioniert: 2 divs nebeneinander, wobei im 2 div sich die (überbreite) Grafik mit position:absolute befindet.

Mein erster Ansatz war schlicht der völlig falsche Weg.

Hier der Code zur Testseite:

  
div#hauptbox {  
margin: auto;  
height: 500px;  
width: 700px;  
border: 3px solid #ff0000;  
}  
div#textbox {  
height: 450px;  
width: 200px;  
background-color: #00ff00;  
float: left;  
}  
div#bildbox {  
height: 450px;  
width: 300px  
float: left;  
}  
div#bildbox img{  
position: absolute;  
}  

-----

  
<div id="hauptbox">  
   <div id="textbox">Textbox</div>  
   <div id="bildbox"><img src="fotos/allerlei/01.jpg"></div>  
</div>  

die fast fertiggestellte Seite mit der angewandten div-suppe ist hier zu sehen. In den Galerien ragen eben überbreite Fotos aus den hauptdiv raus und im sonstigen hab ich (mühsames try + error ...) 3 divs samt 1 Grafik nebeneinander setzen können.

Danke noch mal für eure Anregungen!

LG, Jürgen

PS: Es ist jedenfalls tröstend, dass für diese auf den ersten Blick banale Aufgabe auch euch Profis nicht sofort die korrekte Lösung einfällt *g*