CODEWITHSUNDEEP
htmlcss
user1736049
user1736049

Reputation: 366

Align divs left and right of center div

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

It's supposed to look something like this: representation

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: enter image description here

How could this be done correctly?

Upvotes: 0

Views: 1268

Answers (2)

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41855

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/

Upvotes: 3

BeRocket
BeRocket

Reputation: 655

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>

Upvotes: 5

Related Questions