Ensuring that the text-box is the same size as the image

I am encountering two challenges:

  1. When scaling the window down horizontally, I am facing an issue with aligning the images on the left (sideImage) vertically with the text box. I have attempted using margin-top auto and margin-bottom auto, but that does not seem to be effective.

  2. Another problem arises when I scale down the window vertically - the top div disappears inexplicably.

Please note that I am utilizing Bootstrap for this project.

/*-- CSS --*/

* {
  background-color: rgba(0, 0, 0, 0.1);
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
}

.page2Box {
  float: left;
  display: inline-block;
  clear: both;
}

.sideImage {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mainImage {
  float: right;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

p {
  height: 180px !important;
  overflow: hidden;
}
<!DOCTYPE html>
<html>

<head>
  <title>Page2_Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid bigBox col-md-8">
    <div class="container page2Box col-md-12" id="box1">
      <h2 class="col-md-5">Main Goal</h2>
      <p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
    </div>
    <div class="container page2Box col-md-4" <div class="container page2Box col-md-12" id="box2">
      <img class="image-responsive sideImage col-md-4" src="placeholder.png">
      <h2 class="col-md-5">Who We Are</h2>
      <p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
    </div>
    <div class="container page2Box col-md-12" id="box3">
      <img class="image-responsive sideImage col-md-4" src="placeholder.png">
      <h2 class="col-md-5">What We Do</h2>
      <p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
    </div>
  </div>
  <image class="image-responsive col-md-4 mainImage" src="placeholder.png">
</body>

</html>

This is how it looks like. https://i.sstatic.net/YDkKK.jpg

Here are the problems. https://i.sstatic.net/5Ux0r.jpg

https://i.sstatic.net/mLRs4.jpg

https://i.sstatic.net/zb0Mg.jpg

htmlcssbootstrap-4

Answer №1

To enhance the layout, I recommend utilizing the flex-box feature and organizing the image and text within separate div elements. Here's an example:

HTML:

<div class="container">
    <div class="row equal">
        <div class="col-md-6 col-sm-6">
            <div class="box">
                <img class="image-responsive" src="http://via.placeholder.com/350x150" />          
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="box">
                <h2>Main Goal</h2>
                <p>In iaculis elit id odio malesuada, vitae euismod dui viverra. Maecenas pulvinar quis magna in dapibus. Ut eget elit eget nibh eleifend ultricies a a orci. Aliquam tristique nulla eu sapien posuere egestas. </p>
            </div>
        </div>
    </div>
</div>

CSS:

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
}

JSFiddle: https://jsfiddle.net/Jabideau/rkzafmrb/

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

Utilizing Grunt bake to generate unique files with various content from a single template

Is it possible to use bake to display multiple contents within the same styled template? https://github.com/MathiasPaumgarten/grunt-bake For example, if my template looks like this: <div style="background-color:red"> </div> And I have Cont ...

htmlnode.jswebgruntjs

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

Tips for creating a Google Chart using temperature and humidity data sourced from an XML file

Below is the XML file I am working with: <data> <temp>21</temp> <humidity>17</humidity> <analog>670</analog> <analog>908</analog> <analog>628</analog> <analog>909</analog> <L ...

javascripthtmlajaxxmlarduino

What is the best way to show a label and select box side by side using Angular Material?

I have been trying to keep input and label in the same line using Angular Material, but I haven't found a solution yet. Most of the available solutions are in HTML and CSS, but I specifically need a way using Angular Material. The method I tried invo ...

cssangularangular-materialangular-reactive-formsangular-flex-layout

Preserve Chinese characters using Spring-MVC in Java

How can I properly save Chinese characters from a form submission into the database? I have already specified the contentType in the jsp like this: <%@ page contentType="text/html;charset=UTF-8" %> I have also included this tag within the head sec ...

javahtmlspringspring-mvc

Tips for matching the width of tooltips with the length of the title

I am trying to adjust the width of the antd tooltip to match that of the title. Here is the code snippet: <Tooltip placement="top" align={{ offset: [0, 10] }} title='this is the title'> <span>tooltip</span> </T ...

javascriptcssreactjstooltipantd

flawless approach to showcasing visual content

I am a beginner in css. My goal is to showcase my images in an optimal way This is the HTML code I have: <div id="photos"> <h3>Title of the Photo</h3> <P class="like"><a href="#">Give it a Like</a& ...

htmlcss

Is there a way to create a password-like input in HTML that can also trigger keydown events?

Is there a way to record keyboard events on masked password input elements without compromising security? I want to assure everyone that my intentions are not malicious. I am simply looking for a way to analyze user behavior after informing them and ensur ...

javascripthtmlpasswordskeyboard-eventsmaskedtextbox

Troubleshooting the Height Problem in Bootstrap Divisions

Can someone help me align the height of the alert box with the input field? I've tried using Bootstrap classes but can't seem to get it right. I attempted using col-mb-4 in the alert class, but the height alignment is still off. <link rel= ...

htmlcsstwitter-bootstrapbootstrap-5

Searching with beautifulSoup's find_all() method across a sequence of HTML tags

I need to find specific tags within tags using BeautifulSoup's find_all() method on a website. For instance, I want to search for data within: <li class='x'> <small class='y'> The issue is that my current code is r ...

pythonhtmlbeautifulsoup

What is the best way to make a CSS element embrace another element positioned either above or below it?

I've been attempting to arrange multiple CSS shapes to hug each other, but I'm facing some difficulties. After researching online, the only solution I came across was using inline-block. However, I'm struggling to achieve the desired outcome ...

htmlcss

Issue with border radius in MUI 5 affecting table body and footer elements

Currently, I am diving into a new project utilizing React version 18.2 and MUI 5.10.3 library. My main task involves designing a table with specific styles within one of the components. The table header should not display any border lines. The table body ...

cssreactjstypescripthtml-tablematerial-ui

Ensure that Selenium does not proceed until the content within a specific web element has been

Currently, I am utilizing Selenium to automate the process of uploading an excel file to a website. To ensure that the upload is fully completed before moving forward, I have implemented time.sleep(60). However, I am looking to enhance the efficiency of th ...

pythonhtmlseleniumselenium-webdriverwebdriverwait

When initializing a new instance of Stripe using cartalyst/stripe-laravel, an error occurs stating "The Stripe API key has not been properly defined!"

I am eager to explore Stripe and learn how to process payments. Currently, I am utilizing the cartalyst/stripe-laravel package to create a new instance of Stripe following the instructions provided here. The code snippet should resemble this: $stripe = ...

phphtmllaravelstripe-payments

The placement of the floating element completely messes up the

Whenever I try to float an element in my magnificent popup, the layout gets all messed up. You can see for yourself by trying to put the image and text next to each other using "float: left": http://jsfiddle.net/a7Vj8/1/ Every time I attempt to float th ...

htmlcss

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

javascriptcssjquery

Struggling to correct alignment issues with buttons within a container using Bootstrap 5

I'm struggling with a piece of html code where everything looks good except for the placement of the button. It seems to be too far away from the container. Here's the code snippet: <div class="container-fluid mt-1 d-flex align-items-cent ...

htmlbootstrap-5

The angular.copy() function cannot be used within angular brackets {{}}

Within my controller, I am utilizing the "as vm" syntax. To duplicate one data structure into a temporary one, I am employing angular.copy(). angular.copy(vm.data, vm.tempData = []) Yet, I have a desire to transfer this code to the template view so that ...

javascripthtmlangularjs

How can I showcase an image from the search results using the Giphy API?

Find the GitHub link to the Giphy API here: https://github.com/Giphy/GiphyAPI. As a newcomer, I'm facing a roadblock. Currently, I am receiving random gifs from the Giphy API instead of the specific search result requested by the user. Is there a wa ...

javascriptjqueryhtmljsongiphy-api

Having trouble getting the jquery tabify plugin to work properly

I've put in a lot of effort and double-checked everything, but for some reason this tabify function just won't work. I have gone through my code 100 times but still can't seem to pinpoint the error. Here is the code I am working with: <! ...

javascriptjquerycss