5
Mam 2 divy, że jeden pojawia się po prawej stronie, a drugi po lewej.Jak wymusić div, aby pojawić się pod innym div
Jednak, gdy próbuję dodać jeszcze jeden div pod odpowiednim div, otrzymuję go pod lewym divem lub po lewej stronie lewej div.
Oto co mam:
I tu jest to, co chcę osiągnąć:
Mam tryied kilka metod należą:
- jasne: w lewo; lub jasne: oba style list: none;
- użyć pozycji: względna;
- widział również, że method ale nie mogę dowiedzieć się tego
a inny metod, które widziałem w poszukiwaniu stackoverflow, ale bez powodzenia.
Oto żywo jeden: JSfiddle
Jak mogę rozwiązać ten problem?
/*============================================================================================*/
/* 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 -->
Jesteś najlepszym człowiekiem! – StackBuck