div mit float: right nicht neben-, sondern untendran
0 0 0 
Felix Riesterer
0
div mit float: right nicht neben-, sondern untendran
Hallo!
Ich entwickele gerade ein CSS-basiertes Layout. An einer Stelle hab ich ein Problem: Es soll rechts des Inhaltsbereiches ein Bereich für diverse ergänzende Inhalte in Form von Boxen zur Verfügung gestellt werden. Dieser soll rechts "gefloatet" werden.
Leider beginnt dieser Bereich erst unter den divs, die links davon stehen.
Kann jemand mal über den HTML- und CSS-Code sehen und mir einen Tipp geben?
(Und vielleicht kann der/diejenige mir auch sagen, warum #main im IE viel zu hoch ist?)
Vielen dank im Voraus!
HTML:
<!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>Layout-Prototyp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page">
<div id="page_header">
Hier kommt das Logo rein.
</div>
<div id="page_menu">
<ul>
<li>Menü-Item1</li>
<li>Menü-Item2</li>
</ul>
</div>
<div id="main">
<div id="main_header">
<div id="main_menu">
Menü2
</div>
<div id="main_search">
Suchen
</div>
</div>
<div id="main_content">
<div id="content">
Inhalt
</div>
<div id="content_footer">
Fußleiste
</div>
</div>
<div id="sidebar">
Soll rechts des Inhaltes erscheinen
</div>
</div>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
color: black;
font-size: 100.01%;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
/*background-color: rgb(247, 241, 179);*/
}
#page {
padding: 0.2em;
height: 100%;
margin: 0 auto;
}
#page_header {
height: 20%;
border: 1px solid black;
}
#page_menu {
border: 1px solid black;
float: left;
width: 16em;
margin: 0;
height: 80%;
}
#page_menu ul {
}
#page_menu li {
list-style: none;
margin: 0;
padding: 0;
}
#main {
margin-left: 16em;
border: 1px solid black;
height: 80%;
}
/*#main_header {
}
*/
#main_menu {
float: left;
width: 35em;
border: 1px solid black;
}
#main_search {
margin-left: 35em;
border: 1px solid black;
}
#main_content {
margin-right: 15em;
border: 1px solid black;
height: 95%;
}
#content {
height: 90%;
border: 1px solid black;
}
#content_footer {
height: 10%;
border: 1px solid black;
}
#sidebar {
float: right;
width: 14em;
margin: 0;
padding: 0;
border: 1px solid black;
height: 80%;
}
-
hi,
Es soll rechts des Inhaltsbereiches ein Bereich für diverse ergänzende Inhalte in Form von Boxen zur Verfügung gestellt werden. Dieser soll rechts "gefloatet" werden.
Du redest von dem Element mit der ID "sidebar"?
Leider beginnt dieser Bereich erst unter den divs, die links davon stehen.
Natürlich tut es das - es steht ja im Quelltext auch erst hinter diesen Divs. Damit hat der Browser, so er sich denn an die Standards halten will, ja gar keine andere Möglichkeit der Darstellung - weil es so definiert ist.
Kann jemand mal über den HTML- und CSS-Code sehen und mir einen Tipp geben?
Wenn du ein Element mit float:right rechts neben einem anderen Element darstellen willst, so muss es sich im Quelltext _vor_ diesem anderen Element befinden.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hi,
Elemente, die links von einem rechts-gefloateten Element erscheinen sollen, muessen im Code _unter_ dem gefloateten Element notiert werden.
Gruesse, Joachim
--
Am Ende wird alles gut. -
Liebe(r) Chewie,
ein DIV ist ein Blockelement. Blockelemente erzeugen am Ende eine neue Zeile. Wenn Du ein DIV floaten lässt, dann erzeugt es keine neue Zeile.
Dein main_content erzeugt eine neue Zeile, weshalb die sidebar unterhalb davon steht. Wenn das sidebar-DIV vor dem main_content-DIV stünde, dann würde es rechts von main_content erscheinen.
Wenn Du aber (was sinnvoll wäre) den Content im Quelltext zuerst notieren würdest, dann wäre das besser (Barrierefreiheit, SuMa-optimierend etc.). Du musst dann nur noch eine neue CSS-Lösung (wer floatet wo?) für den main_header und die sidebar finden.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
So, ich antworte mir jetzt selbst, um mich bei allen Antworten zu bedanken.
Und jetzt klappt auch die Darstellung im IE!