У меня есть 2 divs, один из которых отображается справа, а другой - слева.Как заставить div появиться под другим div
Однако, когда я пытаюсь добавить еще один div под правом div, я получаю его под левым div или слева от левого div.
Вот что у меня есть:
И вот что я хочу сделать:
Я tryied несколько методов включают:
- ясно: левый; или очистить: both
- list-style: none;
- должность: относительная;
- также увидели, что method, но не могу понять это
И еще методы, которые я видел в поисках StackOverflow, но без успеха.
Вот живой один: JSfiddle
Как я решить эту проблему?
/*============================================================================================*/
/* 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 -->
Ты самый лучший человек! – StackBuck