Morad Morad - 4 months ago 8
CSS Question

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 {


}

Answer

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.

Comments