getting my divs to flow horizontally

Question

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>

An ID attribute should be unique to the element. Don't know if that's the specific cause, but it's invalid HTML. — Hamish, Nov 29 '10 at 22:06
Possible duplicate of [CSS - Make divs align horizontally](http://stackoverflow.com/questions/37103/css-make-divs-align-horizontally) — user, Mar 04 '17 at 12:03

score 9 · Accepted Answer · edited Jan 06 '16 at 22:37

9

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

edited Jan 06 '16 at 22:37

Community

1
1

answered Nov 29 '10 at 22:09

Sebastian Patane Masuelli

4,217
1
18
23

1

Thanks! this is perfect. this JSfiddle is the beez-knees. is this new? – E.E.33 Nov 29 '10 at 22:12
1

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! – Sebastian Patane Masuelli Nov 29 '10 at 22:18
1

+1 for the answer but +1 as well to the first two for using "beez-knees" ;) – Levi Botelho Oct 16 '12 at 11:57
@gustavo-rodriguez : Done – Sebastian Patane Masuelli Jan 06 '16 at 22:37

score 5 · Answer 2 · answered Nov 29 '10 at 22:06

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.

score 2 · Answer 3 · answered Nov 29 '10 at 22:07

2

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/

answered Nov 29 '10 at 22:07

Gazler

83,029
18
279
245

2

@Guided33 I think you accidentally added the word "not" there. – Gazler Nov 29 '10 at 22:42

getting my divs to flow horizontally

3 Answers3