3 Divs(2 davon empty) mit unterschiedlichen Backgrounds vertikal ausrichten

[kook80]

Hallo,

ich würde gerne ein Layout erstellen, bei dem ich 3 Div's hoizontal ausrichten kann.
der mittlere div hat ein width von 945px und soll zentriert ausgerichtet sein. der linke div hat als hintergrundfarbe ein dunkles blau und der rechte div als hintergrundfarbe ein helles blau. ich schaffe es zwar, dass der mittler div zentiert wird, nur den rest bekomme ich einfach nicht hin. bitte um hilfe!

<div id="cp-logo">
	<div id="cp-left">
    </div>
    <div id="cp-right">
    </div>
    <div id="cp-logo-img">
    	<img src="images/cp_logo_gross.png" alt="cp logo"/>
    </div> 
       
</div>

folgendes css wende ich an:

#cp-logo {
	position: fixed;
	width: 100%;
	height:253px;
	margin:auto;
}



#cp-left {
	display: inline;
	float:left;
	width:auto;
	background-color:#0000FF;

}

#cp-right {
	display: inline;
	float:right;
	width:auto;
	background-color:#000099;
}
	
#cp-logo-img {
	display:inline;
	float:left;
	width:945px;
}

 

[vitus37]

Versuche mal allen drei DIV's in CSS ein float: left; und ein clear: right; zu geben. Dem #cp-logo ausserdem ein overflow: hidden;.

 

[kook80]

funktioniert leider nicht.
es wird immer noch der cp-logo-img linksbündig angezeigt und die beiden anderen div's gar nicht.

lg,
martin

 

[Sentino]

Dann mach es mit left: xx%.

Das geht immer. Hoffe es hilft dir. :)

 

[prm]

Das bekommst du m.E. nicht hin, denn woher sollen die beiden äußeren Divs wissen, wie groß ihre Breite ist? Das ist jeweils abhängig von der Fenstergröße.
Dein Vorhaben macht auch wenig Sinn: Denn ohne Platz gebe es dann auch keine linken und rechten Boxen und folglich auch keinen Inhalt.
Deshalb würde ich dir empfehlen, auf ein dreispaltiges Layout mit fixen Breiten für alle Boxen zu gehen, wie z.B. hier erklärt: Dreispaltiges Layout, zentriert mit fixen Breiten

 

[kook80]

ich habe auch schon überlegt in den wrapper-div eine tabelle zu legen. nur bei der zwischen div-aussengrenze und table habe ich immer einen ca 1pixeligen rahmen.
den ich trotz padding = 0, margin = 0 und border = 0 nicht wegbringe...