getting my divs to flow horizontally

28,065

Solution 1

is this what you mean? http://jsfiddle.net/SebastianPataneMasuelli/xtdsv/

HTML:

<div id="gallery">
    <div id="galleryelements">
        <div class="s-thumbnail left" id=""></div>
        <div class="thumbnail left" id="left"></div>
        <div id="Mimage"></div>
        <div class="thumbnail right" id=""></div>
        <div class="s-thumbnail right" id=""></div>
    </div>
</div>

CSS:

#gallery {
    width: 688px;
    height: 360px;
    border: 1px solid red;
}

#galleryelements {
    width: 650px;
    height: 320px;
    background-color:#0FF;
    display: block;
}

.s-thumbnail {
    width: 50px;
    height: 75px;
    border: solid;
}

.thumbnail {
    width: 100px;
    height: 150px;
    border: solid;  
}

.left {
    float:left;
}

.right {
    float:left;    
}

#Mimage {
    width: 200px;
    height: 300px;
    border: 1px solid green; 
   float: left; 
}

Solution 2

You should never have more than one element on the page with the same ID.

Try

<div class="s-thumbnail left"></div>
<div class="thumbnail left"></div>
<div id="Mimage"></div>
<div class="thumbnail right"></div>
<div class="s-thumbnail right"></div>
and then change your CSS from #left and #right to .left and .right.

div#Mimage needs to be floated, else it will span the entire width and push the other floats down.

Solution 3

It would appear that you have your classes and id's mixed up. You are re-using the left and right ids. You probably want a float on Mimage too to make it display horizontally.

I changed your code slightly, is this what the result should look like?

http://jsfiddle.net/WcEAb/1/

Share:
28,065

Related videos on Youtube

E.E.33
Author by

E.E.33

Rubyist.

Updated on July 09, 2022

Comments

  • E.E.33
    E.E.33 over 1 year

    Regardless of what I've tried, I cannot get my inner divs to flow horizonatally within the outer div. Please help!!!

    <style type="text/css">
    
    #gallery {
    width: 688px;
    height: 360px;
    border: solid;
    }
    
    #galleryelements {
    width: 650px;
    height: 320px;
    display:inline;
    background-color:#0FF;
    }
    
    .s-thumbnail {
    width: 50px;
    height: 75px;
    border: solid;
    }
    
    .thumbnail {
    width: 100px;
    height: 150px;
    border: solid;  
    }
    
    #left {
    float:left;
    }
    
    #right {
    float:right;    
    }
    
    #Mimage {
    width: 200px;
    height: 300px;
    border: solid;  
    }
    </style>
    
    <body>
    <div id="gallery">
    <div id="galleryelements">
    <div class="s-thumbnail" id="left"></div>
    <div class="thumbnail" id="left"></div>
    <div id="Mimage"></div>
    <div class="thumbnail" id="right"></div>
    <div class="s-thumbnail" id="right"></div>
    </div>
    </div>
    </body>
    </html>
    
  • E.E.33
    E.E.33 almost 13 years
    Thanks! this is perfect. this JSfiddle is the beez-knees. is this new?
  • Sebastian Patane Masuelli
    Sebastian Patane Masuelli almost 13 years
    JSFiddle is relatively new i think. glad it helped. Tip: upvote helpful answers and accept the correct one, as this encourages great answers for everyone. good luck coding mate!
  • Gazler
    Gazler almost 13 years
    @Guided33 I think you accidentally added the word "not" there.
  • Levi Botelho
    Levi Botelho about 11 years
    +1 for the answer but +1 as well to the first two for using "beez-knees" ;)
  • Sebastian Patane Masuelli
    Sebastian Patane Masuelli almost 8 years
    @gustavo-rodriguez : Done

Related