Dynamische Divs nebeneinander / FLOAT-problemchen

eFoX · 19.02.2010

immer diese floats...
machen nur probleme

zum problem:
ich habe drei divs nebeneinander. namentlich:
navigation_l --> auf der linken seite
navigation_mitte --> mittig
navigation_r --> auf der rechten seite

die Grafiken darin habe ich nun ganz einfach mit A, B und C bezeichnet.
wobei A und C die gleichen abmessungen haben und B (=Mitte) sich einfach solang wiederholen soll bis C erreicht ist.

so siehts aus:

aber so solls richtig sein:

CSS:

HTML:

#wrapper {
width: 80%;
margin: 0 auto;
border: 1px solid black;
}

#navigation {
margin-top: 50px;
border: 1px solid green;
}

#navigation_l {
background:url(l.png) #000;
width: 170px;
height: 170px;
border: 1px solid red;
float: left;
}

#navigation_mitte {
background:url(mitte.gif); 
border: 1px solid red;
height: 170px;
float: both;
}

#navigation_r {
background:url(r.png) #000;
width:170px;
height: 170px;
border: 1px solid red;
float: right;
}

zum css:
wie gesagt da sich die größe von der mitte dynamisch anpassen soll /bzw. der wrapper dynamisch 80% als wert in der breite hat (ich also diesen wert nicht weis), hat der navigation_mitte div keine breitenangabe.

HTML:

HTML:

<body>
		<div id="wrapper">
		<p>hier der wrapper</p>
		
			<div id="navigation">
			        <div id="navigation_l"></div>
				<div id="navigation_mitte"></div>
				<div id="navigation_r"></div>
			
			</div>
		</div>
	</body>

tomtom · 19.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

Wenn ich mich irre, dann Entschuldigung.
Probiere es mal mit float:left für die 3 Div's navigation rechts, mitte und links.
Sorry wenn es nicht klappt, versuche auch gerade mich in Css einzulesen. sitze aber momentan am verkehrten Rechner. Viel Glück. Vllt. hilft auch der Link weiter, ist aber mit fester Breite:

http://d-graff.de/selfhtml/dreidivs.html

TimeePic · 19.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

so wie tomtom geschrieben hat ist der richtige weg, du musst alle drei divs nach left floaten.

floaten bedeutet der div bewegt sich zu gegenüberliegenden rand und geht dann soweit nach oben, bis er wo anders anstößt.

da dein navi_r float right hat, bedeutet dies, es schwebt nach links und dann nach oben bis es anstößt (unterhalb von navi_l) und geht dann nach rechts, deshalb wird es unterhalb deiner zwei anderen divs angezeigt.

Schau mal bei Little Boxes Teil 1, dort wird es genau so erklärt.

Auszug aus V2B LittleBoxes Teil 1:
CSS

#kopfbereich {
position: relative;
background-color: #ffe574;
background-image: url(farbverlauf.jpg);
background-repeat: repeat-y;
color: black;
padding: 10px 20px 10px 20px; /* oben - rechts - unten - links */
}
#kopfbereich p {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 0;
margin-bottom: 0;
}
#kopfbereich p span {
color: #d90000;
}

#navibereich {
float: left;
width: 110px;
padding-left: 20px;
padding-top: 20px;
}
#navibereich ul {
width: 6em;
border-top: 1px solid #d90000;
}
#navibereich li {
list-style-type: none;
border-left: 1px solid #d90000;
border-bottom: 1px solid #d90000;
margin: 0;
}
#navibereich a,
#navibereich span {
display: block;
text-decoration: none;
background-color: #ffe574;
color: black;
padding: 4px;
border-left: 3px solid #ffe574;
}
#navibereich a:hover,
#navibereich a:focus {
background-color: white;
color: black;
border-left-color: #d90000;
border-bottom: none;
}
#startseite #navi01 span,
#galerieseite #navi02 span,
#kontaktseite #navi03 span {
background-color: white;
color: black;
border-left-color: #d90000;
border-bottom: none;
}

#spalte03 {
float: right;
width: 110px;
padding: 10px;
}

#textbereich {
background-color: white;
padding: 20px 10px 20px 20px;
margin-right: 130px;
margin-left: 130px;
}
#textbereich a {
border-bottom: 1px dotted #cc0000;
}
#textbereich ul li {
list-style-type: square;
}
#textbereich a:hover,
#textbereich a:focus {
border-bottom: 1px solid #d90000;
}

HTML

<div id="kopfbereich">
<div class="skiplink"><a href="#textbereich">Zum Inhalt springen</a></div>
<h1><img src="logo.gif" alt="Little Boxes" width="222" height="32" id="logo" /></h1>
<p>Webseiten gestalten mit CSS. <span>Grundlagen</span>.</p>
</div> 

<div id="navibereich">
<ul>
<li id="navi01"><span>Startseite</span></li>
<li id="navi02"><a href="galerie.html" title="Galerie mit Landschaftsbildern">Galerie</a></li>
<li id="navi03"><a href="kontakt.html" title="Zum Kontaktformular">Kontakt</a></li>
</ul>
</div> 

<div id="spalte03">
<h2>#spalte03</h2>
<p>Lorem ipsum dolor sit amet, ... </p>
</div> 

<div id="textbereich">
<h2>Startseite</h2>

<p><img src="roter_ballon.jpg" alt="Roter Luftballon" width="78" height="100" title="Roter Luftballon" class="bildrechts" />Webseiten bestehen aus <strong>rechteckigen Kästchen</strong>, die über-, neben- und ineinander gestapelt werden. Alles Runde ist entweder Trick oder Grafik oder beides.</p>

<p>Die folgenden Schritte zeigen den Weg vom Zusammenbauen der <em>Kisten</em> bis zur fertig gestalteten <em>Webseite</em>.</p>

<ol>
<li>So funktioniert HTML</li>
<li>Wichtige HTML-Elemente
<ul>
<li>Überschriften</li>
<li>Absätze und Listen</li>
<li>Links und Grafiken</li>
</ul>
</li>
<li>Gestalten mit CSS</li>
</ol>

<p>Weitere Infos zur DVD bekommen Sie bei <a href="http://www.video2brain.com" title="Startseite von video2brain">video2brain</a>.</p>

</div>

tomtom · 20.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

TimeePic schrieb:
du musst alle drei divs nach left floaten.

dann lag ich doch nicht verkehrt, hatte schon bammel.

eFoX · 20.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

guten abend liebe leute!
es war leider keine 'richtige' eindeutige lösung dabei, aber es hat mich angeregt und ich habe etwas umgebaut... und siehe da, nun geht es, ABER grafik "rechts" ist angeschnitten

was habe ich getan:

HTML:

#navigation {
margin-top: 50px;
}

#navigation_l {
background:url(l.png) #000;
width: 15%;
height: 176px;
float: left;
}

#navigation_mitte {
background:url(mitte.gif) repeat-x; 
height: 176px;
min-width:70%;
float: left;
}

#navigation_r {
background:url(r.png) #000;
width: 15%;
height: 176px;
float: left;
}

(ich habe gelesen ein gefloateter div wird als block element behandelt und erfordert demzufolge eine angabe der breite)

sokie · 20.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

wie ist es denn mit einer lösung mit absoluten positionierungen (innerhalb des wrappers):

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
  #wrapper{
    width: 80%;
    margin: auto;
    position: relative;
  }
  #links,#rechts{
    position: absolute;
    height: 170px;
    width: 170px;
    background: #C00361;
  }
  #links{
    left: 0;
  }
  #rechts{
    right: 0;
  }
  #mitte{
    position: absolute;
    top: 0;
    right:170px;
    left: 170px;
    background: #03A4C0;
    min-height: 400px;
  }
</style>
<title></title>
</head>

<body>
<div id="wrapper">
  <div id="links"></div>
  <div id="rechts"></div>
  <div id="mitte">inhalte</div>
</div>
</body>
</html>

Herr_D · 20.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

Relativ kleiner Fehler (oder auch groß) bezogen auf dein erstes Beispiel:

Du musst dem inneren (mitte) div keine Weite zuordnen, aber wenn du links und rechts floatest, dann musst du die reihenfolge der div im html beachten... erst die gefloateten, dann mitte ohne weite und float... dann passt sich auch die weite automatisch an...

Code:

<!doctype html public "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title>Flother Dreier</title>
<meta name="author" content="R.D">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<style type="text/css">
<!--
* {margin:0; padding:0 }

body {
font-size:100.01%;
font-family: sans-serif;
}


#outro {
width:800px;
margin:auto;
border:1px solid #000;
}

#navigation {
margin-top: 50px;
border: 1px solid green;
}

#navigation_l {
background: #000;
width: 170px;
height: 170px;
border: 1px solid red;
float: left;
}

#navigation_mitte {
background:#dedede;
border: 1px solid red;
height: 170px;
}

#navigation_r {
background: #000;
width:170px;
height: 170px;
border: 1px solid red;
float: right;
}

.klare_suppe {
clear:both:
}


-->
</style>
</head>
<body >
<div id="outro">
        <div id="navigation">
        <div id="navigation_l"></div>
        <div id="navigation_r"></div>
        <div id="navigation_mitte"></div>
        <div id="klare_suppe"></div>
</div>
</div>

</body>
</html>

Samuelll · 20.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

Hallo Herr D, interessante Variante.

Klappt die ohne Hacks auf allen Browsern ?
Ggf. auch mit Margins und Paddings ohne Probleme ?

eFoX · 23.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

Erstmal danke an sokie, Herr_D, tomtom und TimeePic für die freundliche Hilfe!

1) 3x Float:left => ging nicht
2) Position:Absolute => ging nicht
3) Float:left, Float:right und Mitte kein Float => ging nur bedingt, komischerweise hat sich dann der Mitte-Div über die ganze Länge gezogen. Im Nachhinein ist mir dann gestern das Problem bewusst geworden, man hätte einfach einen Margin rechts/links dafür einstellen müssen.

so hab ich das nun gelöst... (will heißen es funktioniert nun wie gewollt)
(eine Mischung aus Idee 2 und 3)

HTML:

#wrapper {
width: 80%;
margin: 50px auto 0px auto;
}

#navigation {
width: 100%;
height: 175px;
overflow: hidden;
position: relative;
}

#navigation_l {
background:url(l.png);
width: 49px;
height: 175px;
position: absolute;
left: 0;
top: 0;
}

#navigation_mitte {
background:url(m.png) repeat-x;
height: 175px;
margin: 0 49px;
}

#navigation_r {
background:url(r.png);
width:49px;
height: 175px;
position: absolute;
right: 0;
top: 0;
}

.klare_suppe {
clear: both;
}

HTML:

<div id="wrapper">

			<div id="navigation">
				<div id="navigation_l"></div>
				<div id="navigation_mitte"></div>
				<div id="navigation_r"></div>
			</div>
			<div class="klare_suppe"></div>
		
</div>

sokie · 23.02.2010

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

wobei du den div zum clearen da nun nicht mehr brauchst, weil ja nichts gefloatet wird.