✔ 2 div Container nebeneinander

[Emu-Emsen]

Hi Leute,
ich habe ein CSS Problem, und zwar möchte ich zwei div Container nebeneinander positionieren.

Das sieht so aus:

<div style="float:left;" id="top_title_links">Test</div>
<div id="top_title_rechts">Test2</div>

Die Hülle der Webseite ist 985px breit.

Die beiden div Container habe ich wie folgt formatiert:

#top_title_links {
width:770px;
height:10px;
padding:2px;
background-color:#67B0FA;
border-bottom:1px solid #000;
}

#top_title_rechts {
width:215px;
height:10px;
padding:2px;
background-color:#67B0FA;
border-bottom:1px solid #000;
}

Meine Frage nun, wie bekomme ich die beiden div nebeneinander, leider werden sie im Browser nur unterneinander dargestellt.

Danke!

 

[SeargentWinters]

So weit ich weiß hast du bereits alles richtig gemacht, aber schätze mal du benutzt den Internet Explorer (IE 5 oda 6[hier sollte es eigendlich gehn]).

Ich schreib dir mal wie ich es habe, dann musste dir einfach rausschnippeln:

#content_area_left
{
width: 198px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
voice-family: "\"}\"";
voice-family:inherit;
width: 195px;
display: inline-block;
}
html>body #content_area_left {width: 198px;}

#content_area_right
{
clear: none;
width: 583px;
height: 100%;
margin: 0px;
padding: 0px;
}
html>body #content_area_right {width: 583px;}


Das ganze ist ein Box Modell Hack, expliziert dieser ist von Tanteks.

Mehr Infos dazu gibs hier: http://www.parterremedia.de/csswork/css-box-modell/boxmodell-03.html

Hoffe das geht ok

 

[Maik]

Die Hülle der Webseite ist 985px breit

... bei einer Mindestauflösung mit 1024*768 und maximiertem Browserfenster sicherlich kein Problem ;-]

Doch was ist mit kleineren Bildschirmauflösungen bzw. minimierten Browserfenstern, die die erforderliche Hüllenbreite unterschreiten? Das umfliessende DIV #top_title_rechts wird im Textfluss umbrochen und in der nächsten Zeile angezeigt.

 

[Emu-Emsen]

So, nach etwas rumprobiererei hab ich es hinbekommen, die Lösung sieht so aus:

<div style="float:left;" id="top_title_links"></div>
<div style="float:left;" id="top_title_rechts"></div>

#top_title_links {
width:780px;
height:20px;
background-color:#67B0FA;
}

#top_title_rechts {
width:205px;
height:17px;
padding-top:3px;
background-color:#9FC5FA;
font-size:9px;
}