mehrere container nebeneinander

ExBoNd · 02.11.2003, 16:24

ich hänge gerade an den einfachsten sachen (denk ich). beim versuch mehrere container browserfüllend nebeneinander zu packen hängt der letzte sich immer darunter?!

CSS:

Code:

body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

#border {

}

#topborder {
	
}

#topleft {
	background-color: #6699FF;
	float: left;
    width: 120px;
	height: 120px;
}

#topmiddle {
	background-color: #3366CC;
	margin: 0px 120px 0px 120px;
	height: 120px;
}

#topright {
	background-color: #6699FF;
	float: right;
	width: 120px;
	height: 120px;
}

HTML:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="screen.css" />
</head>
<body>

<div id="border">

<div id="topborder">

    <div id="topleft">topleft</div>

	<div id="topmiddle">topmiddle</div>

    <div id="topright">topright</div>

</div><!-- topborder ende -->

</div><!-- border ende -->

</body>
</html>

ansicht gibts hier!

danke,
exbond

-Andreas- · 02.11.2003, 19:49

Mach mal alle 3 auf float:left

ExBoNd · 02.11.2003, 20:02

hhmmm....

jetzt schauts noch grauslicher aus. *heul*

prefix · 03.11.2003, 07:14

html-reihenfolge:

- topleft
- topright
- topmiddle

topmiddle darf nicht gefloatet werden!

ExBoNd · 03.11.2003, 09:52

jo, so gehts. kannst du mir erklären warum die reihenfolge so sein muss?

und waum macht ie6 abstände zwischen die container?

thx...

prefix · 03.11.2003, 09:54

ad reihenfolge:

1. links floaten
2. rechts floaten
3. ohne float, da der container durch die margins (links und rechts) bereits positioniert wird!! ansonsten würde der re. gefloatete darunter liegen (block-level-element)

ad abstände: für den ie die abstände berichtigen, danach per child-selektor für die "guten" browser - der ie render falsch!

ExBoNd · 03.11.2003, 12:19

hhmmm.... in meinem fall sieht der topleft container im CSS nun so aus:

Code:

#topleft {
    float: left;
    voice-family: "\"}\""; /* ende für den ie 5 */
    voice-family: inherit;
    width: 120px;
    height: 120px;
    background-color: #6699FF; /* ende für den ie 6 */
}

html>body #topleft{
    background-color: #6699FF; /* nur für die mozilla-familie */
}

funtst aber trotzdem nicht? was genau soll ich anpassen?

danke...

prefix · 03.11.2003, 12:27

du musst die width-angabe für den ie5 schon vor tantek's hack einsetzen, so wie du das einsetzt, bringt es gar nichts!

Code:

#topleft {
    float: left; /* für alle */
background-color: #6699FF; /* für alle */
width: 130px; /* für ie5 */
height: 120px; /* für alle */
    voice-family: "\"}\""; /* ende für den ie 5 */
    voice-family: inherit;
    width: 120px; /* für den ie 6 */  
}

html>body #topleft{ /* nur für die mozilla-familie */
	 width: 130px;
}

nach tantek's hack bzw. dem child-selector darfst du nur mehr jene definitionen reingeben, welche spezifisch unterschiedlich sind

ExBoNd · 03.11.2003, 12:43

sorry meine beschränktheit, aber ich versteh den hack (noch) nicht.

du sagst ich soll width schon vor dem hack anwenden, warum addierst du 10px wenn der unerwünschte spalt nur 1px ist?
ich hab mich nach deiner anleitung gehalten, funtst trotzdem nicht.

prefix · 03.11.2003, 12:47

die 10 px hab ich nur zur veranschaulichung reingegeben - du musst natürlich mit deinen pixel-werten experimentieren!

ExBoNd · 04.11.2003, 09:19

ok, ich gebs auf. was ich auch versuche - im ie bleibt ein abstand.
ich hab es absolut nicht kapiert wie der hack funktioniert.
eventuell gibts wo eine anleitung für hirnis wie mich?

danke,
exbond