As a beginner in the world of web development, I recently embarked on my first project.
However, I am facing an issue where I cannot align multiple elements under each other next to an image. One element floats at the top beside the image, while the other ends up floating at the bottom. My intention is to have them both aligned under one another.
Here is the code snippet:
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 {
}