CODEWITHSUNDEEP
htmlcsscss-float
E.E.33
E.E.33

Reputation: 2011

getting my divs to flow horizontally

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>

Upvotes: 5

Views: 31810

Answers (3)

Sebastian Patane Masuelli
Sebastian Patane Masuelli

Reputation: 4247

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

Upvotes: 9

Gazler
Gazler

Reputation: 84150

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/

Upvotes: 2

simshaun
simshaun

Reputation: 21466

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.

Upvotes: 5

Related Questions