CSS fails to function properly when the structure of the DOM in the HTML file is

.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. https://i.sstatic.net/27Bhj.png

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

https://i.sstatic.net/uPOx2.png

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.

htmlcssweb-frontend

Answer №1

In my opinion, using all these floats may not be the best approach. However, to keep things consistent with your original code, here are some adjustments you can make:

  • Place .download-profile inside the .information div.
  • Add an extra wrapper div around .thumbnail and the subsequent div (containing image title and description). This will ensure that there are only two child elements in .download-profile, positioned next to each other.
  • Add 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>

Answer №2

Using the CSS grid property can be a game-changer in arranging items on your website without worrying about floats or unnecessary markup.

Consider adjusting the proportions of each section to suit your specific needs and don't forget to optimize for different screen sizes using media queries.

Take a moment to rethink your HTML structure through the lens of grids, you might find opportunities to streamline it further.

<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>

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

Connect a responsive div to a main div

I'm relatively new to the world of Javascript, CSS, and HTML. Currently, I'm attempting to anchor a div to the center and bottom of its parent div. The parent div contains a responsive background image and my fa fa-arrow icon is correctly positi ...

javascripthtmlcss

Is it possible to use React and Material-UI to make a paper element extend to full width beyond the boundaries of a Container?

Assuming I have the following code snippet: <Container maxWidth='lg'> <Grid container spacing={3}> <Grid item xs={12} md={6} > <Image src="/img/undraw_programming_2svr.png" color='transparent' ...

cssreactjsmaterial-ui

Utilizing React with Emotion to Customize Font Sizes

In my React app, I am using emotion to style and display the formula for compound interest. Within my render() method, I am returning the following: <div css ={equation}> <p> P (1 +</p> <p css={fraction}> <span classNa ...

cssreactjsemotion

Error: An uncaught exception occurred when trying to access a seekable HTML5 audio element, resulting in an IndexSize

While trying to utilize the HTML5 API along with SoundManager2, I encountered an issue. My goal was to determine the duration of a song in order to create a progress bar that would update as the song played. However, every time I attempted to retrieve the ...

javascripthtmlflaskhtml5-audiosoundmanager2

IE8 is showing incorrect portion of the CSS sprite

After researching countless issues related to sprites and IE8 online, I have encountered a common problem where sprites do not show up at all. However, in my case, the sprite is displayed but showing the incorrect piece of it. Surprisingly, it functions pe ...

htmlcssinternet-explorer-8backgroundsprite

JavaScript form validation problem: Warning for identical responses in the MOST and LEAST sections

I've encountered a challenge while working on an HTML and JavaScript form for a personality test. The issue revolves around validation, particularly when the form includes multiple questions with both "MOST" and "LEAST" radio button options. One spec ...

javascripthtmlcss

How to easily toggle multiple elements using jQuery

I'm having trouble getting this block of code to function properly: $("a.expand_all").on("click",function(){ $(this).text('Hide'); $('.answer').each(function () { $(this).slideDown(150, function () { $( ...

javascripthtmljquerytoggle

Complete visibility of Bootstrap progress labels is compromised

Progress bar with a customized label inside: <div id="progress" class="progress mb-1" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valu ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Troubleshooting: Issue with Angular 2 bidirectional data binding on two input fields

Hi there, I am encountering an issue with the following code snippet: <input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate"> <input #commencementDate id="bankCommencementDat ...

javascripthtmlangular

Consistently ensuring even horizontal CSS padding throughout all components

I'm working on a website using React and TailwindCSS. Each part of the site is its own React Component, but I want to make sure that all sections have consistent horizontal padding and a maximum width where the content stays centered and doesn't ...

cssreactjstailwind-css

Update TinyMCE settings on the fly

On my website, I have implemented Tinymce for content editing. However, when users upload files (such as images, videos, or other files) using Tinymce, they are all uploaded to the default folder defined in the TinyMCE config.php file. The issue arises w ...

phphtmlcsscodeignitertinymce-4

Retrieve the raw text from the input field instead of the date object

Below is the HTML code for an input field: <div class="input-group input-group-md"> <input id="date" name="date" [readOnly]="disabled" type="text" placeholder="M0/d0/0000 Hh:m0:s0" [placeholder]="pl ...

htmlangulartypescript

The date retrieved from the MySQL database is failing to show up properly in an HTML table even after applying the date_format

I am struggling with a piece of HTML code that retrieves data from a database and displays it in an HTML table. The problem is, everything shows up except for the date field. Oddly enough, when I execute the query in the MySQL command line, the date displa ...

phphtmlmysql

Struggling to reset the first item in an HTML select dropdown with Angular - any tips?

I am having an issue with my dropdown in a modal window. When I first open the modal, the dropdown works as expected. However, if I make a selection and then close and reopen the modal, the selected value remains instead of resetting to 'None selected ...

javascripthtmlangulardrop-down-menu

Is it possible to trigger a function using an event on "Any specified selector within a provided array"?

Trying to figure out how to show/hide a group of divs with different IDs by executing a function after creating an array of IDs for the NavBar. I'm having trouble getting started, but here's what I was thinking: $.each(array1, function(i, value) ...

javascriptjqueryhtml

Text in SVG vanishes when label size increases

I've been exploring Morris.js for creating charts, which relies on SVG to generate graphs. I've shared a JSbin setup here: JSbin example One challenge with Morris.js is the X-Axis labels disappearing when they are too large. Adjusting the size o ...

cssgraphsvgchartsmorris.js

HTML - maintain centered text positioning while implementing padding on the left side

Here are the HTML and CSS code snippets I am working with: #page { background-color: #000; color: #fff; height: 360px; width: 360px; min-height: 100%; } #viewport { font-size: 20pt; text-align: center; } .taskTitle { height: 13%; fon ...

htmlcsslayoutstyles

Include a navigation bar in the footer of my WordPress Theme's footer.php file

Looking for help with adding a custom footer to my WordPress theme. I have successfully uploaded my static website here, and now I am in the process of making it dynamic. I have added my primary menu to WordPress, but I am unsure of how to exactly add a fo ...

phphtmlcsswordpress

I encounter issues with HTML input fields becoming unresponsive whenever I attempt to apply CSS filters in IE8 for stretching the background

When I wanted to stretch a background image on my website so that it always fills the available window area regardless of resolution, I initially used background-size:cover;. Unfortunately, Internet Explorer doesn't seem to support valid CSS, so I had ...

jquerycssinternet-explorer-8

What are some ways to expand the width of a MaterialUI form control if no value has been chosen?

I am currently working on a project where I need a dropdown menu component with specific selections. However, the layout appears to be cramped and I'm struggling to adjust the width. Additionally, I've been unsuccessful in changing the font size ...

htmlcssreactjstypescriptmaterial-ui