How can I align the image to the right?-CodePudding

I want my image to float to the right. But if I use the float: right; write a command, it also takes the section with it. See image. The picture is already so far to the right because it is so big. (the rest is transparent).

#second {
  background-color: black;
}

.orange {
  height: 10px;
  background-color: #F54703;
}

#secondBild {
  float: right;
}

<div>
  <section id="first">
    <img src="bilder/Oben_rechtsunten.png">
  </section>
  <section ></section>
  </section>
  <section id="second">
    <img src="bilder/Seite_unten.png" id="secondBild">
  </section>
  <section >
</div>

CodePudding user response：

I'm assuimg when you state 'it takes the section with it' means that you want the section with id = 'second' to occupy the space and image within it to be pushed to the right. To do this you can set the wrapping div to display: flex then use flex-grow to cause the second section to expand. To move the image to the right within section 'second' you use margin-inline: auto 0; You also have to make the image a block element too. If that's not what you're looking for drop me a comment and I'll edit.

Fully marked up html & css below

div {
  display: flex;
}

#second {
  flex-grow: 1; /* added this */
  background-color: black;
}

.orange {
  height: 10px;
  background-color: #F54703;
}

#secondBild {
  /*float: right;*/
  margin-inline: auto 0; /* added this */
  display: block; /* added this */
}

<div>
  <section id="first">
    <img src="https://www.fillmurray.com/200/200">
  </section>
  <section ></section>
  </section>
  <section id="second">
    <img src="https://picsum.photos/200" id="secondBild">
  </section>
  <section >
</div>

CodePudding user response：

Oh I found a way. I just put the image in the background, like this:

#first{
    background-color: white;
    background-image: url(bilder/Oben_rechtsunten.png);
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
    height: 1000px;
}

CodePudding user response：

The float property removes the element from the normal flow of the page, so the block parent won't wrap the floating content. You can solve this by adding display: flow-root to the parent element to wrap its floating contents. Refer to Block formatting contexts for detailed information.

#second {
    display: flow-root;
}

#secondBild {
    float: right;
}

Another easy solution if you don't want to use float is adding text-align: right; to the parent element.

#second {
    text-align: right; 
}

CodePudding user response：

#img-container {
  display: flex;
  align-items: right;
}

Use `display: flex;` and `align-items: right;`

<div id="img-container">
  <img src="#" id="image">
</div>