Zwei Divs nebeneinander ohne Float

[Miana]

Schönen guten Tag,

vorab muss ich gleich mal sagen, dass ich in der HTML & CSS Welt noch ein Neuling bin.

Mein Problem ist, dass ich zwei Divs (Sidebar & Content) nebeneinander bekommen möchte, ohne float zu verwenden. Grund hierfür ist, dass ich den Wrapper mit einem Background-Image belegt habe und sobald ich float verwende, dieses nicht mehr angezeigt wird.

Ich habe den Divs bereits eine passende Breite gegeben, dennoch werden sie untereinander angezeigt.

Kann mir bitte jemand nen Tipp geben, bzw. erklären, wie ich es richtig mache?

Schon mal herzlichen Dank für Eure Hifle.



Liebe Grüße

Miana

 

[Tar]

Hallo. Eigentlich sollte das Hintergrundbild nicht "verschwinden". Könntest du den Code posten, damit man sich das mal ansehen kann. Float ist definitiv die eleganteste und einfachste Lösung.

Meine Vermutung ist, dass die Sidebar und der Content wiederum auch einen Hintergrund haben, der den Wrapper-BG überdeckt, aber was genaues kann man nur mit dem Code sagen.

 

[Tronjer]

Du kannst die beiden Divs auch mit position:relative und entsprechenden Werten für top und left nebeneinander schieben.

 

[threadi]

Wie Tar schon sagte ist float die Lösung. Relative Positionierung führt hier nicht zum Ziel. Dein Problem ist sicherlich, dass Du zwar floatest, dadurch die der Wrapper jedoch quasi keine Höhe erhält. Du musst also direkt vor dem Ende des Wrappers noch ein clear einfügen. Merke: wer floatet muss auch clearen.

 

[Miana]

Herzlichen Dank für Eure Antworten!

@ Tar & threadi: Ja bei der Sidebar ist erneut eine Grafik hinterlegt. Die Thematik mit float und clear ist völlig neu für mich. Wärt Ihr bitte so lieb und würdet mir erklären wie ich das mit clear dann richtig einsetze bzw. verwende?

Hier mal die Kurzform des HTMl und CSS Code:

HTML:

<div id="wrapper">

<div id="top">

</div>


<div id="cont">




<div id="content">
<div id="post">
Test Test
<br />
Test Test
<br />
Test Test
<br />
Test Test
<br />
Test Test
<br />
Test Test
<br />
Test Test
<br />
Test Test
<br />
Test Test
<br />
</div>
</div>

<div id="SB">
<div id="SBpost">

<br />
<br />
TEST TEST TEST
<br />
<br />

<br />
<br />
<br />
<br />
<br />


</div>
</div>


</div>
</div>

CSS:

#wrapper {
width:1000px;
margin:auto;
background: #fff url(../images/wrapper.gif) repeat-y;
}

#cont {
width: 1000px;
margin:auto;
padding: 0 0;
background:url(../images/cont-top-bg.gif) no-repeat;
}

#content {
float:right;
width: 726px;
margin: 0 0 0 0;
padding: 0 0;
background:url(../images/content-bg.gif);
}

#SB {
width:208px;
text-align:justify;
background:url(../images/sb-bg.gif);
float:left;
}

 

[Miana]

Ah ich hab´s jetzt:

<div style="clear:both;"></div>

Herzlichen Dank für Eure Hilfe!!!

 

[Tronjer]

Wie Tar schon sagte ist float die Lösung. Relative Positionierung führt hier nicht zum Ziel.

Und wieso nicht? Das mag zwar nicht die bevorzugte Lösung sein, aber es führt genauso zum Ziel.

 

[threadi]

Auf jegliche Positionierung ungleich static sollte man verzichten soweit es möglich ist. Das führt in manchen (vor allem älteren) Browsern zu unvorhersehbaren Ansichten, besonders wenn in der Umgebung z.B. noch Aufklappmenüs oder andere "Spielereien" verwendet werden.