div element passt sich nicht an

Status
Nicht offen für weitere Antworten.
B

blubbbla

Erfahrenes Mitglied
Ich habe ein drei - spaltiges Layout und einen Header drüber. Rechts die Spalte soll rechts bleiben und sich dem Inhalt anpassen. Aber die Spalte wird einfach 100% breit :confused: und rutscht dann natürlich unter den ganzen Inhalt. Im Safari, Opera passt das, nur der Firefox spinnt rum und IE auch ein bisschen

C: 
<body>
<div id="wrapper">
	<div id="header">header</div>
	<div id="left">links</div>
	<div id="content">inhalt</div>
	<div id="right">
		<div class="side_by_side">
			<span class="label">Name:</span>
    		<span class="field"><input type="text" size="15" /></span>
		</div>
	</div>
</div>
</body>


/******************************* kompletter Körper der Seite *********************************/
body {
	padding: 0px;
	margin: 0px;
	background-color: White;
	padding:20px;
	text-align: center;
}

/******************************* alle großen Container ****************************************/

/* Container, welcher alles zusammenhält */
#wrapper{
	width: 973px;
	margin: 0 auto;
}

/* Kopf */
#header {
	height: 100px;
}

/* Hauptinhalt */
#content {
  width: auto;
  background-color: #ffffc6;
  float:left;
}

/* links */
#left {
	position: relative;
	float:left;
	width: auto;
	height: 300px;
	background-color: Silver;
}

/* rechts */
#right {
	position: relative;
	width: auto;
	height: 300px;
	background-color: Olive;
	float: right;
}

/******************************* restlichen div - Elemente *******************************/

/* enthält zwei Elemente nebeneineinander, z.B. für ein Formular ****/
.side_by_side{
	clear: both;
	padding:2px;
}

/***************************** Formatierung für span - Elemente *************************/

/* befindet sich links, z.B. für ein Formular */
.label {
  float: left;
  text-align: right;
  padding-top: 3px;
  padding-right: 5px;
}

/* befindet sich rechts, z.B. für ein Formular */
.field {
  float: right;
  text-align: left;
}
 
Zuletzt bearbeitet:
Hi,

meines Erachtens sitzt die "Soll-Bruchstelle" in der float:right-Deklaration für die Klasse .field, gepaart mit den automatischen Breitenangaben für alle drei floatenden Spalten.
 
also alle drei spalten sollen sich automatisch dem inhalt anpassen - deswegen "auto". wenn ich bei "field" left nehme, dann klappt das zwar, aber die felder sind nicht mehr genau untereinander ?
 
Solange die "Felder" mit float:right oder float:left ausgezeichnet sind, können sie auch nicht untereinander erscheinen.

Und bitte halte dich an die Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank. ;)
 
Na wenn ich es nun so habe:

C: 
/* befindet sich links, z.B. für ein Formular */
.label {
  float: left;
  padding-top: 3px;
  padding-right: 5px;
  text-align: right;
}

/* befindet sich rechts, z.B. für ein Formular */
.field {
  float: left;
  text-align: right;
}

Dann passt zwar alles, aber sie sind eben nicht untereinander - wenn ich left und right nehme, sind die untereinander - aber die rechte Spalte ist verschoben. Zwickmühle :eek:
Und nun?
 
Bei mir erscheinen die Felder auch bei left / right völlig regelkonform nebeneinander, spasseshalber hab ich sie hier mal dupliziert (Screenshot FF 2.0.0.6):

demo_firefox.jpg

Hast du dir eigentlich schon mal Gedanken darüber gemacht bzw. dir das Resultat betrachtet, wenn der Inhalt der drei Spalten die vorgegebene Breite des Elternelements #wrapper überschreitet?
 
Oh bei dir sieht das ja noch falscher aus, als bei mir.

Es soll so aussehen:

Name: [______________]
Adresse: [______________]

Aber die Input - felder genau untereinander und die Scrhfit eigentlich rechtsbündig.

Und der grüne Bereich soll einfach mal rechts eine Spalte bleiben, wie im Safari oder Opera!

Nein, habe ich nicht :confused:
 
Zuletzt bearbeitet:
Vielleicht hilft dir dieses Modell weiter?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_blubbbla</title>

<style type="text/css">
<!--
/******************************* kompletter Körper der Seite *********************************/
body {
        padding: 0px;
        margin: 0px;
        background-color: White;
        padding:20px;
        text-align: center;
}

/******************************* alle großen Container ****************************************/

/* Container, welcher alles zusammenhält */
#wrapper{
        width: 973px;
        margin: 0 auto;
}

/* Flotumgebung zum Abschluss "clearen" */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Kopf */
#header {
        height: 100px;
}

/* Hauptinhalt */
#content {
  width: auto;
  background-color: #ffffc6;
  float:left;
}

/* links */
#left {
        position: relative;
        float:left;
        width: auto;
        height: 300px;
        background-color: Silver;
}

/* rechts */
#right {
        position: relative;
        max-width: auto;
        height: 300px;
        background-color: Olive;
        float: right;
}

/******************************* restlichen div - Elemente *******************************/

/* enthält zwei Elemente nebeneineinander, z.B. für ein Formular ****/
.side_by_side{
        clear: both;
        padding:2px;
}

.side_by_side ul {
        list-style:none;
        margin:0;
        padding:0;
        text-align:left;
}

/***************************** Formatierung für span - Elemente *************************/

form {
  margin:0;
  padding:0;
}

/* befindet sich links, z.B. für ein Formular */
.label {
  padding-top: 3px;
  padding-left: 5px;
  float:left;
  width:90px;
}

/* befindet sich rechts, z.B. für ein Formular */
.field {
  text-align:right;
}
-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
        <div id="header">header</div>
        <div id="left">links</div>
        <div id="content">inhalt</div>
        <div id="right">
                <div class="side_by_side">
                    <form>
                         <ul>
                             <li><span class="label">Name:</span><input class="field" type="text" size="15" value="Name" /></li>
                             <li><span class="label">Adresse:</span><input class="field" type="text" size="15" value="Adresse" /></li>
                         </ul>
                    </form>
                </div>
        </div>
</div>
</body>
</html>
 
Du sprichst hier dann wohl vom IE auf einem MacOS, denn in den Windows-Versionen funktioniert das Modell tadellos.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück