mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 14:03 Benutzername: Passwort: Auto-Login

Thema: CSS problem mit floatenden DIVS und der Höhe vom 02.02.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS problem mit floatenden DIVS und der Höhe
Autor Nachricht
Evilmachine
Threadersteller

Dabei seit: 30.10.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 02.02.2010 16:57
Titel

CSS problem mit floatenden DIVS und der Höhe

Antworten mit Zitat Zum Seitenanfang

Hallo Leute,

sitze mal wieder an nem CSS Design welches mir die Nerven raubt.
Ich habe zwei Floatende DIVS nebeneinander. DIV A links DIV B rechts.

Bei beiden habe ich das Problem das die Höhe nicht dem Inhalt angepasst wird. Habe schon ein p clear both drunter gemacht.

Weiß einer Abhilfe??

Hier der Link http://natur.utemuehlbauer.de/index.php?id=17

Hier der Code:

CSS:

Code:
@import url("horizontal.css");
* {
    padding:0;
    margin:0;
   
}
#rechte_spalte {
    float: right;
    width: 330px;
    height: 520px;
    background-color:#fff;
}
#alles {
    width:1050px;
    background-color:#fff;
    margin:auto;
   
}
body {
 background-color: rgb(102,102,102);
    margin:0px;
    padding:0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
}
.p {
    margin:0px;
    padding:0px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-align: inherit;
    color: inherit;
    line-height: inherit;
    vertical-align: top;
}
p {
    padding-top:0px;
    margin-top:0px;
}
img {
    border:0px;
}
div {
    margin:0px;
    padding:0px;
    font-family:verdana; font-size:12px;
}
.AbsWrap {
    width: 100%;
    position: relative;
}
.rowWrap {
    width: 100%;
}
.clearfloat {
    clear:both;
    height:0px;
}
a:link, a:visited{
    COLOR:inherit;
    text-decoration:inherit;
}
#main {

    width:100%;
    margin: 0px auto 0px auto;
    border: 0px solid #f0f0f0;

}
#oben {
    margin-left:0px;
    margin-top:0px;
    width:100%;
    height:102px;
    margin-bottom:0px;
    background-image:url(bilder/bg_oben.gif);
    background-repeat:no-repeat;
    background-position:top right;
    background-color:#ecf6f0;


}
#navigation {
    margin-top:0px;
    width:100%;
    height:32px;
    margin-bottom:0px;
    background-image:url(bilder/bg_nav.gif);
    background-repeat:repeat-x;
    font-size: medium;
    color: #FFF;
    line-height: 25px;
    text-indent: 25px;

}
#header {
    margin-left:0px;
    margin-top:0px;
    width:100%;
    height:150px;
    margin-bottom:0px;
        background-image:url(bg_header_gruen.png);
    background-repeat:no-repeat;
    padding-left:740px;

}
#headline {
    margin-left:0px;
    margin-top:0px;
    height:28px;
    margin-bottom:0px;
    background-image:url(bilder/bg_headline.gif);
    background-repeat:repeat-x;
    font-size: medium;
    font-weight:bold;
    color: #FFF;
    font-weight: bold;
    line-height: 25px;
    text-indent: 25px;


}
#headline:first-letter {
    font-size:24px;
}
#inhalt {
    width:720px;
    height:700px;
    float: left;
    background-color:#FFF;
    background-image:url(bilder/bg_inhalt_ul.gif);
    background-repeat:no-repeat;
    background-position: bottom left;
}
#text {
    width:720px;
    height:520px;
    background-image:url(bilder/bg_inhalt_or.gif);
    background-position:top right;
    background-repeat:no-repeat;

}
#text_final {
    padding:25px;
}
#zitat {
    width:350px;
    height:60px;
    font-size:38px;
    color:#000;
    float: right;
    margin-top:25px;
    margin-right:100px;
}
.zitat {
    font-size:16px;
    color:#000;
}
#aktuelles {
    height:130px;
}
table.tabletemplate2  {
  empty-cells: show;
  border-collapse: collapse;
}

caption.tabletemplate2  {
  font-size: 14px;
  color: rgb(102,102,102);
  text-align: left;
  padding-bottom: 3px;
}

th.tabletemplate2-title   {
  padding: 6px;
  padding-left: 10px;
  border-left: 1px solid rgb(153,153,153);
  border-right: 1px solid rgb(153,153,153);
  border-bottom: 3px solid white;
  font-size: 14px;
  color: white;
  background-color: rgb(0,167,73);
}

td.tabletemplate2-row1-col1  {
  padding: 3px;
  padding-left: 10px;
  border-left: 1px solid rgb(153,153,153);
  border-right: 1px solid rgb(153,153,153);
  border-bottom: 3px solid white;
  background-color: rgb(247,247,247);
}

td.tabletemplate2-row1-col2   {
  padding: 3px;
  padding-left: 10px;
  border-left: 1px solid rgb(153,153,153);
  border-right: 1px solid rgb(153,153,153);
  border-bottom: 3px solid white;
  background-color: rgb(247,247,247);
}

td.tabletemplate2-row2-col1   {
  padding: 3px;
  padding-left: 10px;
  border-left: 1px solid rgb(153,153,153);
  border-right: 1px solid rgb(153,153,153);
  border-bottom: 3px solid white;
  background-color: rgb(240,247,241);
}

td.tabletemplate2-row2-col2   {
  padding: 3px;
  padding-left: 10px;
  border-left: 1px solid rgb(153,153,153);
  border-right: 1px solid rgb(153,153,153);
  border-bottom: 3px solid white;
  background-color: rgb(240,247,241);
}

td.tabletemplate2-empty   {
}
/* Ueberschriften */

.headline1 {
  font-size: 16px;
  font-weight: bold;
  color: rgb(0,167,73);
  margin-bottom: 6px;
}

.headline2 {
  font-size: 14px;
  font-weight: bold;
  color: rgb(0,102,44);
  margin-bottom: 4px;
}

.headline3 {
  font-size: 12px;
  font-weight: bold;
  color: rgb(102,102,102);
  margin-bottom: 3px;
}
h1 {
  font-size: 16px;
  font-weight: bold;
  color: rgb(0,167,73);
  margin-bottom: 6px;
}

h2 {
  font-size: 14px;
  font-weight: bold;
  color: rgb(0,102,44);
  margin-bottom: 4px;
}

h3 {
  font-size: 12px;
  font-weight: bold;
  color: rgb(102,102,102);
  margin-bottom: 3px;
}
HTML:

Code:
<!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=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./main_verein.css" media="all" />
<!--[if IE]>
<style type="text/css" media="all">.borderitem {border-style:solid;}</style>
<![endif]-->
</head>

<body>
<!-- ###DOKUMENT### begin -->

<div id="alles">
<div id="main">
<div id="oben">
    <a href="index.php"><img src="http://natur.utemuehlbauer.de/fileadmin/styles/bilder/logo.gif" alt="Zur&uuml;ck zur Startseite" /></a>
<div id="zitat">###ZITAT###</div>
</div>
<div id="navigation">
###MENU###
</div>
<div id="header"><br />
  ###AKTUELLES###
 </div>

<div id="headline">###HEADLINE###</div>
<div id="inhalt">
<div id="text">
<div id="text_final">
###INHALT###</div>
</div>

</div><div id="rechte_spalte">###RECHTS###</div>

</div><p style="clear: both;">
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>
Danke im Voraus.
  View user's profile Private Nachricht senden
itek

Dabei seit: 08.03.2006
Ort: 127.0.0.1
Alter: -
Geschlecht: Männlich
Verfasst Di 02.02.2010 20:04
Titel

Antworten mit Zitat Zum Seitenanfang

Aus #inhalt und #text die "height"-Angabe löschen.

Edit: Und dein padding-left im #header macht aus deiner 100% Angabe ganze 100% + 740px und zaubert damit einen wunderbar überflüssigen Scrollbalken ..


Zuletzt bearbeitet von itek am Di 02.02.2010 20:12, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Evilmachine
Threadersteller

Dabei seit: 30.10.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 02.02.2010 20:26
Titel

Antworten mit Zitat Zum Seitenanfang

Ahh ich könnt mich schlagen.

Manchmal sieht man den Wald vor lauter Bäumen nicht^^

Ich danke vielmals.


Zuletzt bearbeitet von Evilmachine am Di 02.02.2010 20:26, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen verschachtelete divs mit 100% Höhe
Höhe von 2 DIVs angleichen - wie?
gleiche höhe für divs?
Höhe definieren eines divs
3 Divs nebeneinander im Container auf einer Höhe?
Höhe eines divs mit javascript bestimmen.
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.