在中心div的左侧和右侧对齐div

Question

I have a total of 7 divs, where 1 one is designated for the middle.

It's supposed to look something like this:

I get the top two pictures and the knife correctly aligned, but the other does not appear how I want them.

Here's the CSS:

.vegetablewrapper {
    width: 100%;
    overflow: hidden;
    background-color: white;
}
.vegetableleft {
    float: left;
    width: 350px;
    padding: 5px;
    margin-left: 5px
}
.vegetableright {
    float: right;
    width: 345px;
    padding: 5px;
    margin-right: 8px;
}
.vegetablemiddle {
    float: left;
    width: 200px;
    padding: 5px;
}

And HTML:

    <div class="vegetableleft">
        <img src="bilder/leek.jpg" alt="leek"/>
    </div>

    <div class="vegetablemiddle">
        <img src="bilder/knife.jpg" alt="knife"/>
    </div>  

    <div class="vegetableright">
        <img src="bilder/leekcut.jpg" alt="leek cut"/>
    </div>

    <div class="vegetableleft">
        <img src="bilder/onion.jpg" alt="onion"/>
    </div>

    <div class="vegetableright">
        <img src="bilder/onioncut.jpg" alt="onion cut"/>
    </div>

    <div class="vegetableleft">
        <img src="bilder/carrot.jpg" alt="carrot"/>
    </div>

    <div class="vegetableright">
        <img src="bilder/carrotcut.jpg" alt="carrot cut"/>
    </div>

</div>

With the given code my site looks like this:

How could this be done correctly?

Answer 1

You have wrong structure.

From you code you have 7 divs:

• left side - 3
• middle - 1
• right - 3

But you need to have only 3:

• left - 1 (float left)
• middle - 1 (float left)
• right - 1 (float left or right)

This 3 parts can contain any amount of images without "float" that will lead to something like this for your example:

<div class="vegetableleft">
    <img src="bilder/leek.jpg" alt="leek"/>
    <img src="bilder/onion.jpg" alt="onion"/>
    <img src="bilder/carrot.jpg" alt="carrot"/>
</div>  

<div class="vegetablemiddle">
    <img src="bilder/knife.jpg" alt="knife"/>
</div>  

<div class="vegetableright">
    <img src="bilder/leekcut.jpg" alt="leek cut"/>
    <img src="bilder/onioncut.jpg" alt="onion cut"/>
    <img src="bilder/carrotcut.jpg" alt="carrot cut"/>
</div>

Answer 2

What's your problem ? Float left means that the div will try to stack on the left of the previous one, if it fits horizontally. Keep in mind that the elements will stack in the same order as they appear in the HTML.

With your code:

• leek.jpg is placed at the upper left corner
• knife.jpg stacks at the left of the leek
• leekcut.jpg stacks at the left of the knife.
• onion.jpg stacks at the left of the knife (impossible, so it tries the next available position which is right under leekcut.) From there start to see the problem.
• And so on

Possible solution:

Html

<div class="conainer">
  <div class="left">
      <div class="photo1"></div>
      <div class="photo1"></div>
      <div class="photo1"></div>
  </div>

  <div class="middle">
      <div class="photo2"></div>
  </div>

  <div class="right">
      <div class="photo1"></div>
      <div class="photo1"></div>
      <div class="photo1"></div>
  </div>
</div>​

CSS

.left, .right {
    width: 200px;
    float: left;
}
.middle {
    width: 100px;
    float: left;
    padding: 0px 5px 5px 5px;
}

.photo1 {
    width: 200px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

.photo2 {
    width: 100px;
    height: 300px;
    background-color: yellow;
    margin: 5px;
}
​

Fiddle here: http://jsfiddle.net/BfEu5/1/