CODEWITHSUNDEEP
htmlcss
Morad
Morad

Reputation: 13

How to add multiple elements under each other next to an image?

Im new to web development and I just started out my first project.

The problem is that I can't seem to float multiple elements under each other next to an image. One floats at the very top next to the image, and the other floats at the very bottom next to the image. I want them to both be under each other.

This is what I have

HTML: 

<div class="container">
  <div class="Main-Heading text-center ">
    <h1>Albert Einstein 1879-1955</h1>
  </div>

  <div class="picture">
    <img class="img-rounded img-thumbnail img-responsive" src="http://science-all.com/images/albert-einstein/albert-einstein-04.jpg" name="Albert Einstein" alt="Albert Einstein posing for a picture with his hands crossed">
    <blockquote cite="http://www.brainyquote.com/quotes/authors/a/albert_einstein.html">
      The important thing is not to stop questioning. Curiosity has its own reason for existing.
    </blockquote>
    <p>Albert Einstein was a German-born theoretical physicist.</p>

  </div>


</div>

This is what I have

CSS:

.Main-Heading h1 {
   display: inline-block;
   color: black;
   font-size: 70px;
   font-family: Candal;


}
.picture p {
  float: right;
  display: inline-block:


}
.picture blockquote {
  float: right;
  font-family: Pacifico, sans-serif;
  font-size: 17px;

}
.container {
  background-color: rgb(230, 230, 230);
}
.main_text {

}

.picture {
  display: inline-block;


}
body {


}

Upvotes: 1

Views: 507

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

Float your image left.

Add this to your css:

.picture img {
   float: left;
}

Don't forget to clear afterwards too but putting a <div style="clear: both;"></div> after your floated elements.

See this previously asked question which also may provide some handy information.

Upvotes: 2

Related Questions