Die maximale breite wird nicht erkannt

notebook20000 · #1 (**permalink**) 22.06.2006, 16:43

Hallo,

ich habe ein rehct verschachteltes LAyout mit div und css.

im eigentlichen Contenbereich möchte ich nun 2 divs nebeneinader stellen und das klappt mit floats auch ganz gut

wenn ich jetzt die linke tabelle auf 160px stelle udn die rechte auf "auto" dann wird die rechte nru so breit wie der inhalt. wenn ich die rechte auf 100% stelle verschiebt sie sich unter die linke tabelle und verbrät da wirklich die 100%

gibt es eigne möglichkeit für die rechte div fläche immer den maximalen zur verfügung stehenden bereich zu nutzen ohne fixe pixelangabe?

ich möchte die linketabelle per klick später ausblenden und dir rechte tabelle soll sich dann automatisch auf die volle breite ausdehnen

die funktionalität geht auch schon ganz gut aber da ich die rechte div element auf einen fixen pixelwert setzen musste, wird sie nciht automatisch ausgedehnt

Wie krieg ich also hin, das das rechte div Element sich auf die restliche Breite ausdehnt ohne unter das linke div zu springen?

mazzo · #2 (**permalink**) 22.06.2006, 17:18

Zitat:

Zitat von notebook20000

wenn ich jetzt die linke tabelle auf 160px stelle udn die rechte auf "auto" dann wird die rechte nru so breit wie der inhalt. wenn ich die rechte auf 100% stelle verschiebt sie sich unter die linke tabelle und verbrät da wirklich die 100%

100% breite plus irgendwas ist IMMER grösser als 100%. Somit muss das so gefloatete Element sich unter das andere schieben.

Zitat:

Zitat von notebook20000

gibt es eigne möglichkeit für die rechte div fläche immer den maximalen zur verfügung stehenden bereich zu nutzen ohne fixe pixelangabe?

z.B. 20% und 80%. Inklusive Rahmen und Abstände. Siehe Boxmodell.

Zitat:

Zitat von notebook20000

ich möchte die linketabelle per klick später ausblenden und dir rechte tabelle soll sich dann automatisch auf die volle breite ausdehnen

per Klick ausblenden? Dann mit Neuladen der Seite oder mit JavaScript?

Zitat:

Zitat von notebook20000

Wie krieg ich also hin, das das rechte div Element sich auf die restliche Breite ausdehnt ohne unter das linke div zu springen?

jedes Blockelement nimmt ohne andere Defintion den verfügbaren Platz ein. Wenn width nicht anders definiert ist, ist es auto und somit würde ein Element ohne definierte width genau den Platz einnehmen, den der gefloatete und Breiten-begrenzte Container übrig lässt.

fricca · #3 (**permalink**) 22.06.2006, 17:38

Zitat:

Zitat von notebook20000

ich habe ein rehct verschachteltes LAyout mit div und css.
[...]wenn ich jetzt die linke tabelle auf 160px stelle [...]

Also was jetzt?
Zeig bitte deinen Code.
http://xhtmlforum.de/40080-fuer-frag...twortende.html

notebook20000 · #4 (**permalink**) 22.06.2006, 17:47

Hallo,

also ich habe mal ein BEispiel geshen bei der ein div mit Höhe 50% definiert wurde und danach eins mit Höhe 100% . Laut dem Tutorial in dem ich das gesehen habe würde das erste Div die hälfte des Bildschrims übernehmen udn die zweite Div 100% des übrigen Rests. Also defakto 50%

Deshalb habe ich gedacht , das könnte auch in der Breite funktionieren

Der HTMl Code ist:

<!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">
<title>##TITLE##</title>

<script language="JavaScript" type="text/javascript" src="../includes/templates/##TEMPLATESET##//js/mm.js"></script>
<script language="JavaScript" type="text/javascript" src="../includes/templates/##TEMPLATESET##//js/main.js"></script>
<link rel="stylesheet" TYPE="text/css" href="../includes/templates/##TEMPLATESET##/css/main_admin.css">
<link rel="stylesheet" TYPE="text/css" href="../includes/templates/##TEMPLATESET##/css/detail.css">

</head>

<body onLoad="MM_preloadImages('images/buttons/r_produkte_on.gif')">
<div id="pagealign" align="center">
<div id="all">
<div id="header">
<div id="left">
<div id="logo"><img src="../includes/templates/##TEMPLATESET##/images/logo_kikoffice.png" border="0" ></div>
##LOGINBOX##
</div>
<div id="right">
<div id="navi1">
<ul>
<li><img src="../includes/templates/##TEMPLATESET##/images/buttons/m_home.gif"> <a href="?">Startseite</a></li>
<li><img src="../includes/templates/##TEMPLATESET##/images/buttons/m_kontakt.gif"> <a href="?page=contact">Kontakt</a></li>
</ul>
</div>
</div>
</div>

<div id="main">
<div id="mleft">
<div id="headall">Administration: ContentManagment</div>
<div id="call">
<div id="cleft">
<div id="clhead" onClick="expander('cleft','cexpander','14px')">Kun denliste:</div>
##CONTENT1##
</div>
<div id="cexpander">
<div id="clhead" onClick="expander('cleft','cexpander','14px')">Kun denliste:</div>
<div id="clcontent">jhjk</div>
</div>
<div id="cright">

<div id="crhead" onClick="expander('cleft','cexpander','14px')">Dat en:</div>
<div id="crcontent">
<form action="index.php" method="post" enctype="application/x-www-form-urlencoded" name="kundenform">
<div id="dtable">Kundennummer:</div><div id="dtable"></div><div id="dtable"><input name="test" type="text" value="test"></div>
</form>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>BB
</div>
</div>
</div>
<div id="clear"></div>
</div>
<div id="mright">
<div id="navi2">
##ADMINNAVIGATION##
</div>
</div>
</div>
<div id="footer">
<a href="?content">Impressum</a> | © 2006 by xyz
</div>
</div>
</div>

</body>
</html>

notebook20000 · #5 (**permalink**) 22.06.2006, 17:47

/* Allgemeien Taganpassungen*/

*
{
margin:0px;
padding:0px;
border:0px;
font-size: 11px;
font-family: arial, helvetica, sans-serif;
}

html
{
height:100%;
}

body
{
background-attachment: fixed;
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
background-position: left top;
height:100%;
min-height:100%;
}

input
{
background-image: url(../images/bg/verlauf1.gif);
font-size:11px;
border: 1px solid #000000;
padding:1px 4px 1px 4px;
background-color:#ffffff;
font-weight:bold;
}

form {margin: 0px;padding: 0px;display:inline;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}

img
{
border:0px;
padding:0px;
margin:0px;
}

#pagealign
{
height:100%;
}

/* Umgebung*/
div #all
{
width:770px;
min-width:770px;
height:auto;
min-height:100%;
background-color:#ffffff;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
}

/* Kopfbereich */
div #all #header
{
width:100%;
background-color:#3862A9;
height:36px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}

div #all #header #left
{
width:570px;
float:left;
color:#ffffff;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
}

div #all #header #left #logo
{
float:left;
width:105px;
}

div #loginbox /* Loginbox */
{
float:left;
text-align:right;
width:auto;
}
div #loginbox_login /* Loginbox eingeloggt*/
{
padding: 10px 10px 10px 10px;
float:left;
text-align:right;
width:445px;
color:#ffffff;
}

div #loginbox_login a /* Loginbox eingeloggt*/
{
color:#ffffff;
}

div #all #header #right
{
float:left;
width:198px;
background-color:#ffffff;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3862A9;
}

/* Mainbereich */
div #all #main
{
height:100%;
min-height:100%;
background-color:#FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3862A9;
}

div #all #main #mright
{
float:left;
width:198px;
height:auto;
min-height:100%;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3862A9;
}

div #all #main #mleft
{
float:left;
width:570px;
height:auto;
min-height:100%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
background-color:#ffffff;
}

/* Contentbereich */
div #all #main #mleft #headall
{
padding: 36px 10px 0px 14px;
background-color:#99CCFF;
color:#3862A9;
width:auto;
font-weight:bold;
font-size:18px;
text-align: left;
vertical-align:bottom;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
}

div #all #main #mleft #call /* Gesamtcontent */
{
float:left;
height:auto;
min-height:100%;
width:100%;
text-align:left;

}

div #all #main #mleft #call #cleft /* Content links*/
{
background-color:#ffffff;
width:180px;
height:auto;
min-height:100%;
float:left;
text-align:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
}

div #all #main #mleft #call #cexpander /* Ersetzt Content links als "Ausklapper" Ist am Anfang ausgeblendet*/
{
display:none;
background-color:#ffffff;
width:20px;
height:auto;
min-height:100%;
float:left;
text-align:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
}

div #all #main #mleft #call #cright /* Content rechts*/
{
height:auto;
min-height:100%;
width:auto;
/*float:left;width:389px; Wird durch margin-left:0px ersetzt. Dann klappts auch

*/
/*margin-left:0px; Funktioneirt leifer nicht im IE , da der Content dann rüberscrollt

*/
float:left;width:389px;
/*margin-left:0px;*/
}

div #all #main #mleft #call #clhead /* Kopf Content links*/
{
padding: 3px 4px 3px 16px;
background-color:#3862A9;
color:#ffffff;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
display:block;
cursor

ointer;
}
div #all #main #mleft #call #clhead:hover /* Kopf Content links Hovereffekt geht aber nur bei Firefox udn Opera*/
{
background-color:#5A84CB;
}

div #all #main #mleft #call #clcontent /* Inhalt Content rechts*/
{
height:auto;
min-height:100%;
padding: 3px 4px 3px 8px;
background-color:#ffffff;
color:#000000;
}

div #all #main #mleft #call #crhead /* Kopf Content rechts*/
{
padding: 3px 4px 3px 8px;
background-color:#3862A9;
color:#ffffff;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
display:block;
cursor

ointer;
}

div #all #main #mleft #call #crhead:hover /* Kopf Content rechts Hovereffekt geht aber nur bei Firefox udn Opera*/
{
background-color:#5A84CB;
}

div #all #main #mleft #call #crcontent /* Inhalt Content rechts*/
{
height:auto;
min-height:100%;
padding: 3px 4px 3px 8px;
background-color:#ffffff;
color:#000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
}

/* Fußbereich */
div #all #footer
{
clear: both;
height:60px;
background-color:#3862A9;
padding:1px 10px 10px 20px;
text-align:right;
color:#ffffff;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}

div #all #footer a
{
color:#ffffff;
}

/* Navigation 1 */
#navi1
{
font-size:11px;
}
#navi1 ul
{
text-align: right;
padding:10px 10px 10px;
}
#navi1 li
{
list-style-type: none;
display: inline;
}
#navi1 li:first-child
{
border: none;
}

/* Navigation 2 */
#navi2
{
text-align:left;
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-top-style:dotted;
border-top-color: #cccccc;
}
#navi2 a
{
display: block;
text-decoration:none
}
#navi2 a:hover
{
color:#ffffff;
background-color:#3862A9;
}
#navi2 #navi2head
{
font-size:13px;
font-weight:bold;
margin: 0px;
padding: 2px 2px 2px 10px;
}
#navi2 #navi2content
{
margin: 0px;
padding: 2px 2px 2px 10px;
}

/* Navigation 3 + 4 */
#navi3
{
float:left;
text-align:left;
padding-top:3px;
padding-bottom:4px;
padding-left:20px;
padding-right:2px;
}
#navi3_symbol
{
width:20px;
padding-left:2px;
float:right;
padding-right:4px;
}

#navi4
{
float:left;
text-align:left;
padding-top:3px;
padding-bottom:4px;
padding-left:34px;
padding-right:2px;
}
#navi4_symbol
{
width:20px;
padding-left:2px;
float:right;
padding-right:4px;
}

.listhead1
{
height:20px;
background-color:#ffffff;
display:block;
text-decoration:none;
cursor

ointer;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
}
.listhead1:hover
{
display:block;
background-color:#3862A9;
color:#ffffff;
text-decoration:none;
}

/* Allgemien Definition */
div #clear /* Beendet Floats

*/
{
clear:both;
}

notebook20000 · #6 (**permalink**) 22.06.2006, 17:50

wenn ich das float:left im rechten contentfeld durch margin:0px ersetze , gehts zwar mit der dynamischen ANpassung aber dann wird der Text in den linken BEreich gefloatet

Das ist nicht so gut.

Ist bei IE so udn ich glaube auch beim Firefox und Opera

heiko_rs · #7 (**permalink**) 22.06.2006, 17:51

Bevor ich mich da jetzt durchquäle, eine ganz einfache Antwort: Wenn Du 2 DIVs im Quelltext untereinander hast, bekommt das erste width: 160px; und float: left; und das zweite nichts weiter als margin-left: 160px; (3px-Korrektur für IE separat), dann nimmt es automatisch den restlichen Platz bis zum rechten Rand ein.

fricca · #8 (**permalink**) 22.06.2006, 17:53

Also manchmal.

Zitat:

Stell einen kompletten, lauffähigen Code ein, der einen das Problem sicher nachvollziehen lässt und der dabei auf Überflüssiges verzichtet. Selten, sehr selten sind dazu mehr als ein paar Handvoll Zeilen notwendig.

Was ist an diesem Satz so schwer verständlich?

notebook20000 · #9 (**permalink**) 22.06.2006, 21:08

Zitat
Also was jetzt?
Zeig bitte deinen Code.

und was habe ich jetzt falch gemacht? Nix und was hast du falsch gemacht? Alles! Dein Kommentar war ehr al irrelevant

fricca · #10 (**permalink**) 22.06.2006, 21:14

Zitat:

Zitat von notebook20000

und was habe ich jetzt falch gemacht?

Du hast nicht gelesen und nicht verstanden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Div auf maximale Breite ausdehnn lassen	mymaksimus	CSS	25	17.09.2013 14:32
Maximale Breite einer Seite oder div Elements?	Snorfes	(X)HTML	3	17.10.2011 21:33
Maximale Breite bei Selectboxen im Firefox	ole	CSS	1	08.08.2006 12:51
tabellen eine maximale breite zuweisen	java	CSS	6	10.03.2006 14:39
Maximale Höhe, maximale Breite.	Hausmeista	CSS	6	12.08.2005 14:55