3 div´s nebeneinander

kannaum · 24.04.2011

Hallo,

Ihr habt das Thema bestimmt schon sehr oft behandelt, ich habe auch schon gegoogelt, bei mir hat aber nichts funktioniert.

Ich will folgendes machen:
- 3 Boxen nebeneinander darstellen
- die 1. soll dynamisch angepasst werden, immer so groß wie möglich
- die 2. und die 3. sollen in einer festen Größe daneben dargestellt werden

Die 3 Boxen werden sehr schön nebeneinander dargestellt, wenn ich der 1. eine feste Größe gebe.
Hier mein Code, den ich ein bisschen reduziert habe:

HTML:

<div id="container">
<div id="spiel"
 style="float: left; height: 229px; margin-right: 5px; width: 491px;">
  Lorem ipsum...
</div>
<div id="spiel"
 style="width: 200px; float: right; margin-left: 5px;">
   Lorem ipsum
</div>
<div id="spiel" style="width: 200px; float: right;">
   Lorem ipsum
</div>
</div>

Mit CSS habe ich nur Rahmen und Farben definiert.
Wenn ich bei der ersten Box die width-Angebe weggebe, nimmt es immer den ganzen Platz in anspruch und die anderen Boxen rücken in die nächste Zeile.

Was muss ich denn in meinem Code ändern, damit das so geht?

Schon mal danke im Voraus.

mfg

Fugel · 24.04.2011

AW: 3 div´s nebeneinander

soweit ich weis gibt es da keine lößung die in allen browsern funktioniert, lediglich ff und safari machen da mit.

man belehre mich eines besseren wenn ich falsch liegen sollte.

Pixus · 24.04.2011

AW: 3 div´s nebeneinander

Sofern ich das mal richtig gelernt habe, soll man id´s nur einmal vergeben.

Versuch doch mal, dem Container eine feste widht in % zu geben. Ebenso den beiden rechten div´s. Dann bleibt für den Ersten doch nur noch der Rest über.

MegaAdi · 24.04.2011

AW: 3 div´s nebeneinander

Also was mir gleich anfangs aufgefallen ist: 3x eine Einmalige Id zu verwenden geht garnicht. Wenn alle 3 Boxen die gleichen Styles bekommen sollen nimm dafür klassen. ID's sind eindeutig und damit nur einmalig zu verwenden. Dazu mal ein Link:

CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 3 - Selektoren I
Zur Breite: Du kannst auch dem 1. Div-Element ein Max-Width-Atribut geben. Das berechnest du so, dass die anderen beiden Elemente noch platz haben. Also deine gewünschte Auflösung minus 405px (da 2x 200px und 5px margin-left für das 2. Element).

Edith sieht: da war jemand schneller

cebito · 24.04.2011

AW: 3 div´s nebeneinander

MegaAdi schrieb:
Also deine gewünschte Auflösung minus 405px (da 2x 200px und 5px margin-left für das 2. Element)

Gewünschte Auflösung? Das soll doch variabel sein

Kleines Beispiel:

HTML:

<!doctype html>
<html>

<head>
    <title>feste und variable Spalten</title>

    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />

<style type="text/css">
html,body{margin:0;padding:0;}
body{padding-right:410px;}
#left{float:left;background:#f00;width:100%;}
#right{float:left;width:410px;margin-right:-410px;}
#rightone{float:left;margin-left:5px;width:200px;background:#0f0;}
#righttwo{float:left;margin-left:5px;width:200px;background:#00f;}
</style>
</head>
<body>
    <div id="left">text</div>
    <div id="right">
        <div id="rightone">text</div>
        <div id="righttwo">text</div>
    </div>
</body>
</html>

MegaAdi · 24.04.2011

AW: 3 div´s nebeneinander

cebito schrieb:
Gewünschte Auflösung? Das soll doch variabel sein

Okay mein Fehler, hab ich überlesen

cebito · 24.04.2011

AW: 3 div´s nebeneinander

ein_rouven schrieb:
Wie wärs wenn du die 3 Boxen in eine Tabelle steckst?
cellpadding, -spacing und border auf 0 und dann die width der Zellen einstellen.

Ich weiß nicht ob das funktioniert, es ist nur ein Gedanke. Also bitte steinigt mich nicht.

Tabellen sind nicht zum Layouten da und eine Lösung hab ich bereits gepostet, also wozu der wenig hilfreiche Spam? -> gelöscht

Herr_D · 24.04.2011

AW: 3 div´s nebeneinander

An dieser Stelle gewinnt html an Bedeutung... cebitos Lösung ist schon oke... noch weniger Code durch die Reihenfolge der <div> und float:right (gibbet nämlich auch noch

)

HTML:

<!doctype html public "-//W3C//DTD HTML 4.0.1 //EN">
<html>
<head>
<title>Anker im divt</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
    }

body {
background: #fff;
color:#000;
font-family: sans-serif;
width:100%;
}


#one { background:#ccc;height:10em;  }

#two { width:10em;height:10em; background:#C0FF00;float:right; }


#three {width:10em;height:10em; background:#FF00C0;float:right; }
-->
</style>
</head>

<body>
<div id="three">three</div>
<div id="two">two</div>
<div id="one">one</div>
<div style="clear:both">
</body>
</html>

Sorry für die Farben, aber so quietscht es mehr

cebito · 24.04.2011

AW: 3 div´s nebeneinander

Geht so auch, nur der BG von one geht hinter den anderen weiter, wenn du denen jetzt nen Abstand gibst, guckt der dann durch

bzw. mach einfach mal one höher...

Herr_D · 24.04.2011

AW: 3 div´s nebeneinander

cebito schrieb:
Geht so auch, nur der BG von one geht hinter den anderen weiter, wenn du denen jetzt nen Abstand gibst, guckt der dann durch

Ja oke... läßt sich aber mit margin-right:20em; lösen

Das beispiel oben:

HTML:

<div id="rechts"
 style="width: 200px; float: right; margin-left: 5px;">
   Lorem ipsum
</div>
<div id="mittelrechts" style="width: 200px; float: right;">
   Lorem ipsum
</div>
<div id="links"
 style="height: 229px; margin-right: 205px; background:#ff0088">
  Lorem ipsum...
</div>