Content und Rechte Box sind verbunden?

Basti225 · 24 April 2010

Hallo,

ich habe erneut ein Problem ^.^
Ich habe mir ein Textfeld gecodet und möchte daneben eine 'Rechte Box' haben.
Jetzt besteht folgendes Problem: Wenn ich in den Content mehr schreibe (wenn der Content länger wird), dann geht die rechte Box immer weiter nach unten.

Hier mal der Code:

HTML:

<div id="content">
<h1>Hello</h1>
<div id="line">
<br/>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br/><br/>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div id="box">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div></div>

<div id="bannerright">
<table><tr>
<td><a href="#"><img src="image/testwerbungrechts.png"></a></td>
<td><a href="#"><img src="image/testwerbungrechts.png"></a></td>
</tr></table></div>

CSS

Code:

div#content {
position:relative;
padding: 10px;
background-color: #f7f7f7;
top: 40px;
left: 200px;
width: 725px;
font-family: verdana, arial;
font-size: 14px;
color: #565656;
border: 1px;
border-color: #cecece;
border-style: solid;
}

div#bannerright {
position: relative;
top: -267px;
left: 975px;
width:410px;
font-family: verdana;
font-size: 14px;
border: 1px;
border-color: #cecece;
border-style: solid;
}

Gruß Basti

mermshaus · 24 April 2010

Ich denke, du suchst absolut Positionierung anstelle von relativer.

HTML:

<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
    </head>

    <style type="text/css">

        div#content {
            position:absolute;
            padding: 10px;
            background-color: #f7f7f7;
            top: 40px;
            left: 200px;
            width: 725px;
            font-family: verdana, arial;
            font-size: 14px;
            color: #565656;
            border: 1px;
            border-color: #cecece;
            border-style: solid;
        }

        div#bannerright {
            position: absolute;
            left: 975px;
            width:410px;
            font-family: verdana;
            font-size: 14px;
            border: 1px;
            border-color: #cecece;
            border-style: solid;
        }

    </style>

    <body>
        <div id="content">
            <h1>Hello</h1>
            <div id="line">
                <br/>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                <br/><br/>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                <div id="box">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                </div>
            </div>
        </div>

        <div id="bannerright">
            <table>
                <tr>
                    <td><a href="#">demo</a></td>
                    <td><a href="#">demo</a></td>
                </tr>
            </table>
        </div>
    </body>

</html>

Die (wohl gebräuchlichere) Alternative zu absoluter Positionierung sind Floats. Mehr Informationen hier: SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

Content und Rechte Box sind verbunden?

Basti225

Neues Mitglied

mermshaus

Senior HTML'ler

Neueste Beiträge