5
Ich habe 2 divs, dass eine auf der rechten Seite erscheinen, und die andere erscheint auf der linken Seite.Wie erzwingen, div unter einem anderen div
Wenn ich jedoch versuche, ein weiteres div unter dem richtigen div hinzuzufügen, bekomme ich es unter dem linken div oder auf der linken Seite des linken div. Hier
ist das, was ich habe:
Und hier ist das, was ich erreichen will:
I tryied haben mehrere Methoden umfassen:
- klar: links; oder klar: beide
- Listen-Stil: keine;
- Position verwenden: relativ;
- sah auch, dass method aber kippe dies herauszufinden
und eine andere Methoden, die ich bei Stackoverflow Suche sah aber ohne Erfolg.
Hier ist ein Live-one: JSfiddle
Wie kann ich dieses Problem lösen?
/*============================================================================================*/
/* 1. GENERAL TYPOGRAPHY */
/*============================================================================================*/
/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/
body {background:url(../img/body_image_1.png) top no-repeat}
html, body, div, span, iframe,pre, a, img, strong, center, ul, li, footer, header,menu {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
footer, header, menu {
display: block;}
body {
line-height: 1; }
ol, ul {
list-style: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
img { max-width:100% !important}
/*----------------------------------------------*/
/* General Styles */
/*----------------------------------------------*/
body {
font-family: 'Copse', Georgia, Times, serif;
color:#8c8c8c;
font-size:14px;
line-height:1.4em;
position:relative}
.body_wrap {
width:100%;
background-position:center 270px;
background-repeat:no-repeat;
overflow:hidden;}
::-moz-selection {
background: #f67320;
color: #fff;
text-shadow: none}
::selection {
background: #f67320;
color: #fff;
text-shadow: none}
/* Typography
======================================================== */
strong { font-weight: bold; }
.sidebar mark {
background:#ffffff;
color:#ff8a00 !important;
display:block;
padding:5px;
font-weight:normal;
font-size:110%;}
/* Links
======================================================== */
a, a:visited { color: #aa62bb; text-decoration: none; outline:none; }
a:hover, a:focus { color: #f86000; }
/* Lists
======================================================== */
ul { list-style: none outside; }
/*============================================================================================*/
/* 2. SITE STRUCTURE */
/*============================================================================================*/
.main_outer {
width:1350px;
margin:0 auto 14px auto;
position:relative;}
.main_top {
height:30px}
.main_bot {
height:66px}
.main_mid {
padding:0 59px; /* width 496px */
min-height:670px}
/*----------------------------------------------*/
/* Middle content */
/*----------------------------------------------*/
.content {
width:100%;
padding-bottom:17px;
position:relative;
z-index:1}
/*----------------------------------------------*/
/* Footer */
/*----------------------------------------------*/
footer {
width:100%;
clear:both;
background:url(../img/opacity_45.png)}
footer .container { \t
min-height:30px;
padding:40px 0 20px;
color:#acacac;
width:496px;
font-family: 'Source Sans Pro', Tahoma, sans-serif;
font-size:12px;
text-align:center;}
.copyright .icon_heart {
display:inline-block;
width:16px;
height:14px;
overflow:hidden;
text-indent:-500px;
margin:0 5px;
line-height:14px;
top:0.2em;
position:relative;}
.copyright {
line-height:1.3em;
font-weight:bold;}
.copyright a {
color:#ccc !important}
.copyright a:hover {
color:#fff !important}
/*----------------------------------------------*/
/* Custom changes */
/*----------------------------------------------*/
.title {font-family: sans-serif; font-size: 20px; font-weight: bold; color: black; text-align: center; padding-bottom: 25px; padding-top: 15px;}
.titleimg {background-image: url(../img/logo.png); background-repeat: no-repeat; width: 200px; height: 120px; background-position: center;background-size: contain; margin: auto;}
#menu {
font-family: 'Arimo', sans-serif;
direction: rtl; text-align: right; float: right;
width: 250px;
border-radius: 15px;
padding: 15px;
margin-top: 7px;
border: 7px solid #fbdd63;
background-color: white;}
a.link {font-size: 15px; color: black; padding 5px;}
a.link:hover { background-color: #fde499; padding-left: 10px; }
#bookcontent { float: left; }
.frame {width: 300px; height: 320px; position: fixed; }
.maincontent {font-family: sans-serif; font-size: 16px; color: black; background-color: white; box-shadow: 3px #000;}
/* Content Text */
.fullcontent {
direction: rtl;
border-radius: 15px;
padding: 15px;
background-image: url(../img/copity-big.png);
border: 7px solid #fbdd63;
position: fixed;
}
li.first {font-weight: bold; margin-top: 7px; padding-bottom: 2px;}
li.second {list-style-type: square; margin-right: 20px;}
li.third {list-style-type:decimal; margin-right: 20px;}
.bigtitle {font-family: 'Rubik', sans-serif; font-size: 40px; color: black; font-weight: bold; padding-top: 25px; padding-bottom: 20px; }
.textcontent {font-family: sans-serif; font-size: 18px; color: black; text-align: right; padding-bottom: 20px; }
.boldy {font-weight: bold;}
#copyrighted { clear: both; position: absolute;}
img.desc {width: 350px; height: 250px; float: left; margin-left: 45px; padding-right: 15px;}
.textop { background-image:url(../img/blue.png); width: 180px; height: 50px; float: left; margin-left: -30px; }
.ontop { font-family: sans-serif; font-size: 16px; font-weight: bold; margin-right: 7px; margin-top:13px; color: white; text-shadow: 1px 1px 1px #000;}
.center {margin: 0 auto; padding-top: 15px; padding-bottom: 25px;}
#menu2 {
display: block;
font-family: 'Arimo', sans-serif;
direction: rtl; text-align: right; float: right;
width: 250px;
border-radius: 15px;
padding: 15px;
margin-top: 7px;
border: 7px solid #fbdd63;
background-color: white;
}
input.buttons {padding: 2px; padding-left: 10px; padding-right: 10px; border: 0px; background-color: #fed40e; color: white;}
.footer {margin: 0 auto; background-image:url(../img/footer.png); width: 750px; height: 180px; margin-top: 30px; }
.footontop-left {width: 590px; font-family: sans-serif; float: left; font-size: 18px; font-weight: bold; margin-right: 7px; color: black; text-shadow: 1px 1px 1px #fff;}
.footontop-right-cart {auto; background-image:url(../img/icons/cart140x140.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}
.footontop-right-israel {auto; background-image:url(../img/icons/israel.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}
.footontop-right-crown {auto; background-image:url(../img/icons/crown.png); float: right; width: 140px; height: 140px; margin-right: 7px; margin-top:30px;}
.karikatura { width: 650px; height: 230px;}<title>Test</title>
<div class="body_wrap">
<div class="main_outer">
<div class="main_top"></div>
<div class="main_mid">
<!-- content -->
<div id="bookcontent">
<center>
<div id="content">
<div id="menu">
<div class="titleimg"></div>
<ul>
<li><a class="link" href="./pages/0.html" target="content">Test 1</a></li>
<li><a class="link" href="./pages/1.html" target="content">Test 2</a></li>
<li><a class="link" href="./pages/2.html" target="content">Test 3</a></li>
</ul>
</div>
<div id="menu"> This is the iFrame </div>
<div id="menu2">
<span align="right"><input class="buttons" type = "button" value = "Previous" /></span>
<span style="float:left"><input class="buttons" type = "button" value = "Next" /> </span>
</div>
<!--/ content -->
</div>
<div class="main_bot"></div>
<!--/ container -->
Du bist der beste Mann! – StackBuck