| Autor |
Nachricht |
joakim
Threadersteller
Dabei seit: 22.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 29.12.2010 21:35
Titel "einfaches" Float-Layout |
  |
|
Hallo!
Ich möchte gerne ein zweispaltiges Float-Layout erstellen, allerdings ist dies (trotz stundenlanger Google suche) viel schwieriger als gedacht.
Hier erstmal ein Screenshot des ganzen, damit man auch versteht wovon ich gleich rede.
Aufgebaut ist das Konstrukt wie folgt: Die Box mit dem grauen Rahmen hat eine breite von 600 Pixeln. In ihr sitzen 2 Boxen die jeweils 300 Pixel breit sind. Die linke Box habe ich ich mit float:left verstehen. Genau hier steckt auch das Problem! Sobald die Box gefloatet wird, füllt sie in der Vertikalen das komplette, umfassende Div aus. Gut erkennen kann man das, indem man sich den roten Rand ganz rechts anguckt mit und den beiden Rändern des gefloateten Elements vergleicht. (Zum besseren Verständnis: Das linke Element hat links und rechts sichtbaren Rand, das rechte hat nur rechts sichtbaren Rand).
Für alle, die den dazu gehörigen Quelltext sehen wollen:
HTML
| Code: | <div>
<div class="links">
<h2>Headline2</h2>
</div>
<div class="rechts">
<h2>Headline2</h2>
</div>
</div> |
CSS
| Code: | div {
width:600px;
border:#CCC 1px solid;
margin:10px;
padding:0px;
}
.links {
border-style:none;
border-right:red 1px solid;
border-left:red 1px solid;
padding:0px;
margin:0px;
width:300px;
float:left;
}
.rechts {
border-style:none;
border-right:red 1px solid;
padding:0px;
margin:0px;
margin-left:300px;
width:300px;
} |
Wo liegt der Fehler? Oder gibt es vielleicht gar keinen Fehler und ich weiß bloß nicht wie ich mit Floats umgehen muss? Was muss ich tun, damit die Divs wieder gleich hoch sind?
Grüße
|
|
| |
  |
 |
Nothingness
Dabei seit: 20.03.2007
Ort: -
Alter: 35
Geschlecht: 
|
Verfasst Mi 29.12.2010 22:05
Titel
|
|
|
Hallo joakim,
du vergisst, dass die Border mit zu der Breite des div-Elementes dazugerechnet werden. Dann passen die beiden natürlich nicht in 600px.
| Code: | div {
width:600px;
border:#CCC 1px solid;
margin:10px;
padding:0px;
}
.links {
padding:0px;
border: 0px solid red;
margin:0px;
width:300px;
float:left;
}
.rechts {
padding:0px;
border:0px solid blue;
margin:0px;
width:300px;
float:right;
} |
Ohne Border würde es so klappen mit den 600px. Möchtest du noch Rahmen haben, muss entweder das äußere div-Element größer, oder die beiden inneren kleiner. Dann sollte es auch keine Probleme geben.
€dit: Ok, jetzt hab ich mich selbst verwirrt.
Zuletzt bearbeitet von Nothingness am Mi 29.12.2010 22:25, insgesamt 2-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
joakim
Threadersteller
Dabei seit: 22.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 29.12.2010 22:34
Titel
|
|
|
Danke! Das hat ja soweit wunderbar funktioniert! Ich bin begeistert 
Dass sich das äußere Div jetzt aber nicht mehr automatisch in der Größe anpasst, ist normal, oder? Kann man dagegen etwas machen?
Und gibt es eine Möglichkeit, den Text auf der selben Höhe wie den Rand beginnen zu lassen? (Vergleich Höhe des Randes/Textes auf dem Screenshot).
|
|
| |
|
|
Nothingness
Dabei seit: 20.03.2007
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Mi 29.12.2010 22:49
Titel
|
|
|
| joakim hat geschrieben: |
Dass sich das äußere Div jetzt aber nicht mehr automatisch in der Größe anpasst, ist normal, oder? Kann man dagegen etwas machen? |
Meinst du damit die Höhe?
Die Breite hast du ja durch div{} festgelegt. Wenn du keine Höhe angibst, richtet es sich nach dem Content, also den beiden inneren div-Elementen bzw dem höheren davon. Dafür noch ein overflow:hidden; einfügen.
| joakim hat geschrieben: |
Und gibt es eine Möglichkeit, den Text auf der selben Höhe wie den Rand beginnen zu lassen? (Vergleich Höhe des Randes/Textes auf dem Screenshot). |
Aktuell hast du ja jeweils einen h2-Tag, der standardmäßig ein margin oben und unten mitbringt.
Durch
| Code: |
*{
margin:0px;
padding:0px;
}
|
setzt du generell erstmal alle margin und padding voreinstellungen auf Null und kannst somit für jedes Element deine gewünschten Eigenschaften festlegen, ohne von unsichtbaren Standardgeschichten überrascht zu werden.
Ich hoffe mal, ich habe deine Frage jetzt richtig verstanden.
Um solche Breite/Höhe, margin/padding Geschichten zu schreiben und zu prüfen, solltest du firebug (für Firefox) nutzen. Dort wird dir das alles genau angezeigt.
|
|
| |
|
|
joakim
Threadersteller
Dabei seit: 22.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 29.12.2010 23:03
Titel
|
|
|
Danke danke danke! Du rettest mir echt den Abend 
Jetzt besteht allerdings noch das Problem, dass das umschließende Div durch overflow:hidden rechts angeschnitten wurde. Also so:
Woran liegt das nun wieder? Stimmt irgendwas mit der Breite des Div noch nicht?
|
|
| |
|
|
Nothingness
Dabei seit: 20.03.2007
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Mi 29.12.2010 23:13
Titel
|
|
|
Hm, also das Problem bekomme ich nicht nachgestellt.
CSS sieht bei mir aktuell so aus:
| Code: | *{
margin:0px;
padding:0px;
}
div{
width:604px;
border: 1px solid #ccc;
margin:10px;
overflow:hidden;
padding:0px;
}
.links {
padding:0px;
border-left: 1px dotted red;
border-right: 1px dotted red;
margin:0px;
width:300px;
float:left;
}
.rechts {
padding:0px;
border-right:1px solid blue;
margin:0px;
width:300px;
float:right;
} |
Was ich dir abgesehen von dem Problem noch raten würde: Nutze doch lieber eine ID für das äußere div. So definierst du für alle div-Elemente. Das könnte, wenn der Seitenaufbau komplexer wird, vlt zu Schwierigkeiten führen, wenn du vergisst, Werte zu überschreiben.
€dit: Wenn das äußere div zu klein ist, dann bricht höchstens der float, aber dadurch wird das div selbst nicht abgeschnitten.
Zuletzt bearbeitet von Nothingness am Mi 29.12.2010 23:19, insgesamt 1-mal bearbeitet
|
|
| |
|
|
joakim
Threadersteller
Dabei seit: 22.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 29.12.2010 23:26
Titel
|
|
|
|
Tatsächlich, funktioniert. Ich hatte einfach einen kleinen aber feinen Denkfehler eingebaut Ist aber jetzt beseitigt, danke nochmals!
|
|
| |
|
|
Nothingness
Dabei seit: 20.03.2007
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Mi 29.12.2010 23:27
Titel
|
|
|
Schön. Bitte 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
STRG - also rauszoomen, führt zur Layout float crash :D.
Hilfe: div float / width:100% - CSS float Box Model
Website mit festen Layout in dynamisches Layout umbauen
<tr> Float in IE7
[css] float und xp
Css FLOAT
|
|
Willkommen auf dem Portal für Mediengestalter
