How can I relocate the div boxes and the titles in my css code?

Question

I wish to move the matcha img to the right, and to have the text below them. I tried using margin-left and margin-bottom but it did not help.

#hotlatte img {
  border: solid #664d00;
  border-width: 5px;
  border-radius: 60px;
  width: 300px;
  height: 400px;
  padding: 10px;
}

#matcha img {
  border: solid #664d00;
  border-width: 5px;
  border-radius: 60px;
  width: 300px;
  height: 400px;
  padding: 10px; 
}

.namesofdrinks { 
  font-style: italic;
  font-size: 28px;
  color: #804500 ;
  font-family:'Courier New', Courier, monospace;
}

<div id="hotlatte">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Latte_art_3.jpg/1920px-Latte_art_3.jpg" alt="coffe latte" />
</div>

<h3 class="namesofdrinks">Coffe latte</h3>

<div id="matcha">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Matcha_%286328677556%29.jpg/1920px-Matcha_%286328677556%29.jpg" alt="matcha">
  <h3 class="namesofdrinks">Matcha Coffe</h3>  
</div>

I think your question is too vague. Can you clarify how you want the result to look? Do you at the very least have an example? — robere2, Feb 05 '23 at 00:19
@robere2 I want to move the matcha dix box next to the first coffee latte box — iddd6578, Feb 05 '23 at 00:21
Does this answer your question? [How to place two divs next to each other?](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) — robere2, Feb 05 '23 at 00:22

Jayashanka Anushan · Answer 1 · 2023-02-05T00:33:18.610

0

First, need to group the image and text using div. follow the code.

    <div id="hotlatte">
        <img src="images/caffe.jpg" alt="coffe latte" />
        <h3 class="namesofdrinks"> Coffe latte</h3>
    </div>

    <div id="matcha">
        <img src="images/matcha.jpg" alt="matcha">
        <h3 class="namesofdrinks"> Matcha Coffe</h3>  
    </div>

Then try this CSS code.

        #hotlatte {
            float: left;
            width: 50%;
        }

        #hotlatte img {
            width: 100%;
            height: auto;
        }

        #matcha {
            float: right;
            width: 50%;
        }

        #matcha img {
            width: 100%;
            height: auto;
        }

        .namesofdrinks {
            clear: both;
            text-align: center;
            margin-top: 10px;
        }

edited Feb 05 '23 at 00:33

answered Feb 05 '23 at 00:17

Jayashanka Anushan

33
9

Thank you! However, now I have the matcha box on the right bottom, how can I move it to the right from the hot latte? – iddd6578 Feb 05 '23 at 00:23
Your code needs some changes. I will update the full code and try it. – Jayashanka Anushan Feb 05 '23 at 00:31
`
Coffe latte
` when this code part insert into `
` div then everything works perfetly.
– Jayashanka Anushan Feb 05 '23 at 00:36

How can I relocate the div boxes and the titles in my css code?

1 Answers1

Coffe latte