1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

CSS Layout Problem; Div in Div horizontal scrollen

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von berlina, 30.08.08.

  1. berlina

    berlina Elstar

    Dabei seit:
    26.02.08
    Beiträge:
    73
    Hi,

    ich hoffe hier hat das Thema vielleicht schon mal druchgekaut und eine Lösung gefunden.

    Ich möchte in einem DIV namens Container, mehrere, immer mehr werden Divs horizontal anordnen. Dazu nehme ich float. Das klappt auch alles soweit so gut.

    Nun soll der Container jedoch einen horizontalen Scrollbalken erhalten, wenn die horizontalen Divs die Bildschrimbreite übersteigen.

    Nehme ich dafür die float Technik, macht jeder Browser am Ende einen Zeilemumbruch, sobald der Platz ausgeschöpft ist.

    Nehme ich keine float technik, schiessen die DIVs über mein Container hinaus.

    Hier mal der float Code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <style type="text/css" media="screen">
    
    body {
      background-color: #e1ddd9;
      font-size: 12px;
      font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
      color:#564b47;  
      padding:0px;
      margin:0px;
      overflow:auto;
    }
    
    #links, #mittelinks, #mitterechts, #rechts {
        margin-left: 20px;
        width: 400px; 
        background-color: #cccccc;
        border:solid 1px #000000;
        float: left;
    }
    
    #container {
        border:solid 1px #000000;
        overflow: auto;
        height: 300px;
        background-color:#FFFFFF;
        width: 90%;
    } 
    
    </style>
    </head>
    <body>
    
    
       <div id="links">
        Beispiel 1
      </div>
      <div id="mittelinks">
        Beispiel 2
      </div>
      <div id="mitterechts">
        Beispiel 3
      </div>
      <div id="rechts">
        Beispiel 4
      </div>
      <div style="clear:left;"></div>
    
    </body>
    </html>
    
    Au mann ich such nun seit zwei Tagen nach einer Lösung :(

    Danke für die Hilfe.

    mike
     
  2. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
    wird der ie zwar meckern aber hier ma n ansatz.

    leider kann ich am ie grad nicht testen aber ich würde versuchen mit ner expression direkt im css beizukommen.

    lg flo

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <style type="text/css" media="screen">
    
    
    #container                 { width: 960px; margin: 50px auto 0 auto; overflow: auto;  }
    .containerChild            { background: gray; padding: 2px 5px 2px 5px; border-right: solid white 1px; border-left: solid white 1px;  display: table-cell; }
    
    
    </style>
    </head>
    <body>
    	<div id="container">
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    		<div class="containerChild">
    			Child
    		</div>
    	</div>
    </body>
    </html>
     
  3. berlina

    berlina Elstar

    Dabei seit:
    26.02.08
    Beiträge:
    73
    Guter Ansatz, aber der IE machts schön untereinander alles...:(

    Das nächste Problem wird sein, dass in den Child Containern ja text sein soll und so bricht er den auch nicht mehr um :(
     
  4. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
    ok habs mir nochma angesehen...

    so müsste es auch im ie gehen sogar sicher. nich gerade elegant aber ok.

    lg flo



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <style type="text/css" media="screen">
    
    
    #container                 { width: 960px; margin: 50px auto 0 auto; overflow: auto; *padding-bottom: 20px; }
    .table                     { display: table; }
    .tr                        { display: table-row; }
    .td                        { display: table-cell; *display: inline;}
    
    </style>
    </head>
    <body>
    	<div id="container">
    		<div class="tr">
    			<nobr>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    				<div class="td">Child</div>
    			</nobr>
    		</div>
    	</div>
    </body>
    </html>
     
  5. berlina

    berlina Elstar

    Dabei seit:
    26.02.08
    Beiträge:
    73
    Hey flo,

    danke das sieht im IE super aus und funktioniert, aber der nobr Teil zerbricht mir noch den Kopf.

    Denn ich gebe nun dem td eine feste breite von 200px beispielsweise und haue unmengen Text rein, dann wird dieser nicht umgebrochen.

    ein graus...
     

Diese Seite empfehlen