Html Question posted in
Some basic documentation can be found here.

Html – What is the best way to align the width of the child container of half width to the parent container of full width

Here is my code:

.container{
  padding: 2rem;
}
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>

<section class="container mx-auto py-3">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non mauris ligula. Vestibulum ut porta dolor. Fusce viverra turpis a lorem iaculis vehicula. Integer blandit in eros in molestie. Nunc et vehicula odio, at lobortis dui. Aliquam erat volutpat. Aliquam a turpis vel nisi pellentesque semper sit amet condimentum nibh. Nullam fringilla vitae mauris vel semper.
    </p>
</section>

    <section>
        <!-- Section 1 -->
        <div class="flex flex-col md:flex-row">
            <!-- Image Section -->
            <div class="w-full md:w-1/2 h-64 md:h-auto">
                <img src="https://picsum.photos/600/400" alt="Description" class="w-full h-full object-cover">
            </div>
            <!-- Text Section -->
            <div class="w-full md:w-1/2 flex flex-col justify-center">
                <div class="container mx-auto">
                    <h2 class="text-sm uppercase tracking-widest text-gray-500">This is the subtitle</h2>
                    <p class="mt-4 text-lg leading-relaxed text-gray-800">This is the title of the section and this title could be one or two sentences and might be long around this</p>
                    <a href="#" class="mt-6 inline-block text-blue-500 hover:text-blue-700 underline">Read More</a>
                </div>
            </div>
        </div>

        <!-- Section 2 -->
        <div class="flex flex-col md:flex-row-reverse">
            <!-- Image Section -->
            <div class="w-full md:w-1/2 h-64 md:h-auto">
                <img src="https://picsum.photos/600/400" alt="Description" class="w-full h-full object-cover">
            </div>
            <!-- Text Section -->
            <div class="w-full md:w-1/2 flex flex-col justify-center">
                <div class="container mx-auto">
                    <h2 class="text-sm uppercase tracking-widest text-gray-500">This is the subtitle</h2>
                    <p class="mt-4 text-lg leading-relaxed text-gray-800">This is the title of the section and this title could be one or two sentences and might be long around this</p>
                    <a href="#" class="mt-6 inline-block text-blue-500 hover:text-blue-700 underline">Read More</a>
                </div>
            </div>
        </div>
    </section>

</body>
</html>

enter image description here

Here in the image you can see that, green line represents the main container, and there in another section I am trying to allow image the all space on the left, however, on the right the text is not being aligned with parent container. One way could be adding padding but i believe that won’t be responsive because the container would have the max width based on different screen size.

How can I align the red container with green. I am looking for answer that works for responsive screen as well.

Tags:

2

Answers


  1. 0 
    .container{
  padding: 2rem;
}
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>

<section class="container mx-auto py-3">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non mauris ligula. Vestibulum ut porta dolor. Fusce viverra turpis a lorem iaculis vehicula. Integer blandit in eros in molestie. Nunc et vehicula odio, at lobortis dui. Aliquam erat volutpat. Aliquam a turpis vel nisi pellentesque semper sit amet condimentum nibh. Nullam fringilla vitae mauris vel semper.
    </p>
</section>

    <section>
        <!-- Section 1 -->
        <div class="flex flex-col md:flex-row">
            <!-- Image Section -->
            <div class="w-full md:w-1/2 h-64 md:h-auto">
                <img src="https://picsum.photos/600/400" alt="Description" class="w-full h-full object-cover">
            </div>
            <!-- Text Section -->
            <div class="w-full md:w-1/2 flex flex-col justify-center">
                <div class="container mx-auto">
                    <h2 class="text-sm uppercase tracking-widest text-gray-500">This is the subtitle</h2>
                    <p class="mt-4 text-lg leading-relaxed text-gray-800">This is the title of the section and this title could be one or two sentences and might be long around this</p>
                    <a href="#" class="mt-6 inline-block text-blue-500 hover:text-blue-700 underline">Read More</a>
                </div>
            </div>
        </div>

        <!-- Section 2 -->
        <div class="flex flex-col md:flex-row-reverse">
            <!-- Image Section -->
            <div class="w-full md:w-1/2 h-64 md:h-auto">
                <img src="https://picsum.photos/600/400" alt="Description" class="w-full h-full object-cover">
            </div>
            <!-- Text Section -->
            <div class="w-full md:w-1/2 flex flex-col justify-center">
                <div class="container mx-auto">
                    <h2 class="text-sm uppercase tracking-widest text-gray-500">This is the subtitle</h2>
                    <p class="mt-4 text-lg leading-relaxed text-gray-800">This is the title of the section and this title could be one or two sentences and might be long around this</p>
                    <a href="#" class="mt-6 inline-block text-blue-500 hover:text-blue-700 underline">Read More</a>
                </div>
            </div>
        </div>
    </section>

</body>
</html>
    Login or Signup to reply.
  2. 0

    Use percentage (%), I have come to find that percentage values of a child are relative to the parent

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search