CODEWITHSUNDEEP
jqueryhtmlcss
elroyz
elroyz

Reputation: 113

divs not staying in one line after jquery slideDown()

I can get the div to slidedown directly below it when one div is on the page but as soon as i have two+ on the same line, the slideDown function starts coming down from the right hand side top. I have tried to put them in separate div's aswell but still have same issue as what is in the fiddle below.

If anyone can push me in the right direction that would be appreciated.

html:

<div id="panel1" class="panel">

    <!-- start of toggle div -->
    <div id="nena">
        <img src="../images/tshirt pictures/nena boys.jpg" />
            <p class="tshirtName"> sample text</p>
                <p id="show"><span style="font-family:NimbusSanDCon; font-weight:bold; font-size: 2em;">+</span></p>
    </div><!-- end of nena-->

    <div id="below">
    <p class="itemDescription">basiq tee</p>
    <p class="price">49.95</p>
    <br />
    <p class="price"> sizes</p>

    <select name="size">
  <option value="s">S</option>
  <option value="m">M</option>
  <option value="l">L</option>
  <option value="xl">XL</option>
</select><br /><br />


<p class="price"> colours</p>

    <select name="size">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

        <p id="hide"><span style="font-family:NimbusSanDCon; font-weight:bold; font-size: 2em;">-</span></p>
    </div><!-- end of below div when shown-->
    <!-- end of toggle div-->

css:

#nena {
    height: 160px;
    width: 100px;
    border:thin solid #DEDEDE ;
    margin-left: 10px;
    margin-right: 10px;

float: left;}

.tshirtName {
    font-family: NimbusSanDCon;
    font-weight: bold;
    font-size: 1.2em;
    padding-right: 5px;
    text-align: center;}


#below {
    background-color: #F5F5F5;
    width: 100px;
    height: auto;
    display: none;
    padding: 5px;
float: left;}

#nena img {
    width: 90px;
    margin-top: 5px;
    margin-left: 5px;}

#show {
    float: right;
    margin-right: 5px;
    }

#hide {
    float: right;
    margin-right: 5px;}

.itemDescription {
    font-family:NimbusSanDCon;
    font-weight: bold;
    font-size: 1.3em;
    color: #1c665b;
    margin-left: 5px;}

.price {
    font-family: NimbusSanDCon;
    font-weight: bold;
    margin-left: 5px;
    letter-spacing: .2em;
}

a {
    color: black;}

Here is the working fiddle: http://jsfiddle.net/jbX6p/1/

Thanks in advance

Upvotes: 0

Views: 112

Answers (1)

Maxim Ershov
Maxim Ershov

Reputation: 1284

Here is an updated jsfiddle for you http://jsfiddle.net/jbX6p/2/. You should use position property to position your elements in a right way. in this case use

.below{
   position:absolute;
    /* then position it the way you want using margin property */
}

Also you have several div's with the same id #nena, #below etc. You can not do this, it is a big mistake. Change all of them to be a class name instead.

Upvotes: 1

Related Questions