[ANSWERED] html – Images and text do not align up properly in CSS for template

Question 1

You should really consider learning CSS flex and grid. using float to align divs is not the best practice in 2021.

I have added display: flex to .mc-info and removed all the float properties and max-width:100% to auto scale.

.mc-info {
  display: flex;
}
.mc-info-image {
  max-width: 800px;
}
img {
  max-width: 100%;
}
.info-wrapper {
  padding-left: 20px;
}

And lastly wrapped the car information in <div class="info-wrapper"> </div>

Final code

<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
<head>
<body>
    <title>YourLeisure Motorhomes &amp; Caravans</title>
    <style>
    .header {
    background-color: #333;
    color: #FFF;
    padding: 30px;
    }
    .content {
    width: 750px;
    }
    .mc-info {
    display: flex;
    height: auto;
    border: 2px solid;
    max-width: 800px;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    }
    .mc-info-image {
    max-width: 800px;
    }
    .mc-info-image img {
    margin-right: 29px;
    height: 340px;
    }
    .description {
    font-size: 16px;
    float: right;
    }
    .vehiname {
    font-size: 18px;
    color: green;
    }
    .price {
    color: red;
    }
    footer {
    color: #333;
    background-color: blue;
    }
    img {
        max-width: 100%;
    }
    .info-wrapper {
        padding-left: 20px;
    }
    </style>

</head>
<body>
<div class="header">
<h1>YOURLEISURE MOTORHOMES</h1>
<h2>49 High Street, Northtown</h2>
</div>
<div class="content">

<div class="mc-info">
<div class="mc-info-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/VW_T5_California_front_20071215.jpg/800px-VW_T5_California_front_20071215.jpg">
</div>
<div class="info-wrapper">
    <div class="vehiname">
        <h2>VOLKSWAGEN CALIFORNIA 2.0 BITDI 180</h2>
        </div>
        <div class="price">
        <h2>£45,000</h2>
        </div>
        <div class="description">
        This example has all the equipment you could want
        </div>
</div>

</div>

<div class="mc-info">
<div class="mc-info-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Ford_Transit_FT_130_Camper_%2818418440689%29.jpg/1024px-Ford_Transit_FT_130_Camper_%2818418440689%29.jpg">
</div>
<div class="info-wrapper">
<div class="vehiname">
<h2>FORD TRANSIT CAMPERVAN 2.0</h2>
</div>
<div class="price">
<h2>£1,000</h2>
</div>
<div class="description">
red/white
</div>
</div>
</div>
<footer>
Content to come
</footer>
</body>
</html>

Question 2

The answer given by Josh answers your question.

Moreover, i’d recommend you to use flexbox/grid over float. They have a lot of properties that could be really helpful in making a responsive design.

Question 3

This is the portion of my template, CSS is inline for demo purposes only:

.header {
    background-color: #333;
    color: #FFF;
    padding: 30px;
    }
    .content {
    width: 750px;
    }
    .mc-info {
    height: auto;
    border: 2px solid;
    width: 800px;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    }
    .mc-info-image {
    width: 240px;
    }
    .mc-info-image img {
    margin-right: 29px;
    height: 340px;
    float: left;
    }
    .description {
    font-size: 16px;
    float: right;
    }
    .vehiname {
    font-size: 18px;
    color: green;
    }
    .price {
    color: red;
    }
    footer {
    color: #333;
    background-color: blue;
    }

It’s been causing problems with getting text and images to align properly, as images and DIV overrun, as seen at https://jsfiddle.net/r7podhq6/- the div does not resize with the content, even though a standard image is set.

I’m trying to do something like this for my layout, although with the bordered DIV’s I’m using and keeping class mc-info at the width set.

Should I convert to flex or grid for this? If not, how could I improve this?

My problem is getting text and images to align for this basic template for a car dealer platform.

Looking for help and constructive criticism./

Bollate

[ANSWERED] html – Images and text do not align up properly in CSS for template

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Community

Comment posted by Mansi V Jain

By

Related Post

[ANSWERED] html – Child div has an offset border

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] problem in selecting list item in html/css

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate