css - Issue with margin-top / padding-top of div. Display-block etc. not working -


i'm little new coding , i've found these boards helpful on last few weeks i've come across problem other posts couldn't me with, here goes:

i have number of divs within 1 rectangle div, 880px across. left aligned divs working floated right div, video 560px across called #shopvid_2013_01 won't line right.

i want #shopvid_2013_01 div lines beside #shop_13_01 div, instead when preview on firefox seems right underneath div have , won't move no matter margin-top or padding-top use. tried adding display:block , overflow:hidden read on other posts might help, no avail.

any appreciated!

i've included relevant html , css:

html

<div id="shop_13">         <div id="shop_13_01">         <div id="shop_13_text_01">             <div id="shop_smlheading">                 <p><b>west cork rally 2013</b></p>             </div>             <div id="shop_p_13">                 <p>our highlights video cracking weekend in clonakilty.</p>             </div>             <div id="buy_shop_01">                 <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"    target="_top">                     <input type="hidden" name="cmd" value="_s-xclick">                     <input type="hidden" name="hosted_button_id" value="6d49sm33fhd8u">                     <input type="image" src="01 images/buy_now_price.png" border="0" name="submit" alt="buy now">                     <img alt="" border="0" src="https://www.paypalobjects.com/en_us/i/scr/pixel.gif"  width="1" height="1">                 </form>             </div>         </div>     </div>     <div class="shopvid_2013_01">         <iframe width="560" height="315" src="http://www.youtube.com/embed/ozxu2-zf5b0" frameborder="0" allowfullscreen></iframe>     </div> </div> 

css

#shop_13 {     width:880px;     }  #shop_13_01 {     width: 320px;     height:315px;     margin:30px 0 0 0;     background-color:#e9e9e9;     float:left; }  #shop_13_text_01 {     font-family: "arial", sans-serif;     width:240px;     font-size:13px;     line-height:1.4em; }  #shop_smlheading {     padding: 5px 0 0 20px;     font-size:15px; }  #shop_p_13 {     font-family: "arial", sans-serif;     width:240px;     font-size:13px;     line-height:1.4em;     margin: -15px 0 0 20px;     float:left; }  #buy_shop_01 {     padding: 100px 0 0 0;     float:left; }  #shopvid_2013_01 {     width: 560px;     height:315px;     float: right;     margin-top: 30px;     display:block;     overflow:hidden; } 

it seems referencing shopvid_2013_01 id rather class. try this:

.shopvid_2013_01 {   width: 560px;   height:315px;   float: right;   margin-top: 30px;   display:block;   overflow:hidden; } 

http://jsfiddle.net/ggtpk/


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -