Remove three text elements to the right of the small icon with no line breaks

I am trying to align three text items to the right of a smaller left-floated icon without causing the text items to wrap.

div {
    width:30%;
}
div i {
    margin-right:0.75em; 
    padding:0.5em;
    float:left;
    color:#fff;
    border-radius:50%;
    clear:both;
    background:rgb(255,143,69);
}
h3 {
    margin-bottom:0.75em;
}
p {
    margin-bottom:2.75em; 
    overflow:auto;
}
a {
    font-size:0.9em;
    color:#ff8f45; 
}

In my current implementation -

http://jsfiddle.net/zu3k814d/7/

-- I have used the clear property for the heading and paragraph alignment with the icon as well as overflow property but the link below remains misaligned. Is there a more elegant solution to make it line up perfectly with the content above?

htmlcss

Answer №1

All you had to do was rearrange your HTML structure in order to successfully float both elements.

Check out the updated code snippet here. --

Answer №2

Try using flex instead of float.

.container {
  display: flex;
  width: 30%;
}

.column {
  flex-direction: column;
}

i {
  margin-right: 0.75em;
  padding: 0.5em;
  color: #fff;
  border-radius: 50%;
  clear: both;
  background: rgb(255, 143, 69);
}

h3 {
  margin-top: 0;
  margin-bottom: 0.75em;
}

p {
  margin-bottom: 2.75em;
  overflow: auto;
}

a {
  font-size: 0.9em;
  color: #ff8f45;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container">
  <div>
    <i class="material-icons">fingerprint</i>
  </div>
  <div class="column">
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <a href="">Learn more...</a>
  </div>
</div>

Answer №3

After analyzing your question, it seems like you are looking to align the anchor tag with the icon to the right instead of below it on the left when the heading and paragraph are cleared.

To achieve this, you can add display:inline-block; in the CSS for the a element:

a {
    font-size: 0.9em;
    color: #ff8f45; 
    display: inline-block;
}

With this modification, your result will appear as desired when the link is displayed:

Here is the updated JSFiddle link.

EDIT: To position the anchor tag to the right, include the following attributes in the CSS for the a element:

a{
  font-size: 0.9em;
  color: #ff8f45; 
  white-space: nowrap;
  float: right;
}

I trust this information proves helpful. Thank you.

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 way to position a button at the bottom of an image?

I am facing an issue with the following code snippet: * { box-sizing: border-box; } .wrapper { position: relative; /* border:1px solid blue; */ width: 250px; } .text { position: absolute; border:1px solid red; bottom: 0px; ...

css

Attempting to sort through elements in JavaScript

I'm looking to filter specific films based on choices made in the dropdown menus below. <select id="filmDropdown"> <option value="0">All Films</option> <option value="1">Film 1</option> <option ...

javascripthtmlfor-loopif-statementdropdown

The concept of setting a value is not defined in JavaScript when compared to

Within my primary python script, the following code snippet is present. @app.route('/accounts/test/learn/medium') def medium(): word = random.choice(os.listdir("characters/")) return render_template('accounts/test/medium.html', word=w ...

javascriptpythonhtmlflask

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

The output is: [object of type HTMLSpanElement]

<form> <table> <tr> <td>Distance:</td> <td><input type="number" id="distance" onKeyUp="calculate();">m</td> </tr> <tr> <td>Time:</td> ...

javascripthtml

Decoding JavaScript content with Python

Currently, I am dissecting this specific portion of HTML <script type="text/javascript"> var spConfig = new Product.Config({"attributes":{"150":{"id":"150","code":"size_shoe","label":"Schuhgr\u00f6\u00dfe","options":[{"id":"494","label ...

javascriptpythonhtmlparsingbeautifulsoup

Using CSS to Put Text in the Back of Other Text

After being inspired by the structure of view-source:, I attempted to layer one instance of text behind another using z-index. However, my initial attempt failed as it became clear that utilizing z-index required the position attribute to work effectively. ...

csspositionz-index

Take charge of Bootstrap 4 dropdown transformation class while creating a Megamenu

I am currently working on creating a Megamenu using Bootstrap 4's dropdown Component. The issue I'm facing is related to Javascript adding CSS styles with transform, such as transform: translate3d(9px, 5px, 0px); This is causing disruption in m ...

jqueryhtmlcssbootstrap-4megamenu

Role in HTML/CSS

I'm currently facing an issue with getting my footer to stick to the bottom of the page. In Internet Explorer, it appears centered under the rest of the content instead of at the very bottom. When I try to view it in Chrome, it ends up positioned next ...

htmlcssbrowserpositioning

Tips on aligning carousel images and captions next to each other

Would anyone be able to assist me in creating a carousel similar to this? I haven't been able to locate any examples or tutorials that match the design of my desired carousel. Here is the design I am referring to ...

htmlcsscarousel

Struggling to position a div below another div within a flex box layout

When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continued to align to the left of the oth ...

htmlcssangularflexbox

Animating a dotted border path in SVG for a progress bar effect

I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have doe ...

javascriptjquerycssanimationsvg

Alert popup onclick feature is malfunctioning

SOLVED: I finally figured out the issue and it is now working perfectly. I had to manually switch to Chrome instead of using the Brackets live viewer. I want an alert box to pop up when the "Home" link is clicked on my website. I tried creating a separate ...

javascripthtmlcss

Deconstructing JavaScript scripts to incorporate HTML5/CSS3 functionality for outdated browsers such as Internet Explorer

I have been researching various resources and guides related to different scripting libraries, but none of them seem to address all the inquiries I have regarding performance and functionality. With so many scripts available, it can be overwhelming to dete ...

javascripthtmlcsscompatibility

The Cascading of Bootstrap Card Designs

Looking for some assistance with my TV Show Searcher project that is based on an API. The functionality is complete, but I'm struggling to get the Bootstrap cards to stack neatly without any empty space between them. I want it to resemble the image ga ...

javascripthtmlcssapibootstrap-4

Code written in Javascript runs before any CSS files are downloaded and processed

While researching async scripting in web applications, I stumbled upon an interesting article. Essentially, it suggests that JavaScript scripts are not executed until all stylesheet CSS files are downloaded and parsed. Intrigued by this concept, I decided ...

cssasynchronouspreloadlighthouse

What is the best way to showcase two data frames side by side in an HTML template or webpage without using frames?

Is there a way to showcase two data frames side by side in an html template? <h3> TITLE </h3> {{stat1 | safe}}. {{stat | safe}} I attempted the above solution, but unfortunately it only displays the data frames vertically stacked instead of ...

pythonhtmlpython-3.xflaskjinja2

v-for loop to populate dropdown menu with identical values

Recently, I started working on a points counter app using Vue.js and encountered some issues with the v-for loop and dropdown menu functionality. Within my Vue.js application, I have an array of players as shown below: var app = new Vue({ el: '#l ...

javascripthtmlvue.js

What is the most effective way to implement a CSS stylesheet on a particular individual element?

Just starting out in web development and I recently experimented with a CSS stylesheet on a basic HTML element. It worked great when I targeted the element by name like this: label { color: green; } However, I wondered if there was a way to apply sty ...

htmlcss

Enhance CSS delivery for the items listed below

Reduce the delay caused by rendering JavaScript and CSS above-the-fold. There are 16 CSS resources currently blocking the rendering of your page. This delay could be affecting the loading time of your content. To improve this issue, consider deferring or ...

javascriptphpjqueryhtmlcss