✔ 2 div nebeneinander, ein div darunter...

Status
Nicht offen für weitere Antworten.
F

ferrox

Grünschnabel
Hallo,

ich möchte gerne folgendes darstellen:

2 DIVs oben nebeneinander und darunter ein weiteres DIV, welches die selbe Breite haben soll, wie beide oberen zusammen.

Die Boxen sollen sich wie folg verhalten:
Wenn der Rahmen einer der beiden oberen Boxen "gesprengt" wird , soll die andere obere Box mitwachsen und die untere Box entsprechend nach unten verschieben - also kein Überlappen.

Wie kann ich das anstellen?

DIV OBEN LINKS habe ich die Eigenschaft float:left und DIV OBEN RECHTS position:absolute gegeben, um sie nebeneinander zu bekommen.
Das bedeutet allerdings, dass die untere Box sich nur verschiebt, wenn OBEN LINKS vergrößert wird... wird OBEN RECHTS vergrößert, überlappen beide.


Kann mir jemand helfen?
 
Basierend auf dem CSS-Modell Equal-Height CSS Columns habe ich den CSS- und HTML-Code etwas modifiziert:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Equal-Height CSS Columns - Keeping it tall - redmelon.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
/* Optional Code */
body
{
color: #000;
background-color: #fff;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 86%;
}
p  { padding: 0.5em; margin: 0; font-size: 1em; }
h1 { padding: 0.5em; margin: 0; font-size: 1.3em; font-weight: normal; }
h2 { padding: 0.5em; margin: 0; font-size: 1em; font-weight: bold; }
ul { padding-right: 1em; text-align: left; margin-bottom: 1em; }


.wrapper { min-width: 640px; }
          /* Allways good to have on full width liquid CSS layouts,
             google "min-width IE" for JS solutions there */

.wrapper { border: 1px solid black; margin: 0 -1px; }
          /* this is a border with marginal compensation to stop scroll bars */

/* Setup (This all looks neater when it isn't put on display!) */

.wrapper {
        width: 640px;               /* total width */
        margin: 0 auto;             /* horizontal centered */
}

.outer {
        border-left-width: 310px;  /* left column width */
        border-left-color: #809bbe;   /* left column colour */

        border-right-width: 310px; /* right column width */
        border-right-color: #809bbe;  /* right column colour */

        background-color: #f5f5f5; /* center column colour */
}

.left {
        width: 310px;              /* left column width */
        margin-left: -310px;       /* _negative_ left column width */
}

.right {
        width: 310px;              /* right column width */
        margin-right: -310px;      /* _negative_ right column width */
}

/* Main code */

.outer { width: auto; border-left-style: solid; border-right-style: solid; }
.inner { margin: 0; width: 100%; }

.left { float: left; position: relative; z-index: 10; }
.right { float: right; position: relative; z-index: 11; }

.clear { clear: both; }

.content { background: #dfdfdf; }

/* Mozilla code */
.outer > .inner { border-bottom: 1px solid transparent; }
.left { margin-right: 1px; }
.right { margin-left: 1px; }
-->
</style>

</head>
<body>

<div class="wrapper">

<div class="outer">
<div class="inner">

 <div class="left">
   <p>leftcolumn</p>
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
   </ul>
 </div>

 <div class="right">
   <p>rightcolumn</p>
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>item 5</li>
     <li>item 6</li>
     <li>item 7</li>
     <li>item 8</li>
     <li>item 9</li>
   </ul>
 </div>

 <div class="clear"></div>

</div>
</div>

 <div class="content">content</div>

</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Vielen Dank! Das ist genau das, wonach ich gesucht habe. Muss mich da erst mal durcharbeiten, um zu schauen, wie ich das in meinen Quelltext übernehmen kann.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück