nicht angemeldet
Ausrichtung von Divs
Hallo,
ich möchte 5 Divs nebeneinander ausrichten, dabei soll das 4. allerdings eine variable Breite haben.
Nachdem das mit float (zumindest mir) nicht möglich war habe ich ein weiteres Div um die 4 verbleibenden gelegt und versuche nun verzweifelt das Letzte an den rechten Rand des übergeordneten Divs zu platzieren ...
Ums etwas Bildlicher darzustellen:
1. Versuch
|Div1||Div2||Div3||Div4 (mit variabler Breite)||Div5|
2. Versuch
|Div1 (übergeordnet)|Div2||Div3||Div4||Div5 (am rechten Rand des übergeordneten)||
Der Code des 2. Versuchs:
css:
body {
background: url(/images/x_repeat.png) top repeat-x;
}
#container {
width: 85%;
min-width: 800px;
margin: auto;
}
#head_top {
background: url(/images/head_top_repeat.png) repeat-x;
width: 100%;
min-width: 780px;
height: 30px;
}
#head_top_left {
background: url(/images/head_top_left.png);
width: 6px;
height: 30px;
float: left;
}
#head_top_saga {
background: url(/images/head_top_logo.png);
width: 144px;
height: 30px;
margin-left: 6px;
float: left;
}
#head_top_middle {
background: url(/images/head_top_middle.png);
width: 2px;
height: 30px;
margin-left: 144px;
float: left;
}
#head_top_right {
background: url(/images/head_top_right.png);
width: 6px;
height: 30px;
float: right;
}
html:
<body>
<div id="container">
<div id="head_top">
<div id="head_top_left" />
<div id="head_top_logo" />
<div id="head_top_middle" />
<div id="head_top_right" />
</div>
</div>
</body>
Ich hoffe mein Problem war verständlich und jemand kann mir helfen.
-
Moin!
Eine von vielen(!) möglichen Lösungen:
Du musst es nicht als Tabelle auszeichnen, kannst es aber als Tabelle anzeigen lassen.Der Code des 2. Versuchs:
css:
> body { > background: url(/images/x_repeat.png) top repeat-x; > } > > #container { > width: 85%; > min-width: 800px; > margin: auto; display:table; > } > > #head_top { > background: url(/images/head_top_repeat.png) repeat-x; > width: 100%; > min-width: 780px; > height: 30px; display:table-row; > } > > #head_top_left { > background: url(/images/head_top_left.png); > width: 6px; > height: 30px; > //float: left; display:table-cell; > } > > #head_top_saga { > background: url(/images/head_top_logo.png); > width: 144px; > height: 30px; > //float: left; display:table-cell; > } > > #head_top_middle { > background: url(/images/head_top_middle.png); > width: 2px; > height: 30px; > //float: left; display:table-cell; > } > > #head_top_right { > background: url(/images/head_top_right.png); > width: 6px; > height: 30px; > // float: right; // was soll das umfließen? display:table-cell; > }html:
> <body> > <div id="container"> > <div id="head_top"> > <div id="head_top_left" /> > <div id="head_top_logo" /> > <div id="head_top_middle" /> > <div id="head_top_right" /> > </div> > </div> > </body>Ich hoffe mein Problem war verständlich und jemand kann mir helfen.
Ich hoffe, es hat geholfen.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix
-
Hallo fastix,
funktioniert in der Form leider nicht aber danke für die Hilfe
lG Marico
-
-
Om nah hoo pez nyeetz, Marico!
ich möchte 5 Divs nebeneinander ausrichten, ...
Bist du sicher, dass es divs sein müssen?
Matthias
--
-
Okay ich hab hier eine Möglichkeit die funktioniert:
CSS:
#head_top { width: 90%; min-width: 780px; height: 30px; margin: auto; } #head_top_left { background: url(/images/head_top_left.png); width: 6px; height: 30px; float: left; } #head_top_logo { background: url(/images/head_top_logo.png); width: 143px; height: 30px; float: left; } #head_top_middle { background: url(/images/head_top_middle.png); width: 2px; height: 30px; float: left; } #head_top_repeat { background: url(/images/head_top_repeat.png) top repeat-x; height: 30px; margin-left: 151px; margin-right: 6px; } #head_top_right { background: url(/images/head_top_right.png); width: 6px; height: 30px; float: right; }HTML:
<div id="head_top"> <div id="head_top_left"></div> <div id="head_top_saga"></div> <div id="head_top_middle"></div> <div id="head_top_right"></div> <div id="head_top_repeat"></div> </div>-
kleiner Nachtrag ...
das "saga" muss hier und natürlich auch im ersten Beitrag durch "logo" ersetzt werden sonst macht die Sache keinen Sinn
-