Beide Divs sollen die gleiche Länge haben

Shyne

Hallo

ich erstelle zurzeit so ein Feedback-Script (mit guestbook zu vergleichen).

nun hab ich jedoch bei der darstellung ein "kleines" problem.

Code

<style type="text/css">
.bg-main {
background-color: #f3f3f3;
padding: 5px;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
width: 500px;
float: middle;
}
.add {
background-color: #ccc;
padding: 5px;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
float: left;
width: 200px;
}
</style>


<body>


<div class="add">
Info Text
</div>


<div class="bg-main">
<font color=black>
Main Text
</div>

Alles anzeigen

beim hinzufügen lange nachrichten, wird der text nach unten gedrückt und somit wird der textfeld auch länger.
nun, da ich hier 2 mal Div habe, sieht es sehr unschön aus, wenn "bg.main" länger als "add" ist.

das ganze könnt ihr mit einem forum-beitrag vergleichen.

wüsste jemand wie ich dieses problem lösen könnte?

PS: bei weiteren design-tipps was dieses script betrifft, wär ich auch dankbar

Elvis

faux columns

Shyne

hmm ... habs durchgelesen aber irgendwie versteh ichs immer noch nicht. gibt es ein besseres beispiel dafür?

sejuma

Eigentlich nicht (allenfalls evtl. hier
Du musst beide Container in einen übergeordneten packen. Für dessen Hintergrund benötigst du eine pixelgenaue Grafik, welche du mit einem Grafikprogramm anfertigen kannst.
Dieser Demo liegt z.B. diese Hintergrundgrafik zugrunde.

Shyne

die seite http://www.friedels-home.com/index.htm?//Ku…/Teil01/035.htm geht leider nicht (The requested URL /CSSsejuma/Teil01/035.htm was not found on this server.)

aber warum muss dann sowas durch einem grafik erstellen? durch tables o.ä. würd es doch auch gehen, oder nicht?

sejuma

Sorry, das müsste klappen: http://www.friedels-home.de/index.html?/Ku…Teil01/035.html

Ja, mit Tabellen geht das. Mit Divs leider nicht ohne diesen "Trick".

chris90night

Ja klar, mit einem Tabellenlayout kriegst du das in 2 Minuten hin. Das ist auch ein Grund, warum einige wieder darauf umgestiegen sind.
Aber CSS ist nunmal Webstandard und deshalb ist es schlecht etwas Älteres zu verwenden.

Shyne

gott ist ja voll sch*** das ganze!!!!

Code

<style type="text/css">


#wrapper {
	margin-top: 1px;
	background-image: url(http://www11.file-upload.net/thumb/31.12.07/m66up.gif);
	background-repeat: repeat-y;
}


.bg-main {
padding: 5px;
width: 500px;
float: middle;
}


.add {
padding: 5px;
float: left;
width: 200px;
}


</style>


<body>
<div id="wrapper">


<div class="add">
<font color="#FFFFFF">
Info Text
</font>
</div>




<div class="bg-main">
<font color=#FFFFFF>
<pre>
Main Text
Main Text
Main Text
Main Text
Main Text
</font></pre>
</div>


</div>

Alles anzeigen

das mit der länge hab ich nun hinbekommen. nun wie kann jetzt den text positionieren?

hätte nie gedacht dass es so viel aufwand macht!

Lizzard

Entferne erstmal die <pre>-Tags, was versuchst du mit denen zu bewirken? Dann könntest du auch gleich die Font-Tags entfernen, stattdessen

-Tags benutzen, und darüber dann den Text formatieren, z.b.:

Code

p {
  text-align: left;
  margin: 4px;
  color: #FFFFFF;
  font-size: 0.8em;
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

Gruß,
Lizzard

Shyne

hab ich gemacht aber beim <div class="bg-main"> wird der text trotzdem rechts eingeblendet.

Tags

Benutzer online in diesem Thema