XHTMLforum - 2 divs nebeneinander

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - 2 divs nebeneinander (http://xhtmlforum.de/showthread.php?t=60865)

2 divs nebeneinander

hallo,

ich will mir nun endlich mal layouts mit css beibringen, um die tablelayouts los zu werden. daher spiele ich mich mal rum, und stosse gleich zu beginn auf unüberwindbare probleme :)

hab alles gegoogelt und gesucht, aber nirgends was brauchbares gefunden.

das problem ist, dass ich eine tabelle nachbilden will.
also einfach: 2 divs nebeneinander, beide 50% breit. dabei will ich keine border, padding etc. addieren und fixe breiten angeben, sondern nur 50% zu jedem div sagen.

dann hab ich mir gedacht, ok, ein 'hautdiv', welches 2 divs hält, die jeweils 50% breit sind und keinen border etc. haben, das geht ja. wenn ich nun in diese beiden divs die eigentlichen inhalte lege, so müsste ich diesen ja wieder 100% geben können und margin, border usw.

aber leider nein,wenn ich das mache, dann blasen diese inneren divs sich einfach auf und bleiben nicht innerhalb des 50% begrenzungsdivs.

bitte helft mir da weiter, ich bin schon am verzweifeln :)

code hier:

HTML-Code:

        <style>

        #page{

                background-color:#e0e0e0;

        

                padding:0px;

                border:solid 1px green;

                

        }

        

        .cont{        

                width:50%;

                float:left;

                padding:0px;

                margin:0px;

        }

        

        .cont_inner{

                padding:2px;

                background-color:#f4f4f4;        

                width:100%;

                border:solid 5px #333333;

        }

        </style>

</head>



<body>



<div id=page>

        DIV PAGE<br>                

        <div class=cont>

                <div class=cont_inner>

                DIV COL 1

                </div>

        </div>        

         

        <div class=cont>

                <div class=cont_inner >

                DIV COL 2

                </div>

        </div>         

</div>

Hi,

da gehts schon falsch los!
Eine Tabelle ist nur für tabellarische Daten da und sonst für nix!

Wenn du tabellarische Daten hast nimm ne Tabelle, wenn nicht gestaltest und positionierst du nur mit CSS.

Du mußt erst mal deine Tabellendenke loswerden.
Diese Website wird dir dabei helfen. ;)

danke für den link.

bedeutet das, es ist tatsächlich so, dass ein unterelement sich nicht an der größe des übergeordneten hält? das hat ja im grunde dann nix mit tabellen denken zu tun, sondern damit, dass ich ein element nicht durch ein anderes begrenzen kann.

100% + padding + border ist einfach zu viel. Box Model!
Entferne width.

Du solltest dich wirklich der genannten Grundlagenlektüre widmen. Dir fehlt z.B. noch das Verständnis für das Verhalten von Blockelementen im normalen Fluss.

Bitte: Dein Code ist nur ein Fragment. Immer vollständig posten (Doctype!), am besten als Link.

thnx, ich hab mir die seite vorher schon angesehen. und leider ist da zu dem thema einfach nichts passendes zu finden. also im speziellen.
deshalb find ich ja auch leider bei google etc. nichts, denn jeder der eine ähnliche frage wie ich stellt, bekommt meist als antwort: lern die grundlagen.

bin ich ja bereit, keine frage. aber es muss doch eine möglichkeit geben, 2 oder mehrere divs mit variabler breite in einer zeile anzuordnen (mit border, margin...) und dabei eine fixe breite einzuhalten.
oder geht das einfach so nicht?

mir wäre sehr (auch fürs verständnis) geholfen, wenn man mein beispiel oben einfach um das erweitert, dass es geht, oder mir einfach sagt: nein, das geht gar nicht. oder halt einen anderen weg zeigt.
danke & lg

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

        <style>

        #page{

                background-color:#e0e0e0;

                width:50%;

                padding:0px;

                border:solid 1px green;

                position:relative;

        }

        

        .cont{        

                width:50%;

                float:left;

                padding:0px;

                margin:0px;

        }



        .cont_inner{

                padding:2px;

                background-color:#f4f4f4;        

                width:400px;

                border:solid 5px #333333;

        }

        </style>

</head>



<body>

<div id=page>

        <div class=cont>

                <div class=cont_inner>DIV COL 1</div>

        </div>        

         

        <div class=cont>

                <div class=cont_inner >DIV COL 2</div>

        </div>         

</div>

</body>

</html>

Noch einmal: Entferne width. Die inneren Elemente wissen selbst, wie breit sie sein dürfen.
(Was du jetzt postest ergibt keinen Sinn -- und ist schon wieder etwas völlig anderes.)
Außerdem musst du dich über den "Doctype Switch" informieren (Google).

Das Verhalten von Blockelementen im normalen Fluss und auch das Box-Model werden von Peter Müller ausführlich erklärt.
Du wirst nicht daran vorbeikommen, dieses Buch komplett durchzuarbeiten.

Zitat:

Zitat von fricca (Beitrag 463875)

Noch einmal: Entferne width. Die inneren Elemente wissen selbst, wie breit sie sein dürfen.

exakt, da war mein fehler. klar, dem innersten element darf ich nicht nochmal eine breite aufzwingen.
DANKE.