CSS-DIV Problem

AIKler · 20. Januar 2014

Hallo Leute

ich häng jetzt schon ne ganze zeit an den Divs einer Webseite.
Mein problem kurz in Bilder:

so sollte es aussehen
----------------------------------------------------------------------------------------------------------------
leider sieht es aber so aus:

kann mir dabei einer von euch Helfen****?
Quelltexte häng ich hier mit an:

Code:

html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
}

.content {
        min-height: 100%;
        position: relative;
        overflow: auto;
        z-index: 0;
}

.background {
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
}

.top_block {
        width: 100%;
        display: block;
}

.bottom_block {
        position: absolute;
        width: 100%;
        display: block;
        bottom: 0;
}

.left_block {
        display: block;
        float: left;
}

.right_block {
        display: block;
        float: right;
}

.center_block {
        display: block;
        width: auto;
}

.header {
        width: 100%;
        height: 61px;
        background-color: #9999ff;
}

.background.vorhang_li {
        height: auto !important;
        padding-bottom: 0;
        left: 0;
        width: 81px;
        background-color: #999999;
        margin-top: 61px;
}

.vorhang_li {
        height: auto;
        width: 81px;
        padding-bottom: 0px;
}

.background.vorhang_re {
        height: auto !important;
        padding-bottom: 0;
        right: 0;
        width: 84px;
        background-color: #999966;
        margin-top: 61px;
}

.vorhang_re {
        height: auto;
        width: 84px;
        padding-bottom: 0px;
}

.background.content {
        height: auto !important;
        padding-bottom: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
        margin-top: 61px;
        margin-left: 81px;
        margin-right: 84px;
}

.content {
        width: auto;
        height: auto;
        padding-bottom: 0px;
        rheight: 144;
}

.hinweise {
        width: 100%;
        height: 32px;
        background-color: #ff0a0a;
}

.navigation {
        width: 100%;
        height: 42px;
        background-color: #993399;
}

.background.links {
        height: auto !important;
        padding-bottom: 0;
        left: 0;
        width: 124px;
        background-color: #993366;
        margin-top: 74px;
        margin-bottom: 70px;
}

.links {
        height: auto;
        width: 124px;
        padding-bottom: 70px;
}

.background.rechts {
        height: auto !important;
        padding-bottom: 0;
        right: 0;
        width: 121px;
        background-color: #6699ff;
        margin-top: 74px;
        margin-bottom: 70px;
}

.rechts {
        height: auto;
        width: 121px;
        padding-bottom: 70px;
}

.background.mitte {
        height: auto !important;
        padding-bottom: 0;
        left: 0;
        right: 0;
        background-color: #6666ff;
        margin-top: 74px;
        margin-bottom: 70px;
        margin-left: 124px;
        margin-right: 121px;
}

.mitte {
        width: auto;
        height: auto;
        padding-bottom: 70px;
}

.footer {
        width: 100%;
        height: 70px;
        background-color: #669966;
}

HTML:

<!doctype html>
<html>
<head>
        <title>Put your title here</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
        <div class="content">
                <div class="top_block header">
                        <div class="content">
                        </div>
                </div>
                <div class="background vorhang_li">
                </div>
                <div class="left_block vorhang_li">
                        <div class="content">
                        </div>
                </div>
                <div class="background vorhang_re">
                </div>
                <div class="right_block vorhang_re">
                        <div class="content">
                        </div>
                </div>
                <div class="background content">
                        <div class="background links">
                        </div>
                        <div class="background rechts">
                        </div>
                        <div class="background mitte">
                        </div>
                </div>
                <div class="center_block content">
                        <div class="content">
                                <div class="top_block hinweise">
                                        <div class="content">
                                        </div>
                                </div>
                                <div class="top_block navigation">
                                        <div class="content">
                                        </div>
                                </div>
                                <div class="left_block links">
                                        <div class="content">
                                        </div>
                                </div>
                                <div class="right_block rechts">
                                        <div class="content">
                                        </div>
                                </div>
                                <div class="center_block mitte">
                                        <div class="content">
                                        </div>
                                </div>
                                <div class="bottom_block footer">
                                        <div class="content">
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</body>
</html>

Vielen Dank für eure Hilfe

Jan-Frederik Stieler · 22. Januar 2014

Hi,
als erstes nimm die relative und absoluten positionierungen aus deinem Code.
Damit das sich wieder normal Anordnet. Dannach musst du nochmal schauen ob dein Floating stimmt.

Grüße

CSS-DIV Problem

AIKler

Erfahrenes Mitglied

Jan-Frederik Stieler

Monsterator

Neue Beiträge