Position the divs on the left and right sides of the central div

Question

Position the divs on the left and right sides of the central div

I have a total of 7 divs, with one designated for the middle position.

The goal is to display the top two pictures and the knife aligned correctly, but the rest are not appearing as desired.

Below is the CSS code:

.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 here is the HTML code:

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

When using this code, my webpage appears like this:

Any suggestions on how to achieve the correct layout?

html css

Answer 1

Answer №1

Your code structure is incorrect.

Upon inspection of your code, it appears that you have a total of 7 divs:

3 on the left side
1 in the middle
3 on the right

However, you should only have 3 divs structured as follows:

1 on the left (float left)
1 in the middle (float left)
1 on the right (float left or right)

These 3 parts can accommodate any number of images without using "float," creating an example like this:

<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

Your code structure is incorrect.

Upon inspection of your code, it appears that you have a total of 7 divs:

3 on the left side
1 in the middle
3 on the right

However, you should only have 3 divs structured as follows:

1 on the left (float left)
1 in the middle (float left)
1 on the right (float left or right)

These 3 parts can accommodate any number of images without using "float," creating an example like this:

<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 3

Answer №2

What seems to be the issue? When you use float left, the div will attempt to align itself to the left of the preceding one, if there is enough space horizontally. It's important to note that the elements will stack in the same order as they are written in the HTML.

In your code:

leek.jpg is positioned at the top-left corner
knife.jpg stacks to the left of leek
leekcut.jpg stacks to the left of knife
onion.jpg tries to stack on the left of knife (which isn't possible, so it moves to the next available position directly under leekcut). This is where the problem begins.
And so forth

Potential solution:

HTML

<div class="container">
  <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;
}

View the fiddle here: http://jsfiddle.net/BfEu5/1/

Answer 4

What seems to be the issue? When you use float left, the div will attempt to align itself to the left of the preceding one, if there is enough space horizontally. It's important to note that the elements will stack in the same order as they are written in the HTML.

In your code:

leek.jpg is positioned at the top-left corner
knife.jpg stacks to the left of leek
leekcut.jpg stacks to the left of knife
onion.jpg tries to stack on the left of knife (which isn't possible, so it moves to the next available position directly under leekcut). This is where the problem begins.
And so forth

Potential solution:

HTML

<div class="container">
  <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;
}

View the fiddle here: http://jsfiddle.net/BfEu5/1/

Position the divs on the left and right sides of the central div

Answer №1

Answer №2

Similar questions

Creating circular patterns with looping on a canvas

Choose all the alternative A radio buttons utilizing JavaScript

`Incompatibility issue between HTML, CSS and Chrome browser`

Unable to set the height of WebDataRocks as a percentage

What is the best way to incorporate a text box along with a submit button that triggers a callback to a javascript function when clicked, utilizing either plain javascript or jQuery?

When the user clicks on an organizational chart, a new organizational chart will appear in a modal popup

Issues Persist with Making Ajax Calls to Webservice

Position the final list item in the column on the left side

struggling to rectify an undefined index error on my PHP page

Tips for aligning a Material UI FAB button in the center and keeping it in the center while resizing the window

Struggling with passing values to onClickHandler because of MUI

Create a dynamic dropbox using JavaScript/JQuery in an HTML page

Discovering elements based on accessible role and name using Selenium in C#

What is the method for viewing the content within div tags on an apex page?

Choosing the :after pseudo element that comes after the p element within the container's previous element

Place items at the lower part of the container rather than the top

What are some tips for designing HTML email templates?

Insert a page break after content for desktop browsers

How to Use Laravel to Create HTML Divs Without Images

Dynamic color change in SVG