What is the best way to align text next to an image when the image size is larger?

I have developed a code for a used vehicle platform using HTML with flex, and while it functions properly, the aesthetic appeal is lacking:

body {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  line-height: 18px;
}

header.infog {
  background-color: #333;
  color: #FFF;
  margin-bottom: 25px;
  padding: 30px;
}

footer.infog {
  background-color: #333;
  color: #FFF;
  margin-top: 20px;
  margin-bottom: 25px;
  padding: 10px;
}

.mainwrapper {
  border: 2px solid;
  display: table;
  margin-left: 50px;
  width: 900px;
}

.itemwrapper {
  display: table-row;
  width: 90px;
  margin-right: -40px;
}

.itemwrapper1 {
  display: table-row;
  margin-left: -356em;
  width: 100px;
}

.itemwrapper1 img {}

.some-page-wrapper {
  margin: 15px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  margin-left: 40px;
  width: 600px;
  color: #333;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding: 20px;
}

.column1 {
  margin-left: 40px;
  background-color: blue;
  color: #FFF;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  flex: 1;
  padding: 20px;
}

.priceg {
  font-size: 29px;
  color: red;
  padding-left: 500px;
}

.img-nac img {
  max-width: 330px;
}

.img-nac1 img {
  max-width: 460px;
}

.ncat {
  flex-direction: row;
  margin-left: -450px;
  text-align: right 50px;
}

.ncat1 {
  flex-direction: row;
  margin-left: -200px;
  text-align: right 50px;
}

.at1 {
  white-space: nowrap;
  margin-top: -20px;
}

.priceh {
  margin-left: 180px;
  margin-top: -20px;
}

.mainwrapper {
  margin-bottom: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Car , Van, Caravan Dealer | Quality Used Cars</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>

<body>
  <header class="infog">
    header
  </header>
  <div class='some-page-wrapper'>
    <div class='row'>
      <div class='column1'>
        2003 TOYOTA RAV4 2.0 GX
      </div>
      <div class='column1 priceg'>
        £8995
      </div>
    </div>
    <div class='row'>
      <div class='column img-nac'>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
      </div>
      <div class='column ncat'>
        black
      </div>
    </div>
  </div>
  <div class='some-page-wrapper'>
    <div class='row'>
      <div class='column1'>
        2003 TOYOTA RAV4 2.0 GX
      </div>
      <div class='column1 priceg'>
        £8995
      </div>
    </div>
    <div class='row'>
      <div class='column img-nac1'>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
      </div>
      <div class='column ncat'>
        rowtt
      </div>
    </div>
  </div>
  <div class='some-page-wrapper'>
    <div class='row'>
      <div class='column img-nac'>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
      </div>
      <div class='column at1'>
        <h3>2004 TOYOTA RAV4 2.0</h4>
          black
      </div>
      <div class='column priceh'>
        <h3>£6000</h4>
      </div>
    </div>
  </div>
  <footer class="infog">
    footer
  </footer>
</body>

</html>

The issue arises when I try to ensure that the large image remains alongside the text content on the page, similar to my sample from this link: https://i.sstatic.net/ficfw.jpg The blue line below appears to be overlapping with the next image due to poor screen capture.

My struggle lies in figuring out how to use CSS properties like max-width together to achieve this effect, resulting in: https://i.sstatic.net/X4CSf.jpg

Additionally, the car description within the second flexbox (columns and ncat classes) does not display as intended.

While everything functions well with smaller images, I'm aiming to make them larger for better visibility.

This isn't the final version yet, as I plan to incorporate the Roboto font and more in the CSS, but I am almost there.

I would greatly appreciate any advice or guidance on how to successfully implement this layout using flexbox.

htmlcss

Answer №1

To enhance your website's appearance, simply insert the provided CSS code into your style sheet

body {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 18px;
  }
  
  header.infog {
    background-color: #333;
    color: #FFF;
    margin-bottom: 25px;
    padding: 30px;
  }
  
  footer.infog {
    background-color: #333;
    color: #FFF;
    margin-top: 20px;
    margin-bottom: 25px;
    padding: 10px;
  }
  
  .mainwrapper {
    border: 2px solid;
    display: table;
    margin-left: 50px;
    width: 900px;
  }
  
  .itemwrapper {
    display: table-row;
    width: 90px;
    margin-right: -40px;
  }
  
  .itemwrapper1 {
    display: table-row;
    margin-left: -356em;
    width: 100px;
  }
  
  .some-page-wrapper {
    margin: 15px;
  }
  
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .column {
    margin-left: 40px;
    color: #333;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  
  .column1 {
    margin-left: 40px;
    background-color: blue;
    color: #FFF;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    flex: 1;
    padding: 20px;
  }
  
  .priceg {
    font-size: 29px;
    color: red;
    padding-left: 500px;
  }
  
  .img-nac img {
    max-width: 330px;
  }
  
  .img-nac1 img {
    max-width: 460px;
  }
  
  .ncat {
    flex-direction: row;
    text-align: right 50px;
  }
  
  .ncat1 {
    flex-direction: row;
    text-align: right 50px;
  }
  
  .at1 {
    white-space: nowrap;
    margin-top: -20px;
  }
  
  .priceh {
    margin-left: 180px;
    margin-top: -20px;
  }
  
  .mainwrapper {
    margin-bottom: 20px;
  }

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

I'm having trouble centering the links in my navigation bar using flexbox, and I'm not sure how to fix it

Struggling with creating a navigation bar for my portfolio-building project. The "Who needs a quote" element is correctly displaying on the left, but I can't figure out how to center align the links "Sports, business, politics". Tried using flexbox op ...

htmlcssreactjs

What is the process of embedding audio in HTML5 using base64 encoding?

I have a base64 encoded audio record in WAV format (data link - {{vm.record}}). I am trying to add an audio player to a widget written in JS and HTML that can play the audio for me. I'm not sure why it's not working. Do I need to write something ...

htmlbase64html5-audiowav

Generate an li element that is interactive, containing both text and a span element

I am dealing with a JSON array that looks like this: var teamDetails=[ { "pType" : "Search Engines", "count" : 5}, { "pType" : "Content Server", "count" : 1}, { "pType" : "Search Engines", "count" : 1}, { "pType" : "Business", "count" : 1,}, { "pTyp ...

javascriptjqueryhtmljsonajax

Interactive Django table using AJAX

This marks the second question in a series regarding my Django project. The code utilized here contains sections borrowed from this post: Stack Overflow The goal is to implement a dynamic table that cycles through objects in a list (currently set at an in ...

htmlajaxdjangodjango-templatesdjango-views

The conceal feature doesn't appear to be functioning properly on jQuery Mobile

I am facing an issue with a small mobile app built using jQuery Mobile. Within a div, I have three buttons and other content. My goal is to hide these three buttons if the user's device is running on Windows (WP). The buttons are defined as follows: ...

javascriptjqueryhtmlcssjquery-mobile

JavaScript time zone error specific to Internet Explorer

In my code, I am attempting to retrieve the timezone name or ID based on the client's local time. When testing with clients from the United States, I correctly receive EDT. However, when trying the same code with clients in the Indian timezone, it ret ...

javascripthtmlinternet-explorerdatetimetimezone

Overlapping containers

Recently, I attempted to implement a Bootstrap 4.1 theme into my yii2 project. However, I encountered an issue where the containers were overlapping by about half of their width. Surprisingly, the classes I used are directly from the bootstrap framework. H ...

cssbootstrap-4yii2-advanced-app

In Bootstrap 5, the content within flex box containers always aligns at the top, regardless of other factors

I've been struggling to vertically align flex items within a div using bootstrap 5. Despite trying various methods, I haven't had any success. I've even created a Stack Snippet that perfectly reproduces my issue. It seems like a simple CSS f ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

What is the best way to choose a table row <tr> along with the one directly before it?

In the table I have, the first column spans over two rows while the following columns are split into two separate rows. For this table, I need multiple instances of these "doubled rows", which is not a problem so far. To style it with a zebra pattern, I ...

javascripthtmlcss

Display intricate header and preview in a printed datatable

Hey there, I've been using the Datatable plugin and it's really great. However, I've come across a problem with complex headers like this: <thead> <tr><td>some text</td></tr> <tr><td>some te ...

javascripthtmldatatable

Update the URL every time the user clicks with JavaScript and HTML

Welcome to my website at Inside, I have this JavaScript code: function updateStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet); And in my HTML, you can find: <li><a href="#" onclick="update ...

javascripthtml

Tips for setting up unique colored speech bubbles based on user profiles in an Instant Messaging platform

If you were creating a real-time messaging platform that supports group chats with 3 or more users, and each message bubble needed to have a unique color, how would you approach this? Is there a method to dynamically change the CSS class of a speech bubb ...

javascriptcssnode.jsuser-interfacefrontend

How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

I am having trouble adjusting the font-size of the [pageSizeOptions] in my mat-paginator element in the application. <mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator> The "10" appears too small compared to the text "items per p ...

htmlcssangularangular-materialpaginator

Guide to updating a SQL value via a button click using PHP

Unsure of the amount of code required for my project, so any guidance is appreciated! I am currently working on the admin-end of a PHP project that utilizes SQL. The admin has the ability to update, remove, and promote normal users to administrators (some ...

javascriptphphtmlsql

Problem with Bootstrap 4 layout in Firefox - works fine, but not displaying correctly in

Hey everyone, I've encountered an issue with my code. It's working perfectly fine in Firefox, but in Chrome and Opera, the layout is all messed up. Can anyone help me pinpoint what might be going wrong here? <div class="row broadband-block"&g ...

htmlcssflexboxbootstrap-4

Toggle visibility of multiple DIVs with identical classes using radio buttons

I'm looking to streamline my use of radio buttons in HTML. How can I implement a single set of radio buttons at the top that will toggle the visibility of all DIVs with the same class on my webpage? <form> <input type="radio" name="csr_sel ...

javascriptjqueryhtmlforms

PHP Implementing real-time dynamic categories

I am working on a project where there are multiple items listed with unique IDs. Each item has corresponding data with the same ID. I want to use JQuery, JScript, and PHP to display options based on the ID of the selected item in real-time. Below is a snip ...

javascriptphpjqueryhtmlcss

Is there a way to use jQuery to make a div fade in and toggle over another

I have created a test page and I am looking to achieve a specific effect when the page loads. I want everything on the page to be hidden initially. When I click on the "About" text, I want it to fade in using fadeToggle(); however, when I click on "My work ...

javascriptjqueryhtmlcss

conceal the offspring from the guardians, not the offspring

Could you please assist me with this situation... <li id="4331">Region <ul> <li id="4332">Asia</li> <li id="6621">Europe</li> </ul> </li> I have a query when I click on the Reg ...

jquerycssajax

WordPress sidebar on bottom due to conflict with 960 grid in IE 7/8

After successfully validating my site with w3c, I encountered one small issue. The "& errors" link needed to be replaced with just "&" for the Google Maps link. However, in IE 7/8, there seems to be a conflict with the layout of the site. The sidebar ...

htmlwordpresscsssidebar960.gs