The attempt to showcase items in a div element using inline display did not produce

I am having trouble with creating a webpage. I have designed a website but I am struggling to get it right. I have included my HTML and CSS code below.

What I am trying to achieve is a header at the top, followed by several sections containing a photo on the left and a paragraph on the right, alternating between the two layouts. However, I am facing issues with the first block of information. In my CSS, I have defined the structure of my content, including headers and div elements for photos and paragraphs, but I can't seem to display them inline-block. Where am I going wrong? I have also posted an image of my current progress.

   .container {
  margin: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
 <section class="why-we-help">
    <div class="container">
        <div class="row">
            <div class="home">
                <div class="info">
                    <h1>Dlaczego chcemy pomóc?</h1>
                </div>
                <div class="content">
                    <img class="img" src="images/2.jpg" alt="najwazniejsza jest miłość">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quisquam id deserunt,
                        enim
                        temporibus autem itaque exercitationem, maiores facere magni minima iure rem facilis
                        adipisci
                        porro debitis, quam ad obcaecati.</p>
                </div>
            </div>
        </div>
    </div>
</section>

.home {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: #000000;
}

.info {
  margin: 35px auto;
}

.info h1 {
  color: #ffffff;
  font-size: 2em;
  font-weight: 600;
}

.content {
  display: flex;
 display: inline;
}

.content img {
  flex: 0 0 50%;
  width: 50%;
}

.content p {
  flex: 0 0 50%;
  width: 50%;
}

https://i.stack.imgur.com/6tBRl.jpg

Answer №1

Experiment with the properties display:flex, flex-direction: row, and flex-direction: row-reverse

Answer №2

When we talk about inline, it generally means being positioned side by side horizontally. To achieve this effect, you can simply remove the display:inline; property from your .content class as shown below:

.content{
  display:flex;
  /*Additional flex box properties*/
  flex-direction:row;
  flex-wrap:wrap;
 }

Answer №3

Here is a solution that may meet your needs.

To improve the structure and organization of the code within the section, I made some adjustments to manage the css properties of each element, making it easier to understand.

I've also included a fixed header at the top for added functionality.

.header {
  position: fixed;
  top: 0;
  z-index: 1000 !important;
  
  width: 100%;
  height: 2rem;
  padding-top: 0.5rem;
  
  background-color: white;
  text-align: center;
}

.why-we-help {
  position: absolute;
  top: 1.5rem;
  
  height: 1000px;
  margin: auto;
  padding-top: 0.5rem;
  
  background-color: black;
  color: white;
}

.title {
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  
  text-align: justify;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row:nth-of-type(2n) {
  flex-direction: row-reverse;
  margin-right: 1rem;
}

.img {
  width: 100%;
}

.row:nth-of-type(2n) .img {
  margin-left: 1rem;
}
<div class="header">This is a header that will always stay on top</div>
<section class="why-we-help">
  <h1 class="title">This is the title of the section</h1>
  <div class="container">
    <div class="row">
      <img class="img" src="images/2.jpg" alt="Image 1">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quisquam id deserunt, enim temporibus autem itaque exercitationem, maiores facere magni minima iure rem facilis adipisci porro debitis, quam ad obcaecati.</p>
    </div>
    <div class="row">
      <img class="img" src="images/2.jpg" alt="Image 2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quisquam id deserunt, enim temporibus autem itaque exercitationem, maiores facere magni minima iure rem facilis adipisci porro debitis, quam ad obcaecati.</p>
    </div>
    <div class="row">
      <img class="img" src="images/2.jpg" alt="Image 1">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quisquam id deserunt, enim temporibus autem itaque exercitationem, maiores facere magni minima iure rem facilis adipisci porro debitis, quam ad obcaecati.</p>
    </div>
    <div class="row">
      <img class="img" src="images/2.jpg" alt="Image 2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quisquam id deserunt, enim temporibus autem itaque exercitationem, maiores facere magni minima iure rem facilis adipisci porro debitis, quam ad obcaecati.</p>
    </div>
  </div>
</section>

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

A guide on incorporating jQuery alert messages into Angular 2

Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...

spacing between elements vertically

             I am struggling with a common issue and despite searching, I have not been able to find a solution that works for me. Here is my setup: <div id="wrapper">   <div class="content-area-top"></div>   <div clas ...

Obtaining the count of a specific column in Angular 6 by grouping objects based on the same value in an array

In TypeScript, I have an array of objects and I am using a foreach loop. The array contains 2 columns with a progress value of 100, while the rest have values less than 100. My goal is to calculate the count of columns with a progress value of 100, which ...

What is the best way to limit the number of visitors allowed on a webpage?

I'm in the process of working on an application that includes an edit button: Here's my edit button: <th title="Edit task" class="edit" style="float: right; $color;"> <?php echo "<a href=edit.php?id=" . $row["id"] . "> ...

Tips for updating the minimum value to the current page when the button is pressed on the input range

When I press the next button on the current page, I want to update the value in a certain way. https://i.stack.imgur.com/XEiMa.jpg I have written the following code but it is not working as expected: el.delegate(".nextbtn", "click", f ...

CSS DROP DOWN NAVIGATION MENU - Struggling to maintain hover effect on main menu item while navigating through sub-menu

I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...

Is there a way to verify if text was generated using CSS?

I am working with the following HTML structure: <h4 id="myModalLabel"></h4> In my CSS, I have set the content dynamically using the following code: #myModalLabel::after { content: "gebeurtenis"; } For a live example, you can check out t ...

What is causing concatenated string class names to fail in Tailwind CSS?

Whenever I find myself needing to style my React elements, I end up using the style attribute instead of className. None of the examples I've come across seem to apply styles that fit my specific needs. Can you shed some light on why this happens and ...

Using jquery/offset to position a div causes it to float, but it does not take

<script type="text/javascript"> $(document).ready(function () { var top = $('#rt_outer').offset().top - parseFloat($('#rt_outer').css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { // det ...

Discovering HTML attributes using part of the attribute's name

Can someone help me identify and remove all attributes in my HTML page that contain the word "data"? I want to clear out the values for these attributes. Any suggestions on how to achieve this? For instance, consider the following snippet from my HTML: & ...

Utilizing consistent form elements throughout various tabs

I'm working on an HTML project where I need to replicate form elements across different tabs with each tab having unique values. To achieve this, I found a helpful resource at . Here is what I've attempted: <html> <link rel="stylesheet" ...

What could be causing the malfunction of this JavaScript dropdown select feature in Internet Explorer?

I created a website that requires users to input their location, including the city and state. The process involves two dropdown menus: - The first dropdown menu, labeled "state," loads all USA states as selectable options when the website is loaded. This ...

Creating a unique dimming effect for modals in a React application

Could someone assist me in adding opacity or dimming the background while a modal is open using the code provided? You can view the working example here. ...

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

Adjust the size of the font in accordance with the value of the span text

I am looking to adjust the font size based on the value within the span element. The numbers in the class name may vary. Issue: using text() retrieves all values (e.g. 50020) I want to incorporate each() and $this in some way. How can I do this? Thank ...

Exploring Event Listening in HTML5 Programming

Having been an AS3 developer, I'm accustomed to this: addEventListener(Event.RESIZE, onResize); Currently diving into Typescript/JS/HTML5, I've noticed various ways of accomplishing tasks. I particularly prefer this method: window.addEventLis ...

Angular 17 | Angular Material 17.3.1: Problem encountered with Angular Material form field focus and blur event handling

I attempted to apply (blur) and (focus) effects to my mat-form-field input field, but it seems like they are not working properly on my system. Here is a code snippet that resembles what I am using: html file <form class="example-form"> ...

Having difficulty viewing the images clearly

My JavaScript codes for scrolling images are not displaying all the images when viewed on Google Chrome. Is there a solution available? Below is the included JS code and CSS. data=[ [" images/img1.jpg"," Image1","pic01.jpg"], [" images/img2.jpg","Image2 " ...

Iterate over the MVC model and deliver the results

Below is the code snippet for the model that retrieves names and ids... public class AccountType { public int Id { get; set; } public string Name { get; set; } public static AccountType[] AvailableAccountTypes { get { ...

Having trouble making alerts or confirmation dialogs function in JavaScript

EDIT: Many thanks to everyone who helped fix this issue (: Your help is greatly appreciated! I've been struggling to get the alert, confirm, or prompt functions to work properly in my code. Here's a snippet of the code that's causing troubl ...