• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS mit float

S

schubste

Neues Mitglied
Hallo Zusammen,
Ich.....Anfänger... habe jetzt 5 Stunden herumprobiert....ich bekomme es einfach nicht hin :( Es ist sicherlich ganz simple..... Ich habe einen Content auf dem ich eine Sidebar links, ein Textfeld und eine Sidebar rechts anordnen möchte. Leider landen die Drei genannten Dinge nicht auf meinem Content. (siehe Bild, der Content ist der kleine schwarze Streifen oben :(

ich habe folgenden html Code geschrieben:

<div id="content">
<div id="sidebar1"><p>Sidebar Nummer 1<br />
Sidebar Nummer 1<br />
Sidebar Nummer 1<br />
Sidebar Nummer 1<br />
Sidebar Nummer 1<br />
Sidebar Nummer 1</p>
</div>
<div id="text"><p>Textfeld<br />
Textfeld<br />
Textfeld<br />
Textfeld<br />
Textfeld<br />
Textfeld</p></div>
<div id="sidebar2"><p>Sidebar Nummer 2<br />
Sidebar Nummer 2<br />
Sidebar Nummer 2<br />
Sidebar Nummer 2<br />
Sidebar Nummer 2<br />
Sidebar Nummer 2</p></div>
</div>

mein css sieht so aus:

#content {height: auto;
width: 1000px;
margin: 0 auto;
padding: 10px 0;
background: #000;
}

#sidebar1 {width: 210px;
height: auto;
background-color:blue;
float: left;
margin-bottom: 10px;
margin-right:10px;}

#text {width: 560px;
float: left;
margin-bottom: 10px;
height: auto;
background-color:#666}

#sidebar2 {width: 210px;
height: auto;
margin-bottom: 10px;
float: right;
background-color: blue;}

ich bin für jede Hilfe sehr dankbar!

viele Grüße
 

Anhänge

  • Bild1.jpg
    Bild1.jpg
    43,1 KB · Aufrufe: 6
schubste schrieb:
Hallo Zusammen,
Ich.....Anfänger... habe jetzt 5 Stunden herumprobiert....ich bekomme es einfach nicht hin :( Es ist sicherlich ganz simple..... Ich habe einen Content auf dem ich eine Sidebar links, ein Textfeld und eine Sidebar rechts anordnen möchte. Leider landen die Drei genannten Dinge nicht auf meinem Content. (siehe Bild, der Content ist der kleine schwarze Streifen oben :(

ich habe folgenden html Code geschrieben:

<div id="content">
<div id="sidebar1"><p>Sidebar Nummer 1<br />
Sidebar Nummer 1<br />
Sidebar Nummer 1<br />
Sidebar Nummer 1<br />
Sidebar Nummer 1<br />
Sidebar Nummer 1</p>
</div>
<div id="text"><p>Textfeld<br />
Textfeld<br />
Textfeld<br />
Textfeld<br />
Textfeld<br />
Textfeld</p></div>
<div id="sidebar2"><p>Sidebar Nummer 2<br />
Sidebar Nummer 2<br />
Sidebar Nummer 2<br />
Sidebar Nummer 2<br />
Sidebar Nummer 2<br />
Sidebar Nummer 2</p></div>
</div>

mein css sieht so aus:

#content {height: auto;
width: 1000px;
margin: 0 auto;
padding: 10px 0;
background: #000;
}

#sidebar1 {width: 210px;
height: auto;
background-color:blue;
float: left;
margin-bottom: 10px;
margin-right:10px;}

#text {width: 560px;
float: left;
margin-bottom: 10px;
height: auto;
background-color:#666}

#sidebar2 {width: 210px;
height: auto;
margin-bottom: 10px;
float: right;
background-color: blue;}

ich bin für jede Hilfe sehr dankbar!

viele Grüße
Zum Vergrößern anklicken....

overflow:hidden auf den container.
 
vielen herzlichen Dank :) Eine Frage habe ich noch. Habe "padding" bei dem Container jetzt entfernt. Ich dachte, jetzt müssten die drei Felder mit dem Container übereinstimmen. Aber aus irgendeinem Grund ist der Container jetzt länger und steht unten über. (siehe Bild) Wie bekomme ich denn das noch in den Griff.

Besten Dank2014-09-05_183418.jpg2014-09-05_183418.jpg
 
Hallo schubste

Gib bitte den Link zur Seite an, dann ist Hilfe viel einfacher. Und poste Code in den Tags (Einfügen/Code).

Lg X.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben