StackBuck StackBuck - 5 months ago 20
CSS Question

How to force div to appear below another div

I have 2 divs that one is appear at the right, and the other one appear at the left.

However, when i try to add one more div under the right div, i get it under the left div or at the left of the left div.

Here is what i have:

enter image description here

And here is what i want to accomplish:

enter image description here

I have tryied several methods include:


  1. clear:left; or clear:both

  2. list-style: none;

  3. use position:relative;

  4. also saw that method but cant figure this out



And another methods that i saw at stackoverflow search but without success.

Here is the HTML code:

<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 -->


and here is the CSS:

/*----------------------------------------------*/
/* 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; }


/*============================================================================================*/
/* 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 {
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;}


here is a live one: JSfiddle

How do i solve this?

Answer

You can try on menu2:

   float: right;
   clear: both;

here is a working fiddle https://jsfiddle.net/qxLk4afk/2/