HTML/CSS - 2 Kästen als Content

nitram0598 · #1 (**permalink**) 17.06.2013, 17:18

Hallo!

ich möchte zwei kästen (div id="right und div id="left") nebeneinander, wie der name es sagt, ahben

bei mir funktioneirt das baer net, was habe ich falsch gemacht?

hier die dateien:
html: [HTML] index.html - Pastebin.com
css: [CSS] style.css - Pastebin.com

danke für eure hilfe

Manfred62 · #2 (**permalink**) 17.06.2013, 18:35

Fehler: viele position, Boxmodell nicht beachtet und noch ein paar Dinge..
Demo:

HTML-Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>nitware</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        color: #333;
        font: 100%/1.5 Arial, sans-serif;
    }
    #container {    
        width: 1200px;
        margin: 0 auto;
    }
    #nav {
        float: left;
        width: 100%;
    }
    #nav ul {

    }
    #nav li {
        width: 100px;
        text-align: center;
        list-style-type: none;
        float: left;                
        border-left: solid 1px #777;
    }
    #nav a {
        display: block;
        text-decoration: none;
        color: #333;
        font-weight: bold;
        text-transform: uppercase;
        padding: 10px;                
    }
    #nav a:hover {
        color: #fff;
        background: #f00;
    }
    #left, #right {
        border: 5px solid #333;
        padding: 5px;
        float: left;
    }
    #left {
        width: 980px;
        background: #eee;
    }
    #right {
        border-left: 0;
        width: 185px;
        background: #ddd;
    }
    /* clearfix */
    .cf:before, .cf:after {
        content:" ";
        display:table;
    }
    .cf:after {
        clear:both;
    }
    .cf {
        *zoom:1;
    }
    </style>
</head>

<body>
    <div id="container" class="cf">
        <div id="nav">
            <ul>
                <li><a href="#home">home</a></li>
                <li><a href="#news">news</a></li>
                <li><a href="#kontakt">kontakt</a></li>
            </ul>
        </div>
        <div id="left">
            left
        </div>    
        <div id="right">
            right
        </div>
    </div>
</body>
</html>

gute Basislektüre zum lernen: Little Boxes

nitram0598 · #3 (**permalink**) 17.06.2013, 18:59

danke, aber wie bekomme ich jetzt bei left udn right noch

height: auto;
top: 50px;
bottom: 200px;

dazu, wenn ich es hinzufüge passiert nix?

threadi · #4 (**permalink**) 17.06.2013, 19:20

Die Eigenschaften bottom und top (ebenso auch left und right) wirken nur auf nicht-static positionierte Elemente. Durch die Überarbeitung von Manfred62 ist der Quellcode jetzt frei von solchen Elementen, weshalb diese Eigenschaften nun auch nicht mehr wirken. Wenn Du Abstände ergänzen willst, verwende margin oder padding.

nitram0598 · #5 (**permalink**) 17.06.2013, 19:23

ich verstehe nicht wie du das meinst

threadi · #6 (**permalink**) 17.06.2013, 19:28

Was margin und padding sind?
SELFHTML: Stylesheets / CSS-Eigenschaften / Auenrand und Abstand
SELFHTML: Stylesheets / CSS-Eigenschaften / Innenabstand

Beispiele findest Du unter den Links.

Beispiel bezogen auf deinen Code:

Code:

#left {
        margin-right: 20px;
        width: 980px;
        background: #eee;
    }

Manfred62 · #7 (**permalink**) 17.06.2013, 19:43

ich vermute mal, es geht um einen Abstand nach oben..?

Code:

#left, #right {
   ...
   ...
    margin-top: 50px;
}

Little Boxes solltest du unbedingt durcharbeiten.

nitram0598 · #8 (**permalink**) 17.06.2013, 20:38

und die höhe bis 5px von unterem rand?

Manfred62 · #9 (**permalink**) 17.06.2013, 21:02

google --> 'sticky footer'

nitram0598 · #10 (**permalink**) 17.06.2013, 21:31

wie man so einen footer macht weiß ich, danke

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Tabellen als Div Container	SpecialFighter	(X)HTML	7	12.10.2010 17:40
Ungewöhnlicher abstand beim clearen von floats	adrianno	CSS	14	16.09.2009 14:20
Dynamische Höhe im Content und DIV immer unten	keaton	CSS	8	13.12.2006 18:19
DIV Länge automatisch anpassen	judicious	CSS	10	08.05.2006 16:30
Seitenaufbau mit DIVs und 100% Höhe	vespasquire	CSS	6	12.09.2004 15:21