CSS does not work and DOM structure from HTML

Question

.empty-space{
    width: 30%;
    float: left;
}

.download-information{
    width: 70%;
    float: left;
}

.download-thumbnail img {
    height: 30px;
    width: 30px;
    float: left;
}

.download-profile{
    float: left;
}

<div class="download-content">
    <div class="download-information">
        <div class="empty-space"></div>
        <div class="information">
            <div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
            <div class="download-profile">
                <b><div class="img-title">Demo title</div></b>
                <div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
            </div>
        </div>
    </div>
    <div class="download-link-content">
        <div class="download-link-content">
            <div class="download-icon"><i class="fas fa-download"></i></div>
            <div class="link-to-download"><a href="#">Download</a></div>
            <div class="download-link-information">
                <span>(
                    <span class="download-filesize">3,2 MB,</span>
                    <span class="download-filestype">PDF</span>
                    )
                </span>
            </div>
        </div>
        <div class="empty-space"></div>
    </div>
</div>

I have the following mockup which I am now trying to model.

I have thought of the following HTML framework and associated CSS:

<div class="download-content">
    <div class="download-information">
        <div class="empty-space"></div>
        <div class="information">
            <div class="download-thumbnail"></div>
            <div class="download-profile">
                <b><div class="img-title"></div></b>
                <div class="img-description"></div>
            </div>
        </div>
    </div>
    <div class="download-link-content">
        <div class="download-link-content">
            <div class="download-icon"><i class="fas fa-download"></i></div>
            <div class="link-to-download"></div>
            <div class="download-link-information">
                <span>(
                    <span class="download-filesize">,</span>
                    <span class="download-filestype"></span>
                    )
                </span>
            </div>
        </div>
        <div class="empty-space"></div>
    </div>
</div>

.empty-space{
    width: 30%;
    float: left;
}

.download-information{
    width: 70%;
    float: left;
}

.download-thumbnail {
    height: 30px;
    width: 30px;
    float: left;
}

.download-profile{
    float: left;
}

Unfortunately it doesn't work and frontend is not my strength at all and unfortunately I don't know anyone who can help me here how to do it. Can someone here help me how it should look or how I would have to style the CSS?

Add 1: Is my idea of the HTML DOM wrong or is it possible to implement this so that the image can also be displayed correctly

Add 2: Add snippet to my post. I don't get it. It's only a privat project but don't get the frontend styling.

Could you put your code into a working Stackoverflow snippet with one example of content (including an image) so we can see what the problem is. — A Haworth, Jan 19 '21 at 10:12
Thanks for the snippet. It looks as though CSS grid might help you and I've put up a small example in an answer to get you started. This [link]https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout is a good place to start with the fundamentals of grid. — A Haworth, Jan 19 '21 at 12:49

score 0 · Answer 1 · answered Jan 19 '21 at 12:47

It looks as though the CSS grid property will help here as it will work out how much space to leave between items tso you don't need to worry about floats or having empty space divs.

Here's a snippet to get you started. Obviously you'll want to look at the exact proportions you want for each part. You may also want to have a media query so that narrow devices use the full width of the screen for example.

You could also review your HTML structure as, with thinking of it in grid terms, it might be possible to simplify it.

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
}

.download-content {
    display: grid;  
    grid-template-columns: 2fr 1fr;
    width: 70%;
    margin: 0 auto 0 auto;
}
.information{
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 6fr;
}

.download-thumbnail img {
    width: 100%;
    height: auto;
}

.download-link-info div {
    display: inline-block;
}

</style>
</head>
<body>
<div class="download-content">
    <div class="download-information">
        <div class="information">
            <div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
            <div class="download-profile">
                <b><div class="img-title">Demo title</div></b>
                <div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
            </div>
        </div>
    </div>
    <div class="download-link-content">
        <div class="download-link-info">
            <div class="download-icon"><i class="fa fa-download" aria-hidden="true"></i></div>
            <div class="link-to-download"><a href="#">Download</a></div>
            <div class="download-link-information">
                <span>(
                    <span class="download-filesize">3,2 MB,</span>
                    <span class="download-filestype">PDF</span>
                    )
                </span>
            </div>
        </div>
    </div>
</div>
</body>

Johannes · Accepted Answer · 2021-01-19T13:13:41.373

I would not use all these floats, but to stay as close to what you did as possible, here's what you can do:

Move .download-profile into the .information div.
Create an additional wrapper div around .thumbnail and the div which follows after it (which contains the image title and description). (To only have two child elements in .download-profile which will be placed beside each other)
Apply display: flex to .download-profile

.empty-space {
  width: 30%;
  float: left;
}

.download-information {
  width: 70%;
  float: left;
}

.download-thumbnail img {
  height: 30px;
  width: 30px;
  float: left;
  margin: 0 10px 6px 0;
}

.download-profile {
  float: left;
  display: flex;
}

<div class="download-content">
  <div class="download-information">
    <div class="empty-space"></div>
    <div class="information">
      <div class="download-profile">
        <div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
        <div>
          <b><div class="img-title">Demo title</div></b>
          <div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
        </div>
      </div>
    </div>
  </div>
  <div class="download-link-content">
    <div class="download-link-content">
      <div class="download-icon"><i class="fas fa-download"></i></div>
      <div class="link-to-download"><a href="#">Download</a></div>
      <div class="download-link-information">
        <span>(
                    <span class="download-filesize">3,2 MB,</span>
        <span class="download-filestype">PDF</span> )
        </span>
      </div>
    </div>
    <div class="empty-space"></div>
  </div>
</div>

CSS does not work and DOM structure from HTML

2 Answers2