What is the best way to level out the content in the article using CSS and HTML?

Can anyone help me with CSS and HTML? I have a travel blog and I want to include a related post section similar to Time.com in my articles, but I'm facing an issue.

What do I need to achieve this?

I want to create a section that looks like the related post section on Time.com. Here's a screenshot for reference: Time.com.

The problem I'm facing is with the text not aligning properly with the content. Here's a screenshot for reference: The text can't flatten the content.

Any suggestions on how I can style my text/articles similar to Time.com?

Here is my HTML code:

    <div class="resources">
      <h4>Other facts</h4>
        <ul>
          <li>United Arab Emirates Facts</li>
          <li>Venice Facts</li>
          <li>Great Wall of China Facts</li>
          <li>Dead Sea Facts</li>
          <li>Grand Canyon Facts</li>
        </ul>
    </div>

And here is my CSS:

.resources }
    width: 30%;
    float: left;
}
htmlcsswordpress

Answer №1

To achieve the desired effect, simply apply the float property to the image. This will ensure that the text wraps neatly around the image, providing the desired outcome for your design.

Answer №2

the function applies to <p> elements in this manner:

.resources > ul {
   width: 30%;
   float: left;
   margin-left: -30px;
}
.resources p {
   margin-top: -30px;
}
.resources h4 {
   margin-bottom: -5px;`
}
    <h2 style="text-align: center;">30 Fun and Interesting Facts about Germany</h2>
<div class="resources">
<h4>Other facts</h4>
<ul>
 <li>United Arab Emirates Facts</li>
 <li>Venice Facts</li>
 <li>Great Wall of China Facts</li>
 <li>Dead Sea Facts</li>
 <li>Grand Canyon Facts</li>
</ul>
<p><strong>Interesting Facts about Germany</strong> - Interested in spending some time in Germany during for your vacation? Well, it’s a good idea for you to know about some facts about Germany as mentioned below.</p>
<p>Those facts can be helpful for you to understand this country better and thus, you can enjoy your vacation more. So, here they are 30 interesting and fun facts about Germany.</p>

</div>
<ol>
 <li><p><strong>The Second Beer Consumer in the Europe</strong> - With the love of drinking beer, (to be honest, Germany is known as the Europe’s second beer consumer), it’s legal to drink anywhere you want. The laws regarding boozing are always loose. It’s even possible for teenagers to buy and drink alcohol freely by the age of 14! The first beer consumer in the EU is Ireland. What cool facts about Germany.</p></li>
 <li><p><strong>College Education Is Free for Everyone!</strong> - Good news for you who want to go to Germany to college and studies in Germany. It’s among the facts about Germany that college education is free even for non-Germans. The government thinks that it’s entirely unjust to ask for tuitions from the students of higher education. So, do you have more urge to get a scholarship there and studies in Germany?</p></li>

However, if the content includes the <ol> and <li> elements, the function will not be activated.

What if I were to utilize the HTML structure in this way?

    <p><strong>Interesting Facts about Germany</strong> - Interested in spending some time in Germany during for your vacation? Well, it’s a good idea for you to know about some facts about Germany as mentioned below.</p>
<p>Those facts can be helpful for you to understand this country better and thus, you can enjoy your vacation more. So, here they are 30 interesting and fun facts about Germany.</p>
    
<div class="resources">
    <h4>Other facts</h4>
    <ul>
     <li>United Arab Emirates Facts</li>
     <li>Venice Facts</li>
     <li>Great Wall of China Facts</li>
     <li>Dead Sea Facts</li>
     <li>Grand Canyon Facts</li>
    </ul>
    </div>
<ol>
 <li><p><strong>The Second Beer Consumer in the Europe</strong> - With the love of drinking beer, (to be honest, Germany is known as the Europe’s second beer consumer), it’s legal to drink anywhere you want. The laws regarding boozing are always loose. It’s even possible for teenagers to buy and drink alcohol freely by the age of 14! The first beer consumer in the EU is Ireland. What cool facts about Germany.</p></li>
 <li><p><strong>College Education Is Free for Everyone!</strong> - Good news for you who want to go to Germany to college and studies in Germany. It’s among the facts about Germany that college education is free even for non-Germans. The government thinks that it’s entirely unjust to ask for tuitions from the students of higher education. So, do you have more urge to get a scholarship there and studies in Germany?</p></li>

Answer №3

Have you attempted to apply the class .resources to the ul element?

<div class="resources">
<h4>Other facts</h4>
<ul class ="resources">
    <li>United Arab Emirates Facts</li>
    <li>Venice Facts</li>
    <li>Great Wall of China Facts</li>
    <li>Dead Sea Facts</li>
    <li>Grand Canyon Facts</li>
</ul>
</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

Vue calendar - The month display is condensed to only one row

Currently, I am incorporating bootstrap-datetimepicker for Vue (found at https://www.npmjs.com/package/vue-bootstrap-datetimepicker) via CDN. The date display looks good, however there is an issue with the month view size when selecting a month. https://i ...

cssdatetimevue.jsdatetimepickerbootstrap-datetimepicker

A PHP warning message has been triggered, indicating that the `strpos()` function expects the first parameter to be a string

WordPress Website Attention: AH01071: Error Encountered 'PHP message: PHP Warning: strpos() expects parameter 1 to be string, array given in /var/www/vhosts/mysite.com/httpdocs/wp-includes/functions.php on line 4102\nPHP message: PHP Warning: s ...

phparrayswordpress

Developing an interactive contact page using bootstrap technology

I am looking for a way to structure my contact page using Bootstrap. https://i.sstatic.net/e3TCu.png If you're interested, the code for this layout can be accessed here: https://codepen.io/MatteCrystal/pen/xxXpLmK <div class="container" ...

cssdynamicbootstrap-5

Maintaining the relative position of an SVG while scaling within a div element

I am in the process of incorporating my custom SVG knob icons into an electron application using flexbox. The challenge lies in keeping them centered within the rectangle icon regardless of browser size, as shown here. Ideally, the icons should adjust thei ...

htmlcsssvgelectronscaling

Tips on snapping pictures using an html5 camera without encountering security prompts

Is there a way to capture an image from a webpage without triggering security warnings? The webpage where I need webcam functionality cannot be switched to HTTPS protocol. I have already installed root certificates and made them trusted, but still no succ ...

htmlwebcamprivacy

Dim the brightness of an image on Internet Explorer

I discovered this code on another site and it functions flawlessly in Chrome and FF, however, IE (version 11.0.9) doesn't seem to like it. -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); fil ...

javascripthtmlcss

Flexslider optimized for mobile devices

I am currently using the Sparkling theme on a Wordpress website. This particular theme utilizes Flexslider within a div at the top of the page. Each slide featured in the slider includes an image, as well as a div containing a post title and excerpt. The ...

cssflexslider

The functionality to Toggle submenus within a navigation menu using jQuery is not performing as anticipated

I implemented a horizontal menu using CSS, HTML, and jQuery. Clicking on a menu item displays a sub-menu. The issue I'm facing is that when one submenu is open and I click on another menu item, the new submenu opens but doesn't hide the previous ...

htmljquerycss

Conceal the icon for the Dropdown Menu arrow

Is there a way to hide the old arrow icon in the Select (drop down) after changing it with a new one? HTML: <div class="row"> <div class="col-sm-12"> <select name="country" class="form-control SearchBar"> <option ...

jquerycsstwitter-bootstrap-3

Is there a way for me to retrieve the widths of all child elements within an HTML document?

I have been working on a JavaScript (jQuery) function to calculate the maximum width of all child and children's-child elements within a specific div element. Here is the code I have written so far: function setBodyMinWidth(name){ var max = 0; $(nam ...

javascriptjqueryhtmlcsswidth

The functionality of Google Maps code is limited on Android devices because the map feature is not available

After updating the Google Maps embed code to be responsive for mobile devices, I discovered that the map still won't display on Android or iPhone. The following is the modified code. Can anyone assist me in resolving this issue so that the map can sho ...

androidhtmlcssgoogle-mapsiframe

Counting the days: how to calculate without using negative numbers

After performing the calculation, the result shows -30. Is there a way to eliminate the negative sign and get 30 instead? $days = (strtotime(date("Y-m-d")) - strtotime($info['expiredate'])) / (60 * 60 * 24) echo abs($days); Any suggestions on ...

phphtmldate

What is a neat trick to conceal an image when we hover over it?

Within my project, I have a grid layout showcasing images of various items through ng-repeat. My goal is to have the images disappear upon hover, and be replaced by a new div of equal size containing all the sub-components of the item. However, instead o ...

htmlcssangularjs

Canvas with a button placed on top

I am working with a canvas and trying to position an HTML element over it using CSS. My goal is for the button to remain in place on the canvas even when resizing the entire page. Here is the code I am currently using. https://jsfiddle.net/z4fhrhLc/ #but ...

javascripthtmlcss

Is it possible to analyze an API call and determine the frequency of a specific field?

Code: var textArray = new Array(); var allText = results.data._contained.text; for (var i = 0; i < allText.length; i++) { var text1 = allText[i]; var textHtml = "<div id='text_item'>"; textHtml += "& ...

javascriptjqueryhtmlcount

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

javascriptcss

Executing a cross-site scripting (XSS) simulation within a MVC4 application on Visual Studio 201

Within my MVC 4 application, I am experimenting with simulating an XSS attack. The setup involves a button and a text box that simply outputs the entered value. However, when I input <script>alert('xss')</script> into the text box, an ...

c#javascripthtmlasp.net-mvc

What impact does reducing the window size have on my header?

While working on a website with a navigation bar, I encountered an issue where the navbar was not responsive. When the window size was reduced, the nav bar shifted to an awkward position vertically, as shown in the first image. The navbar shifts below the ...

htmlcssdom

Could the difficulty in clicking the first entry in Firefox be a bug?

Be sure to focus on the section highlighted in blue in the initial table. If you'd like, you can view the issue here view image http://example.com/static/error.gif UPDATE you can replicate it by double-clicking on the top portion of the first entry ...

htmlcssfirefoxcss-float

Displaying block in front of flex-items

I have been trying to figure out how to get the red box to display in front of the other flex items, but none of my attempts seem to work. .box { font-size: 2.5rem; width: 100px; line-height: 100px; text-align: center; } .front .box { margin: ...

htmlcss