Even margin spacing between div elemtents inside of another div element

user_18002588 0
Viewed 67

I am trying to get an even spacing between divs inside a div with a set width of max the containing elements and this div is in another div which contains the other two and is set to width 60%. You can see the 4 divs which are in a bigger div that holds all the 4 divs. The bigger div has a width of 60%. I tried to make a % margin to the right but even at 1% one of the img gets in the next line and I don't want that. I also tried margin:auto, align-items:center and some other stuff but nothing worked and most of them didn't do anything. Note that I don't want to use any responsive web design things like flexbox! div order.

.container {
  width: 60%;
  /*This is the biggest one and contains everything from the side that has to be in the center*/
  margin: auto;
}

.container1 {
  margin: 15px 15px 15px 0px;
}

.angebotTop {
  display: inline-block;
  width: max-content;
}

.angebote {
  width: 250px;
  height: 300px;
  float: left;
  margin: 10px auto 10px 10px;
}
<h2>Unterkünfte rund um die Welt</h2>
<div class="container1">
  <div class="angebotTop">
    <div class="angebote">
      <img src="Bilder/Airbnb/hotel-2.jpg" alt="">
      <p id="angebot">GANZE WOHNUNG &#11825; KOPENHAGEN</p>
      <p id="beschreibung">Sonniges Penthouse mit 5 Balkonen</p>
      <p id="preis">206€ pro Nacht</p>
      <p id="bewertung">&#9733;&#9733;&#9733;&#9733;&#9733; 320</p>

    </div>
    <div class="angebote">
      <img src="Bilder/Airbnb/hotel-3.jpg" alt="">
      <p id="angebot">GANZES HAUS &#11825; FUJIEDA</p>
      <p id="beschreibung">Yui Valley-Traditional <br> House</p>
      <p id="preis">89€ pro Nacht</p>
      <p id="bewertung">&#9733;&#9733;&#9733;&#9733;&#9733; 220</p>
    </div>

I marked the divs with blue lines

css html
1 Answers

These two div's are spaced evenly. You can either use flex or grid to achieve it. Make sure that the div are direct children of flex if you want them to align evenly. You can use flex-wrap to move the successive divs below;

.container{
            width:60%;
            margin:auto;              
        }

      .container1{
        display: flex;
        margin: 15px 15px 15px 0px; 
        margin: 0 auto;
        align-items: center;
        justify-content: space-evenly;
        
        }
        .angebote{
            width: 250px;
            height: 300px;
        }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<h2>Unterkünfte rund um die Welt</h2>
        <div class="container1">
                <div class="angebote">
                    <img  src="Bilder/Airbnb/hotel-2.jpg" alt="">
                    <p id="angebot">GANZE WOHNUNG &#11825; KOPENHAGEN</p>
                    <p id="beschreibung" >Sonniges Penthouse mit 5 Balkonen</p>
                    <p id="preis">206€ pro Nacht</p>
                    <p id="bewertung">&#9733;&#9733;&#9733;&#9733;&#9733; 320</p>

                </div>
                <div class="angebote">
                    <img src="Bilder/Airbnb/hotel-3.jpg" alt="">
                    <p id="angebot">GANZES HAUS &#11825; FUJIEDA</p>
                    <p id="beschreibung">Yui Valley-Traditional <br> House</p>
                    <p id="preis">89€ pro Nacht</p>
                    <p id="bewertung">&#9733;&#9733;&#9733;&#9733;&#9733; 220</p>
                </div>
  </div>
</body>
</html>

user_172284840
Related