Text and Image Blend in Unique Single Column Design

Seeking advice as a beginner in HTML/CSS on how to create a 3-row single column layout with images and text next to each other. Tried using the flexbox model for the text column but struggling to align them properly. Any suggestions on a better approach for a sidebar column with images and text aligned next to each other?

.imagecards {
  width: 450px;
  height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
}

.sidebarcontainer img {
  height: 250px;
  width: 250px;
  padding: 10px;
  margin: 20px 30px 0 0;
  object-fit: contain;
  align-self: flex-start;
}

.sidebarcontainer1 {
  padding: 10px;
  background-color: rgb(228, 228, 228);
}

.sidebarcontainer1 img {
  height: 250px;
  width: 250px;
}

`.sidebarcontainer_text` {
  flex: 1 1 auto;
  align-items: left;
  text-align: left;
}
<div class="imagecards">


  <div class="sidebarcontainer">
    <img src="resources/images/information-orientation.jpg">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

  <div class="sidebarcontainer">
    <img src="resources/images/information-orientation.jpg">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>



  <div class="sidebarcontainer">
    <img src="resources/images/information-orientation.jpg">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

To achieve the desired layout for the two columns in the row, simply apply flexbox to the parent container. 

.sidebarcontainer { display: flex; }
By default, the direction is in a row, aligning the content right next to each other. I made additional edits and styling adjustments to enhance the snippet.

.imagecards {
  width: 600px;
  height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
}

.sidebarcontainer img {
  height: 250px;
  width: 250px;
  padding: 10px;
  margin: 20px 30px 0 0;
  object-fit: contain;
  align-self: flex-start;
}

.sidebarcontainer1 {
  padding: 10px;
  background-color: rgb(228, 228, 228);
}

.sidebarcontainer1 img {
  height: 250px;
  width: 250px;
}

.sidebarcontainer_text {
  flex: 1 1 auto;
  align-items: left;
  text-align: left;
}

.sidebarcontainer {
  display: flex;
  align-items: center;
}
<div class="imagecards">


  <div class="sidebarcontainer">
    <img src="https://picsum.photos/200/300?grayscale">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

  <div class="sidebarcontainer">
    <img src="https://picsum.photos/200/300?grayscale">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>



  <div class="sidebarcontainer">
    <img src="https://picsum.photos/200/300?grayscale">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>
</div>

Answer №2

Implement display: flex for the containers too:

/*QuickReset*/ * {margin:0; box-sizing: border-box; }

.imagecards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
  width: 540px;
}
.sidebarcontainer {
  border: 1px solid #444;
  padding: 20px;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.sidebarcontainer img {
  width: 250px;
  min-height: 250px;
  object-fit: cover;
}

.sidebarcontainer_text {
  padding: 0 20px;
  flex: 1 1 auto;
}

.sidebarcontainer_text h1 {
  padding-bottom: 20px;
}
<div class="imagecards">

  <div class="sidebarcontainer">
    <img src="http://placekitten.com/400/300">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

  <div class="sidebarcontainer">
    <img src="http://placekitten.com/300/300">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

  <div class="sidebarcontainer">
    <img src="http://placekitten.com/450/300">
    <div class="sidebarcontainer_text">
      <h1>Fisma: Design and Prototype</h1>
      <p>Designer Showcase of new Prototype Product</p>
    </div>
  </div>

</div>

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

Generating HTML tables with charts using FireFox

I am encountering an issue: My table contains charts and tables that are displayed correctly in browsers. However, when I attempt to print it (as a PDF) in Mozilla Firefox, the third speedometer gets cut off, showing only 2.5 speedometers. Using the "s ...

javascripthtmlcssfirefoxhighcharts

Determine whether the browser is being used on an Android or iOS device

Is there a dependable method to alter buttons and text on a mobile site based on whether the user is using an Android or iOS browser? ...

javascriptjqueryhtmlbrowser

Ways to update the div's appearance depending on the current website's domain

There is a piece of code that is shared between two websites, referred to as www.firstsite.com and www.secondsite.com The goal is to conceal a specific div only when the user is on secondsite. The access to the HTML is limited, but there is an option to ...

javascripthtmlcss

How to Vertically Center an Image in a Row using Bootstrap

I've been struggling for a while to properly center this image within the row that contains the div with the image. Here is the HTML code I am using: <div class="row"> <div class="col-md-9"> <div ...

htmlcsstwitter-bootstrap

Error message: "Encountered 'Cannot Get' error while building Angular

I encountered an error when trying to run my Angular project in IntelliJ. Upon opening the browser on localhost, I received the message Cannot GET / Here are the steps I followed: Opened up the project Ran npm install -g @angular/cli@latest Ran gradlew c ...

cssnode.jsangularwebpackangular-cli

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

javascriptcsshtml-tableexpandable

Elevate Your Flipclock.js

I am currently working on a website that utilizes flipclock.js, but I am facing some challenges in enlarging it to occupy more space on the page. Is there anyone who knows how to upscale or increase its size? ...

cssflipclock

Ensure that the flex item expands to occupy the vacant space left when other child elements are deleted

I am facing an issue with multiple children inside a parent container that has the CSS properties display: flex and flex-direction: column. There is a toggle button on the webpage which removes one of the children when clicked. The problem I need to solv ...

htmlcssflexbox

Transmit a combination of selection and text inputs through AJAX to PHP, and then save the data in a

Is it possible to send multiple inputs (one text and one select multiple) via AJAX to a PHP file? The data is successfully sent using form serialize, as evidenced by the complete array in prod_multi when logging with console.log. However, I am facing an is ...

phphtmljqueryajax

Inquiries regarding the formatting of HTML tables

image description hereI'm facing an issue with displaying a table in HTML. I've been struggling for three days to find a solution, asked multiple questions without success. Any help would be greatly appreciated. I am trying to use the table tag a ...

htmlcssfrontendthymeleaf

What causes differences in the resulting width between buttons and inputs as opposed to divs and anchor tags?

Check out this JS Bin: http://jsbin.com/ojiJEKa/1/edit I have a question regarding the different width results of <div> and <a> compared to <input> and <button>, even though they have the same style applied. Can anyone explain why ...

javascripthtmlcss

What is the most efficient way to access a cell within an HTML table using jQuery or the Document Object Model (

I have an unchangeable HTML table styled with CSS. My goal is to extract the value from the first column for filtering purposes. I've been struggling to locate a suitable jQuery or DOM function to accomplish this task. Unable to find a way to access ...

javascriptjqueryhtmlcsshtml-table

Transform Plain Text String Into HTML Format

I'm having trouble getting this simple task to work as I expected. I have a Node.js program where I generate a string var based on some parameters. var generatedString = "some string" + "other string"; I want to pass this variable to a method as th ...

htmlnode.js

Troubleshooting problems with opening and closing windows in JavaScript

I'm currently facing an issue with managing browser windows using JavaScript. In my proof of concept application, I have two pages - one for login information (username, password, login button, etc.) and the second page is a management screen. What I ...

javascripthtmlxhtmlbrowserdhtml

"Challenges Arising in Deciphering a Basic JSON Array

After countless attempts, I am still struggling to solve this issue. My PHP code is functioning properly, as it returns the expected data when "Grove Bow" is selected from the dropdown menu: [{"wtype":"Grove Bow","was":"1.55","wcc":"5","wbdmin":"12","wbdm ...

phpjavascriptjqueryhtml

My .php file seems to be having trouble loading any of the external css or javascript files

Being new to PHP, I recently created a .php website and connected it to a local test server using MAMP. However, I encountered an issue where the CSS and JavaScript from external files weren't working, even though the PHP functionality (such as sendin ...

phpjavascripthtmlcss

Is there a way to toggle the visibility of the angular material toolbar at regular intervals?

I'm currently experimenting with the CSS animation feature to display and conceal the angular material toolbar in this demonstration. Inside the application component, the hide attribute is toggled at intervals as shown below: hide:boolean = false ...

javascriptcssangulartypescript

Attempting to design a uniform question mark enclosed within a circle using CSS

I'm attempting to use CSS to create a glyph of a question mark inside a circle, similar to the copyright symbol ©. a::before { content: '?'; font-size: 60%; font-family: sans-serif; vertical-align: middle; font-weig ...

htmlcsspseudo-element

Unlocking the potential of Vue within shadow dom environments

I am facing an issue with a shadow DOM that includes the root element and a Vue component. <template> <div class="container"> <div id="app"></div> </div> <script src="http://my-site.com/app/js/vue-compo ...

javascripthtmlvue.js

I desire to place a picture atop a carousel within a bootstrap framework

I'd like half of my display picture to overlap the carousel image at the top and be centered. The carousel should serve as a cover page similar to Facebook. .dp-container{ width: 200px; height: 200px; border: 2px solid black ...

htmlcssbootstrap-4