How can I use the float property to align text and images? The text marked in red should be positioned next to the floating image, but for some reason I am having trouble getting it in the right place.
https://i.sstatic.net/gfuu6.png
This is my CSS for the images:
.floatinglleft{
margin-right: 16px; float: left;
}
.floatingright{
margin-left: 16px; float: right;
}
Thank you in advance!
Check out the code below:
.thumb {
float: left;
border: 1px solid black;
width: 150px;
text-align: center;
margin-right: 10px;
}
img{
max-width: 100%;
}
.desc{
float:none;
}<div class="thumb">
<img class="floatright" src="https://cdn-images-1.medium.com/max/2000/1*kOuvkQUrByiaqZYTZFJz4g.png" alt="foo"/>
<p>
Lorem ipsum dolor
</p>
</div>
<div class="desc">
<p>
Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.
Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.
Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.
Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.
Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.
Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.
</p>
</div>Check out this solution I put together that you may find useful:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8>
<title>
Custom Title
</title>
<style>
img {
width: 200px;
}
.image-float-left {
float: left;
margin: 0 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="image-float-left">
<img src="picture.jpg" alt="example image">
<div>Description below image</div>
</div>
<p>
Insert your content here...
</p>
</body>
</html>
I am looking to implement Tabs using Bootstrap 4 with bootstrap-native-v4 in an Angular 2 application. I have added bootstrap-native-v4 via the 'scripts' value in the angular.json file as "./node_modules/bootstrap.native/dist/bootstrap-native-v4. ...
I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...
I am experiencing an issue where the span elements in my button groups are not aligning properly. I am looking for a way to align these span elements within the button groups without using fixed widths. Creating a basic web modal with Bootstrap 5 <di ...
I'm currently in the process of developing a website and I have started utilizing the style tag at the beginning: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
It seems that different browsers are displaying my website differently. Chrome, Safari, and Opera show it without any issues, but Firefox removes the top section, including the menu, and replaces it with white space in the center. I'm not sure what&ap ...
My HTML table structure is quite simple: <style> .demo { width:100%; border:1px solid #C0C0C0; border-collapse:collapse; padding:5px; } .demo th { border:1px sol ...
I came across this HTML structure .table { display: table; } .row { display: table-row; } .cell { display: table-cell; text-align: center; padding: 5px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .sticky { positi ...
I'm currently working with Bootstrap 3 and I am attempting to replicate jQueryMobile's select option feature. This would involve replacing the standard select textbar and arrows with a single button that can toggle the opening of the select. Ins ...
I'm struggling with aligning my Navbar items (NavLink) horizontally in one line instead of being stuck on the right side and stacked on top of each other. Can someone help me fix this issue? Here's the code snippet: import React from "react& ...
How can I effectively utilize pseudo-classes while adhering to the principles of BEM methodology? I'm facing a specific challenge with creating a custom checkbox functionality. Normally, I would use the input:checked + label selector. However, when t ...
When creating a style called Link, the theme is contained inside of this.props. How can the theme be extracted from props and passed into the Link styled component? Error: ReferenceError - theme is not defined import React from 'react'; impo ...
Is there a way to select all paragraph elements that come after a specific heading? <h2 class = 'history'>History</h2> <p>this is paragraph 1</p> <p>this is paragraph 2</p> <p>this is paragraph 3</p&g ...
I'm having difficulty adjusting the column width in Bootstrap columns to my specific needs. Check out this link for more information: : https://i.sstatic.net/Tvdef.png What I'm trying to achieve is to keep the label column width fixed while all ...
I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...
In my quest to find a script that colors dates within two weeks from today in red and past dates in orange, I have tried various methods without success. I am struggling to implement this feature with my current knowledge. <TABLE> <TR><TD&g ...
Once again, tables have defeated me. I am struggling with a simple table: <table style="width: 200px; margin: 20px auto; border-collapse: collapse; border-spacing: 0; border: none;"> <tr style="margin: 0; padding: 0; border: none; border-colla ...
Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...
I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...
There are three dropdown lists, each enclosed in its own DIV container. The DIV containers are named fromCity, WithinStateLimits, and OutOfState. The goal is to use the jQuery script below to hide the other two DIVs when a user selects an option from the ...
I'm attempting to implement expandable Table Rows in a Table that can be activated by clicking on them individually. For instance, upon clicking on the designated area in the provided image below, a Segment or Container will reveal itself with embedd ...