What is the best way to stack several items vertically beside an image?

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 {

}

Answer №1

Align your image to the left.

Include the following code in your CSS:

.picture img {
   float: left;
}

Remember to clear afterwards by adding

<div style="clear: both;"></div>
after your floated elements.

Check out this previously asked question for additional insights as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: jwt_decode function has not been declared

I'm currently working on a project and I've hit a roadblock while trying to fetch profile information for the logged-in account using a token. Despite using the JWT-decoding library, I keep encountering the issue where jwt_decode is not defined. ...

Avoiding the <br> tag in list items with TinyMCE

I am currently using tinyMCE and I needed to enable the "force_br_newlines: true" option. Without this setting, if I press the "Enter" key twice and check the source code, I only see one <br> tag. However, when I set the option to TRUE, it creates a ...

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

I'm currently working on my angular project and I've imported the ngx-editor. My goal is to reduce the height of the editor, but I'm facing some challenges. After inspecting the element, I was able to adjust the height successfully within th ...

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxe ...

Is it possible to use the AngularJS function with the <div> HTML element?

I am facing an issue with displaying a modal when clicking on a <div> element. The function assigned to show the modal by changing the CSS property 'display' from 'none' to 'block' works fine when attached to a button, b ...

Creating Scalable Vector Graphics without utilizing identifiers

For instance, if we have defs and rect defined separately, we would typically use an ID. <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="#000" /> <stop offset="100%" stop-color="#fff" /> ...

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

Interactive Features in Vue Component

In my Vue Component, I have a prop named src that is bound to a :style attribute like this: <template> <section :class="color" class="hero" :style="{ backgroundImage: src && 'url(' + src + ')' }"> <slot> ...

When the jquery loop fails to function

I need to dynamically add a class to a specific tag using jQuery depending on an if condition. Here's the code snippet: if ($(".asp:contains('Home')")) { $("ul.nav-pills a:contains('Home')"). parent().addClass('active ...

I encountered an error stating "angular not found" when attempting to dynamically load my Angular scripts

My Angular application is running smoothly. However, I found it tedious to include multiple script tags in my HTML documents every time. To simplify this process, I decided to create a small script that would automatically generate the necessary tags for m ...

Struggling to get custom button hover styles to work in React?

In the React project I'm working on, there is a button that has been configured in the following manner. <label style={styles.label}> <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} /& ...

Combining the lower margin of an image with the padding of a container: a step-by-step guide

There are two divs with a 50px padding, making them 100px apart. The top div contains an image floated to the right with paragraphs wrapping around it. The requirements team requests a 20px margin below the image if text flows under it, but no margin if th ...

What is the best way to acquire an ID that is generated dynamically?

Being new to javascript and ajax, I am facing a challenge. I have a while loop with 2 buttons, both of which seem to function correctly, except for one small issue... The product-id is only being passed for the first or last element in the loop. How can I ...

Pause page scrolling temporarily in JavaScript while allowing the scrollbar to continue scrolling until the pause is lifted

I'm currently working on achieving a similar effect to the one found on this website: . On that site, as you scroll down, the 'HELLO' text moves to the side. I've managed to do that part successfully, but I'm facing an obstacle reg ...

CSS rules for organizing the stacking order of elements in the SuperFish Menu with

I've been struggling with a z-index issue on a website I'm currently managing. It seems to stem from the z-index values in the SuperFish Menu and a specific div element. Despite my attempts to apply position:relative/absolute & z-index: 99999 dec ...

Creating a dynamic drop-down box with editable text input using HTML5

I am looking to enhance text editing functionality by incorporating a drop down box and a custom scrollbar. This will allow the end user to input data directly or select from the dropdown options. The final value provided by the user should be saved. I w ...

Setting column heights and spacing in Bootstrap

I'm looking to dynamically populate the blocks. Essentially, a for loop would be used to pass the data. However, I'm facing some challenges with the height of the blocks at different screen sizes while utilizing bootstrap 4. My goal is to have th ...

Conceal a particular object from view by selecting it from the menu

I want to hide a specific element when the burger button is clicked. (See CaptureElementNoDisplay.PNG for the element to hide) When I click the burger button again to close the menu, I want the hidden item to be displayed once more. I've successfull ...

What should I name my Bootstrap Modal ID to ensure AdBlock Plus blocks it?

What specific ID should I use to block my Bootstrap Modal with AdBlock Plus? I want AdBlock Plus to block it for users who have it installed and are using it. I don't want to be overly intrusive by trying to circumvent ABP. The only reason I am using ...

Could Safari 7.1 be causing issues with outline-color and overflow?

After upgrading to Safari 7.1, I noticed that a couple of my css lines have stopped working. These lines were functioning fine with Safari 7.0.x and are still working in browsers like Chrome. overflow: hidden; and outline-color: [color]; Specifically, ...