CODEWITHSUNDEEP
htmlcsscss-floatinline
t0m45z
t0m45z

Reputation: 13

Container inline-block once again

Look at this

I would like to make a main container that has 2 sub containers - left and right (each 50% of the screen width).

Left must contain a photo. The right one must contain the text (h2 and p directly below). The text should be halfway up the image.

I need it to describe the products in the store.

I was trying this

div { border: 1px solid #CCC; }

<div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>

but in this case I could not type h2 and p in the same div.

Thanks.

Upvotes: 1

Views: 593

Answers (2)

AKUMA no ONI
AKUMA no ONI

Reputation: 11934

Grid, in my humble opinion, is the right tool for what you are asking to use it for. It is a bit newer than flexbox I believe, and it takes a little getting use to, but your whole web-development world is going to change if you take the time to learn it (doesn't take but 8-12 hours of playing with it to grasp the concepts). Anywho, below is how I would do it. To learn more about CSS GRID,check out

CHEERS MATE!

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: #DDD;
            padding: 2px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 50% 50%;
            width: 100%;
            margin: 0;
            padding: 8px;
            background-color: #777;
            border: 2px solid #f00;
        }

        .left {
            text-align: center;
            width: auto;
            margin: 0;
            padding: 8px;
            background-color: #777;
            border: 2px solid #0f0;
        }

        .right {
            text-align: center;
            font-size: 16px;
            width: auto;
            margin: 0;
            padding: 8px;
            background-color: #777;
            border: 2px solid #00f;
        }

        img {
            max-width: 100%;
            height: auto;
        }

      @media only screen and (max-width: 800px) {
            .grid-container {
                display: grid;
                grid-template-columns: 1fr !important;
                justify-content: center;
                align-items: center;
                padding: 0;
                margin: 0;
            }
        }

    </style>
</head>

<body>
    <div class="grid-container">
        <div class="left">
            <img src="https://html.com/wp-content/uploads/flamingo.jpg">
        </div>
        <div class="right">
        <p>
            Mollis in natoque phasellus nec pellentesque adipiscing ante rhoncus, 
            penatibus molestie inceptos arcu vulputate auctor dolor. Mollis fames malesuada 
            torquent adipiscing consectetur venenatis eu gravida eget, leo phasellus tristique 
            tempus ad facilisi non blandit habitasse, per lectus lobortis primis consequat urna 
            ac pretium. Fames elementum ullamcorper sem nisl vel erat potenti dignissim, nec 
            dictum luctus libero posuere nunc commodo odio facilisi, torquent venenatis
            pellentesque metus ultricies senectus turpis. Consectetur arcu montes non 
            sagittis sociis pulvinar condimentum dictumst, integer duis adipiscing praesent 
            diam hendrerit vel enim suspendisse, per dis rutrum urna maecenas porttitor senectus.
        </p>

        <p>
            Ja, ni gör som ni vill, men jag rår inte för att jag hela livet gått på rosor. Niklas tog tag 
            i datorn och lyfte den mot himmeln. Om vädret inte var så dåligt skulle vi aldrig få något  
            klaga på. Galna kossor lever glatt på åkern i norra Stockholm. Tar upp en liten pall, som 
            tår vid bordet på högra sidan. Han tog tag i den röda skiftnyckeln och slog hårt på muren. 
            Glada bläckfiskar hoppar alltid upp för strömmen när de är på väg hemåt.
        </p>
        </div>
    </div>
</body>

</html>

You asked in your comment how to make it responsive for narrower screens so I did. It will now stack because I added an @media query, which tells it to repond to the screen being 800px or less. Then I changed the grid container. Instead of grid-columns being side by side, which I set using the syntax:

 grid-template-columns: 50% 50%;

I changed it to being :

grid-template-columns: 1fr;

The change switches it from a split container at 50% of the screen size each. To single containers containing only 1fr(which means just one whole container). And since they take up the whole screen width they now stack, and grid automatically wraps the containers for you.

Upvotes: 1

Toxnyc
Toxnyc

Reputation: 1350

If you don't mind using flexbox.

.container {
  border: 10px solid red;
  display: flex;
  box-sizing: border-box;
}

.container > div {
  flex-basis: 50%;
  border: 10px solid blue;
  margin: 10px;
  padding: 10px;
}

.left img {
  width: 100%;
  height: 100%;
}

.right__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.right__content * {
  margin: 0;
}

 
<div class="container">
  <div class="left">
      <img src="https://placehold.it/300x150" alt="left img">
  </div>
  <div class="right">
     <div class="right__content">
       <h1>Header text</h1>
       <p>my desc</p>
     </div>
  </div>
</div>

Upvotes: 2

Related Questions