2 divs in einem rechtsbündig mit float und clear

Toxictype · 20. Nov. 2007

Hello again,

ich tüftel schon eine ganze Weile an meinem CSS-Prob, lese immer wieder die float und clear Story (u.a. die tollen Links von anna55

), aber komme nicht weiter.

Ich hoffe, ihr könnt mir weiterhelfen. div bild soll 100px vom rechten Bildschirmrand platziert werden. Das klappt noch! ;-)
Jetzt soll div bild genau links daneben platziert werden. Das haut nicht hin.
Wenn ich im div logo float: left "aktiviere" steht es zwar links vom div bild, aber nicht direkt daneben. Alle weiteren Versuche mit clear, float hatten
über- und untereinander stehende divs zur Folge.

index.html:

PHP:

<body>
...
<div id="center">
    <div id="logo"></div>
    <div id="bild"><img src="grafix/streifen_bg_bild.png"></div>
</div>
...
</body>

CSS-Datei:

PHP:

...
#center {
width: 100%;
height: 250px;
background-color: #FFFFCC;
background-image: url(../grafix/stripes_compl.png);
background-repeat: repeat-x;
border: 1px solid #FFFFFF;
}

#bild {
float: right;
margin-right: 100px;
/* width: 650px; */
height: 250px;
background-image: url(../grafix/schere.jpg);
border: 1px solid #000000;
}

#logo {
/* float: left; */
width: 308px;
height: 250px;
background-image: url(../grafix/haut_haar.png);
background-repeat: no-repeat;
background-position: bottom;
border: 1px solid #000000;
}

[/PHP]

Toxictype · 20. Nov. 2007

Na klasse!
Nun bin ich auf bines Thread "divs nebeneinander alle 100% Höhe" gestossen, habe meinen Fehler bemerkt (clear: both in die CSS Datei gepackt und nicht in ein div in der index.html)!

Aber vielleicht kann mir jemand sagen, wie man es anstellt, dass die beiden divs auch beim verkleinern des Browserfensters an den Positionen bleiben!

anna55 · 20. Nov. 2007

Weiß nicht, ob ich Deine Beschreibung richtig verstanden habe, es kam irgendwie häufig div bild drin vor. Hab mal was gebastelt. Ist das so in etwa ok?

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<title>Dokumenttitel</title> 
<style type="text/css">
#center {
width: 100%;
height: 250px;
background-color: #FFFFCC;
background-image: url(../grafix/stripes_compl.png);
background-repeat: repeat-x;
border: 1px solid #FFFFFF;
}
#bild {
margin-left:0 auto;
margin-right: 100px;
height: 250px;
background-image: url(../grafix/schere.jpg);
border: 1px solid #000000;
}
#logo {
float:left;
width: 308px;
height: 250px;
background-image: url(../grafix/haut_haar.png);
background-repeat: no-repeat;
background-position: bottom;
border: 1px solid #000000; 
}
*html #logo {
margin-right:-3px;
}
</style>
</head>
<body> 
<div id="center">
    <div id="logo"></div>
    <div id="bild"><img src="grafix/streifen_bg_bild.png"></div>
</div> 
</body> 
</html>

Toxictype · 22. Nov. 2007

Hi anna,

vielen Dank für Deine Antwort.
Leider hat es nicht den gewünschten Erfolg gebracht, aber ich habe es folgendermaßen lösen können:

PHP:

...
<body>
	<div id="ma_container">
		<div id="top">top
			<div id="top_menu">menu</div>
		</div>
		<div id="center">
			<div id="bild"><img src="grafix/streifen_bg_bild.png"></div>
			<div id="logo"></div>
			<div style="clear: both;"></div>
		</div>
		<div id="bottom">
		    <div id="rose"><img src="grafix/rose.jpg"></div>
			<div id="text">text</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</body>
...

CSS:

PHP:

...
#center {
width: 100%;
height: 250px;
background-color: #FFFFCC;
background-image: url(../grafix/stripes_compl.png);
background-repeat: repeat-x;
}

#bottom {
width: 100%;
}

#bild {
float: right;
margin-right: 100px;
width: 650px;
height: 250px;
background-image: url(../grafix/schere.jpg);
}

#logo {
float: right;
margin-right: 20px;
margin-bottom: 25px;
width: 308px;
height: 225px;
background-image: url(../grafix/logo.png);
background-repeat: no-repeat;
background-position: bottom;
}
...

Das div logo sitzt nun artig links neben dem div bild, das wiederum 100px vom rechten Rand entfernt ist.

Wenn ich das Browserfenster nun verkleinere, rutscht das div logo allerdings unter das div bild. Kann ich das mit einer festen Größe ändern? Oder gibt es eine bessere Idee?

thx
Tox

dkdenz · 22. Nov. 2007

http://forum.jswelt.de/css-und-x-html/26808-bitte-lesen-vereinfachung-von-hilfestellungen.html

anna55 · 25. Nov. 2007

Toxictype schrieb:
Wenn ich das Browserfenster nun verkleinere, rutscht das div logo allerdings unter das div bild. Kann ich das mit einer festen Größe ändern? Oder gibt es eine bessere Idee?

Habs festgenagelt:

PHP:

<!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" xml:lang="de" lang="de">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title>Fixes Logo</title>
<!--[if lte IE 7.0]>
<style type="text/css">
#logo {
margin-right:-336px;
}
</style>
<![endif]-->

<style type="text/css">
#center {
width: 100%;
height: 250px;
background-color: #FFFFCC;
background-image: url(../grafix/stripes_compl.png);
background-repeat: repeat-x;
}

#bottom {
width: 100%;
}

#bild {
position: absolute;
margin-right: 100px;
margin-left: 360px;
width: 650px;
height: 250px;
background: url(../grafix/schere.jpg);
} 


#logo {
float: left;
margin-right: 20px
margin-left:0px;
margin-bottom: 25px;
width: 308px;
height: 225px; 
background-image: url(../grafix/haut_haar.png);
background-repeat: no-repeat;
background-position: right bottom; 
padding-left:30px;
} 
</style>
</head> 

<body>
    <div id="ma_container">
        <div id="top">top
            <div id="top_menu">menu</div>
        </div>
        <div id="center"> <div id="logo"></div>
            <div id="bild"><img src="../grafix/streifen_bg_bild.png" /></div>
           
            <div style="clear: both;"></div>
        </div>
        <div id="bottom">
            <div id="rose"><img src="../grafix/haut_und_haar_rose.jpg" /></div>
            <div id="text">text</div>
            <div style="clear: both;"></div>
        </div>
    </div>
</body> 
</html>

Toxictype · 27. Nov. 2007

Hi anna55,

bekommt man solch eine feste Positionierung "nur" mit position: absolute; hin?

Gruß
Tox

ein schlauer · 27. Nov. 2007

Ich hab keine Ahnung was das wird, auch das beispiel erschliest sich mir nicht. Das sind viele zu viele DIVs, seltsam angeordnet, horizontale Scrollbalken.

Ich hab versucht zu verstehen um was geht, aber scheitere an dieser Formulierung:

Ich hoffe, ihr könnt mir weiterhelfen. div bild soll 100px vom rechten Bildschirmrand platziert werden. Das klappt noch! ;-)
Jetzt soll div bild genau links daneben platziert werden. Das haut nicht hin.

Für mich klingt es, als ob du was ganz einfaches willst, nur was?

[EDIT]auch die Formulierung "feste positionierung" ist in CSS extrem undeutlich.
Es gibt mehrere Möglichkeiten wie das gemeint ist. Einmal als direkte Übersetzung eines "fixen" Elementes, also position:fixed oder fest verankert an einer Stelle im Dokument, also absolute oder fest in Relation zu anderen Elementen, also relative oder besser noch gar keine Positionierung.

Toxictype · 27. Nov. 2007

@schlauer:
Oh mann, Du hast recht! Es soll so heissen:
Ich hoffe, ihr könnt mir weiterhelfen. div bild soll 100px vom rechten Bildschirmrand platziert werden. Das klappt noch! ;-)
Jetzt soll div logo genau links daneben platziert werden. Das haut nicht hin.

auch die Formulierung "feste positionierung" ist in CSS extrem undeutlich.
Es gibt mehrere Möglichkeiten wie das gemeint ist. Einmal als direkte Übersetzung eines "fixen" Elementes, also position:fixed oder fest verankert an einer Stelle im Dokument, also absolute oder fest in Relation zu anderen Elementen, also relative oder besser noch gar keine Positionierung.

position: fixed; ist nicht gemeint.
Fest verankert kommt der Sache schon näher, ist aber auf Grund der verschiedenen Auflösungen der User auch nicht das Wahre.
Vielleicht ist relative die beste Lösung. Werde es mal ausprobieren.

Wieso gar keine Positionierung?
Bei mehreren Elementen kommt man um eine Positionierung doch nicht herum.

Tox

ein schlauer · 27. Nov. 2007

Ich komme mit deiner Struktur nicht klar. Aber wenn es dir darum geht ein Bild rechts neben einem Textbereich anzuordnen, dann geht das einfach so:

PHP:

#center {
	height: 250px;
	background-color: #FFC;
	border: 1px solid #fff;
	padding-right:100px;
}

#center img {
	float: right;
}

#logo {
	height: 100%;
	margin-right: 100px;
	border: 1px solid #000000;
}

PHP:

<div id="center">
    <img src="bilder/foto1.jpg">
    <div id="logo"></div>
</div>

Allerdings weiß ich nicht, welche Bedingungen noch erfüllt werden sollen.

Toxictype · 27. Nov. 2007

Mmmhh...das sieht gut aus!
Scheinst ein schlauer zu sein!

Ich habe es mit einem zusätzlichen div namens "bottom" (Inhalt auch zwei Grafiken bzw. Bilder) unter "center" getestet. Läuft perfekt! Allerdings setzen sich die rechten Bilder über die linken, wenn das Browserfenster verkleinert wird. Aber das müsste zu ändern sein.

Ich werde das Ganze morgen mal näher in Augenschein nehmen.
Danke Dir!

Tox

Toxictype · 29. Nov. 2007

hello again,

ich habe es mit der Idee von ein schlauer probiert, aber aus mir unerklärlichen Gründen funzt es mit drei divs nicht! Außerdem sind die Grafiken auf der linken Seite nicht rechtsbündig.

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Dokumenttitel</title> 
<style type="text/css">
body {
font-size: 10px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
padding: 0;
margin: 0;
}

#top{ 
height: 100px; 
background-color: #990033; 
padding-right: 100px; 
} 

#center { 
height: 250px; 
background-color: #FFFFCC; 
 padding-right:100px; 
} 

#bottom { 
height: 300px; 
background-color: #663333; 
padding-right:100px; 
}

#top div { 
float: right; 
} 

#center img { 
float: right; 
} 

#bottom img { 
float: right; 
}

#top_menu {
text-align: left;
padding-top: 5px 5px;
width: 650px;
height: 30px;
background-image: url(../grafix/bg_menu.png);
}

#logo { 
height: 100%; 
margin-right: 100px; 
border: 1px solid #000000;
background-image: url(../grafix/logo.png);
background-repeat: no-repeat;
}

#bild { 
height: 100%; 
margin-right: 100px;  
background-image: url(../grafix/bild_rose.jpg);
background-repeat: no-repeat;
}
</style> 
</head> 
<body>
<div id="top"> 
    <div id="top_menu">Link 1 | Link2 | Link3</div>  
</div>

<div id="center"> 
    <img src="grafix/bg.jpg"> 
    <div id="logo"></div> 
</div>

<div id="bottom">
    <img src="grafix/bg.jpg"> 
    <div id="bild"></div>
</div>
</body> 
</html>

ein schlauer · 29. Nov. 2007

ohne Bilder ist das nur schwer nachzuvollziehen, bei mir sind die Bilder links bündig. und was funzt nicht?

dkdenz · 29. Nov. 2007

Mir stellt sich die Frage, ob solch ein Konstrukt überhaupt sein muss,
oder ob das Ganze nicht viel einfacher zu lösen wäre...

2 divs in einem rechtsbündig mit float und clear

Toxictype

New member

Toxictype

New member

anna55

Moderator

Toxictype

New member

dkdenz

New member

anna55

Moderator

Toxictype

New member

ein schlauer

Lounge-Member

Toxictype

New member

ein schlauer

Lounge-Member

Toxictype

New member

Toxictype

New member

ein schlauer

Lounge-Member

dkdenz

New member