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?
Related videos on Youtube
Comments
-
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 almost 13 yearsThanks! this is perfect. this JSfiddle is the beez-knees. is this new?
-
Sebastian Patane Masuelli almost 13 yearsJSFiddle 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 almost 13 years@Guided33 I think you accidentally added the word "not" there.
-
Levi Botelho about 11 years+1 for the answer but +1 as well to the first two for using "beez-knees" ;)
-
Sebastian Patane Masuelli almost 8 years@gustavo-rodriguez : Done