Correcting the Placement of Text and Images within an Article with CSS

  1. I want to ensure that the text aligns properly with the article images on the right side.

  2. To achieve this alignment, I believe some adjustments need to be made to the .watch-listen-link class.

  • Despite trying to add a top-margin property to the class, I haven't seen any changes. What other steps should I take?
.article-side-image{
            
            float: left;
            width: 140px; 
            margin-left: 8px;
            margin-right:4px;
            margin-top: 8px;
            
        }
        
        .watch-listen-link { 
        
            text-decoration: none;
            color: black;
            font-weight: bold;
            font-size: 18px;
        
        }
        
        .watch-listen-link:hover{
            
            color: #1167a8;
            
        }
        
        .side-article {
            float: right;
            width: 250px;
            position: relative;
            top: -13px;
        }
        
        .no-border{
            
            border-left: none;
            padding: 0;
            
        }
        
        .border-right{
            
            border-right: 1px solid #CCCCCC;
        }
        
        
    </style>    





body section: 

img class="article-side-image" src="images/article3.png">
                        
                    <div class= "side-article">

                     <p><a class= "watch-listen-link" href=""> SpaceX rocket explodes during landing </a></p>

                        <p> <img class="clock" src="images/Clock-image.png"> <span class= "date  border-right"> 19 January 2016 </span> <br> <a class="topic-link no-border" href=""> Science & Environment </a>  </p>
                </div>
css

Answer №1

It appears that the design you are working on resembles a popular web layout known as a media object. This style is widely used across various websites.

Instead of using outdated methods like float, I recommend utilizing more modern techniques such as CSS grid or Flexbox for creating media objects efficiently.

I have taken inspiration from the media objects article mentioned earlier and modified it to suit your needs:

.media {
        display: grid;
        grid-template-columns: fit-content(200px) 1fr;
        grid-template-rows:1fr auto;
        grid-template-areas:
            "image content"
            "image footer";
        grid-gap: 20px;
        margin-bottom: 4em;
    }

    .img {
        grid-area: image;
    }

    .content {
        grid-area: content;
    }
<div class="media">

    <div class="img">
    <img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
</div>

<div class="content">
    <p>
        <a>SpaceX rocket explodes during landing</a>
    </p>
    <p>
        <img class="clock" src="images/Clock-image.png">
        <span class= "date  border-right"> 19 January 2016 </span> <br>
        <a class="topic-link no-border" href=""> Science & Environment </a>
    </p>
</div>

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

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

c#htmlcss

What is the best way to utilize images as borders for a div tag to create a unique and customized border appearance using images?

Hello, I am struggling to find a solution to a CSS problem. I have applied CSS styles to create border images for a div container, but the right image is not positioned correctly - it leaves space on the right side of the container when stretched out. An ...

jqueryhtmlcss

"Creating a stylish divider between words or sentences: A guide to using HTML and CSS for solid

I am curious about how to insert lines between words or sentences without using the common methods like border-bottom-line or js. Is it possible to achieve this effect using a simple span or div? I have attempted to do so myself, but I am open to learning ...

htmlcss

Using Jquery to dynamically change the font color depending on the value retrieved from the SQL query结果

I am trying to dynamically change the font color of a div using jQuery. The content inside the div is generated from an SQL query. Previously, I used the following jQuery code: $(document).ready(function(){ $('#foo').each(function(){ ...

phpjqueryhtmlcsssql

Hide additional tabs on the page when the width of the tabs exceeds the page width

I am currently working on a Google module tab application. I have successfully added the tab control with drag and drop functionality within a specific area. However, I now need to limit the number of tabs displayed on the page. Regardless of the total cou ...

jqueryhtmlcsstabs

I am struggling with creating a responsive webpage using HTML and CSS

click here for image description Is there a correct way to resolve this issue? When I view it responsively in Chrome at 1000 pixels, the photo overlaps the text. This is my HTML code: ` <div class="fans-inner"> <d ...

htmlcssbootstrap-4

Is it possible to amalgamate CSS declarations together?

You have the ability to combine CSS selectors by using a comma, like in this example: .one, .two { color: #F00; } <div class="one">One</div> <div class="two">Two</div> Using this method produces the same outcome as specifying ...

csssass

Spinning Circle with css hover effect

I have recently developed a simple website: Within this website, there is an interesting feature where a circle rotates above an image on hover. However, despite my best efforts, I couldn't make it work as intended. Here's the code snippet I use ...

htmlcss

Aligning content vertically in Bootstrap 4 so it is centered

I've been struggling to center my Container in the middle of the page using Bootstrap 4. I haven't had much luck so far. Any suggestions would be greatly appreciated. You can check out what I have so far on Codepen.io and experiment with it to s ...

csstwitter-bootstrapbootstrap-4flexbox

Tips for shifting my divs to the right

I've been working on a project where I need to create a list of divs that slide. Each slide contains its own unique image and description, but despite researching different methods for sliding, I still haven't been able to successfully implement ...

jqueryhtmlcss

The HTML and CSS code I wrote functions perfectly on Codepen, but for some reason, it appears different when I view it in my Chrome environment

My codepen displays perfectly, but when I run the same code on my local environment it looks off. I can't seem to figure out what is causing the difference, especially since I copied and pasted the exact code. Both the codepen and my environment are u ...

htmlcssangularjscross-browser

wrap text image not compatible with responsive layout

Plunker Link: https://plnkr.co/edit/kC9SPK2e7iy5OYhKpwOO?p=preview <html> <head> <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> ...

htmlcssbootstrap-4

Show the appropriate tooltip message based on the circle that I hover over

I have a collection of 5 clickable circles, each with a unique ID and its own tooltip text that is sourced from an xml Data Interface. jQuery(function ($) { $.ajax({ type: "GET", url: 'steel_agg_bof_flash_en.xml', ...

javascriptjqueryhtmlcss

Why is my <a> element not functioning properly?

I'm encountering a small issue with my first HTML website. The hyperlinks in the "about me" section are not clickable, yet those in the drop down menu are functioning properly. Any thoughts on why this might be happening? If you'd like to take a ...

htmlcss

When enlarging or extending the container, text starts to spill out

My issue is that the text content is overflowing the designated box or container - any ideas on how to fix this problem? I have attempted to utilize max-width and max-height, but unfortunately, I am unable to get them to function as intended. Here's ...

htmlcss

Align text to the left of a button with Bootstrap 4

Currently, I have two buttons stacked on top of each other. I'm attempting to include some text to the left of the bottom button, but I am encountering two obstacles: The first issue is that it creates a white round-ish shape around my top button w ...

cssbootstrap-4

Developing a universal.css and universal.js file for a custom WordPress theme

I have developed a custom WordPress theme with an extensive amount of code. To manage the numerous style and script files, I have segmented them into multiple individual files. To integrate all these files into my template, I utilized the following code w ...

javascriptjquerycsswordpress

Modifying CSS to ensure compatibility with various browsers

I am curious if it is possible to modify some CSS when viewed in a different browser. For instance, I have this CSS for a flexbox div: .wdFlex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit- ...

htmlcssbrowserinternet-explorer-9flexbox

Concealing and revealing an image with the onMouseOver and onMouseOut events - image quickly reemerges

After writing the following jQuery script, I encountered an issue. <script type="text/javascript"> $(document).ready(function(){ $('#Oval-1').on('mouseover', function(e) { $("#Oval-1").fadeOut ...

javascriptjqueryhtmlcsssvg

Switching downlink to top link when scrolling downwards

I have a downward scrolling link on my homepage that moves the page down when clicked by the user. However, I am struggling to make it change to a "back to top" link as soon as the user scrolls 10 pixels from the top. Additionally, I am having trouble with ...

javascriptjqueryhtmlcssscroll