Zwei divs nebeneinander positionieren

Status
Nicht offen für weitere Antworten.

messmar

Erfahrenes Mitglied
Hallo,

ich habe zwei divs nebeneinander (Mit Float uund Clear) und oben bündig.

Das funktinoiert prima aber in MIE springt der Div (Der rechts eingebunden ist) nach unten, und zwar direkt unter dem ersten Div links, wenn ich den Browser verkleinere, Was eigentlich falsch is.

Der div soll bzw. muss oben bündig bleiben und zwar rechts von dem ersten Div.

Hat jemand eine Idee wie ich sowas lösen kann.

Danke und Gruß

Messmar
 
Hallo,

Danke schon mal. Aber die Position-Attribut habe ich hier gar nicht verwendet.
Ich arbeite nur mit float u. clear.

Gruß

Messmar
 
Versuche doch mal folgendes:

Code:
#box1
{
float: left; 
width: 70%; /* optionale Weitenangabe */
background: #0086d7;
}

#box2
{
float: right; 
width: 30%; /* optionale Weitenangabe */
background: #dfdfdf;
}
Ansonsten möchte ich dich ebenfalls bitten, den kompletten Quelltext der Seite zu posten.
 
Hi,

hier ist der Code :

<div id="left_navi">
<ul class="ul_ceo">
<li><img src="img/icon_teaser_links.gif" width="19" height="9" alt="Arraw right" /> <a href="#" class="ceo_teaser">Xgdfgdfgdf</a></li>
<li><img src="img/icon_teaser_links.gif" width="19" height="9" alt="Arraw right" /> <a href="#" class="ceo_teaser">Worldwide Operations</a></li>
<li><img src="img/icon_teaser_links.gif" width="19" height="9" alt="Arraw right" /> <a href="#" class="ceo_teaser">Buy collectibles</a></li>
<li><img src="img/icon_teaser_links.gif" width="19" height="9" alt="Arraw right" /> <a href="#" class="ceo_teaser">Contact</a></li>
<li>
<ul class="ul_ceo">
<li>tincidunt rutrum</li>
<li>Maecenas ut justo non</li>
<li>per conubia nostra</li>
</ul>
</li>
</ul>
</div>

<div id="content">
<table cellspacing="0" cellpadding="0" summary="content_data" class="tb_content">
<tr>
<td width="583" valign="top">
<div id="p_top">
<span class="txt_bold">Cras turpis risus</span><br />
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Phasellus accumsan semper tortor...<a href="http://www.web.de" target="_blank">more</a>
</div>
</td>
</tr>
</table>
</div>


Der CSS-Code:

#left_navi {
border: 1px solid blue;
width: 147px;
background-color: #E7F7FF;
margin-top:0px;
float: left;
}
#content {
width: 583px;
height: auto;
/*-border: 1px solid blue;*/
margin-left: 160px;
margin-top:20px;
clear:right;
}

FYI:
Ich will bzw. soll keine % Angaben machen


Danke noch mal und Gruß

Messmar
 
Hi,

möglich wäre es, dein bisheriges Konstrukt in einen umschliessenden Container mit fester Breite
einzubetten. Damit würde eine Bildlaufleiste erscheinen, wenn der Bereich zu knapp wird, das
Verrutschen nach unten wäre somit behoben.

CSS:
Code:
#mainDiv{ width: 745px;}
#left_navi { border: 1px solid blue;
             width: 147px;
             background-color: #E7F7FF;
             margin-top: 0;
             float: left;}
#content { float: left;
           width: 583px;
           height: auto;
           /*-border: 1px solid blue;*/
           margin-left: 13px;
           margin-top: 20px;}
HTML:
HTML:
<div id="mainDiv">
  <!-- Dein bisheriger Quelltext -->
</div>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
messmar hat gesagt.:
Ich will bzw. soll keine % Angaben machen
Die Prozentangaben waren nur zu Demonstrationszwecken gedacht, da ich bis dato die Dimensionen deiner DIVs nicht kannte. Selbstverständlich können auch feste Weitenangaben für die DIVs bestimmt werden ;-]

Wenn dir mein vorgestelltes CSS-Modell (float: left und float: right) dennoch nicht weiterhilft, empfehle ich dir Quaeses Lösungsvorschlag.
 
Hallo,

vielen Dank. Es hat geholfen.
Ich werde das ganze aber dann trotzdem noch anpassen müssen.

Gruß

Mesmar
 
Status
Nicht offen für weitere Antworten.
Zurück