• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Was gibt es Schöneres als den Mai draußen in der Natur mit allen Sinnen zu genießen? Lasst uns teilhaben an Euren Erlebnissen und macht mit beim Thema des Monats Da blüht uns was! ---> Klick

CSS Layout Problem; Div in Div horizontal scrollen

berlina

Bismarckapfel
Registriert
26.02.08
Beiträge
77
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
 
schwaiger

schwaiger

Weigelts Zinszahler (Rotfranch)
Registriert
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>
 

berlina

Bismarckapfel
Registriert
26.02.08
Beiträge
77
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 :(
 
schwaiger

schwaiger

Weigelts Zinszahler (Rotfranch)
Registriert
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>
 

berlina

Bismarckapfel
Registriert
26.02.08
Beiträge
77
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...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten