What steps do I need to take in order to accomplish this specific CSS

Hey there, I have a question that may seem silly, but I am struggling to find a solution on my own. Unfortunately, my CSS skills are not the best :(

I'm trying to achieve the following layout where the text should wrap at the end of the container (div, span, or whatever it might be).

 ---- --------------------------
|URL:|thissdfsisalongurasdsdfrea|
 ----|allyyyyyyyyyyylonggggggggg|  
     |sdddfasdfsdfasdfsadfsdfsds|
     |--------------------------|

Answer №1

http://example.com/abcd123

There are several helpful suggestions provided in the responses, but I believe this one covers everything you're looking for.

Answer №2

Here is the breakdown:

<div class="wrapper">
   <div class="link">
     Link:
   </div>
   <div class="description">
   Lorem Ipsum dolor
   Lorem Ipsum dolor
   Lorem Ipsum dolor
   Lorem Ipsum dolor
   </div>
   <div class="clearfix"></div>
</div>

The Styling:

.link {
  float:left;
  width:60px;
}
.description {
  float:left;
  width:200px;
}
.clearfix {
   clear:both;
}

Answer №4

According to this article, the media object simplifies styling by using float: left; on the first element and overflow-hidden on the second.

Answer №5

Greetings, I have created something similar to this.

Styling with CSS

.url {
    float: left;
    width: 75px;
    background:pink;
}

.description{
    float: left;
    width: 175px;
    word-wrap: break-word;
    text-align:justify;
    background:lightgreen;
}​

HTML Structure

<div class="url">URL:</div>

<div class="description">this example has a really long string that needs wrapping for proper display</div>​

Check out the live demo here or visit http://jsfiddle.net/rohitazad/tmqCR/25/

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

CSS - image does not adhere to max-height when placed in a fluid container - link to jsFiddle

For instance: http://jsfiddle.net/vjqjv/7/ I am facing an issue with an image inside a container (refer to #slider-section in the jsFiddle) that has a fluid height and a set max-height. I have defined max-height and max-width for my image as 100% (check ...

How can I use jQuery to transform a div with its elements into a canvas?

Looking for a way to convert a HTML Div and its elements to canvas, and then the canvas to an image using Jquery. I've checked out a website that only converts the whole HTML page, but I need a solution for converting specific Div elements. Any help w ...

Dropdown menu featuring a customizable input field

Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

An issue arises in CSS when the styling is not correctly implemented on the HTML elements

I am currently trying to recreate this code on my own page: https://codepen.io/Vlad3356/pen/PoReJVg Here is the code I have written so far: https://codepen.io/Vlad3356/pen/GRxdMPz I'm puzzled as to why, when I click on a star in my version of the co ...

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling. Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width? https://i.stack.imgur.com/HSKHH.png div { ba ...

What is the best way to choose an HTML element based on the attributes of its child nodes in CSS?

Take this scenario for instance: <tr> <td align="center">123</td> <td class="someclass">abc</td> </tr> My goal is to target all <tr> elements that contain a <td> with the class attribute set to someclass. ...

Trouble with the display:none attribute in Firefox and Chrome

<tr style="height:5px" id="TRRSHeaderTrialBar" name="TRRSHeaderTrialBar" style='display:none'> <tr id="TREmail" name="TREmail" style="height:1px;" nowrap style='display:none'> Using the code snippet above to hide the bar w ...

What is the best way to create a strip within an oval using CSS to achieve a partially filled vertical vessel effect?

I need to create an oval shape with a strip inside to represent the level of liquid volume. Here is my initial attempt: <style scoped> .strip:before { position: absolute; background: #343434; border-bottom: 2px solid black; content: ""; ...

Upon returning to the website homepage from another page, the JavaScript animation ceases

I implemented a unique typewriter animation on my homepage by utilizing code from this source and making minor HTML edits to customize the content. https://codepen.io/hi-im-si/pen/DHoup. <h5> <body>Hello! I am Jane.</body> < ...

Assessing the value of a variable or expression embedded within a string in Sass

Creating a mixin to set a div to transparent requires special attention to evaluate a variable in a string. The -ms-filter line must be quoted and should include the result of a calculation ($amount * 100). How can I successfully incorporate this into my ...

Tips for aligning a flex element child vertically

I am trying to achieve a layout where there are 3 divs vertically centered in one flex container with flex-direction:column. However, I need the 3rd div to be positioned at the bottom of the container. To better illustrate what I am looking for, you can v ...

Determine if an HTML element contains a specific class using JavaScript

Is there a simple method to determine if an HTML element possesses a particular class? For instance: var item = document.getElementById('something'); if (item.classList.contains('car')) Remember, an element can have more than one clas ...

Easy Registration Page using HTML, CSS, and JavaScript

In the process of creating a basic login form using HTML and CSS, I'm incorporating Javascript to handle empty field validations. To view my current progress, you can find my code on jsfiddle My goal is to implement validation for empty text fields ...

Getting the URL of a CSS background image in NodeJS and Express: A step-by-step guide

I've recently learned that using getComputedStyle in a Node environment is not possible due to it being a browser-specific behavior. Despite this, I am still interested in retrieving all background image URLs within Node and downloading them as shown ...

transforming a div container into an inline element using CSS

Hey there! I'm facing an issue with CSS where I am trying to change a div tag into inline. <div id="menu1"> <ul> <a href="#"> <li> one</li> </a> <a href="#"> <li> two</li> </a> <a h ...

Alter the appearance of the mouse cursor when hovering over input fields in HTML

I am working with a variety of HTML elements that can be moved via Drag'n'Drop. In order to indicate to the user where these elements can be dropped, I change the cursor's appearance using CSS classes applied through JavaScript. This method ...

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

How to change the image source using jQuery when hovering over a div and set its class to active?

I am working with a div structure that looks like this: <div class="row margin-bottom-20"> <div class="col-md-3 service-box-v1" id="div1"> <div><a href="#"><img src="path" id="img1" /></a></div> ...

"Any tips on maintaining the blue color of my dropdown link when it is selected as active

I'm struggling to keep the bootstrap accordion dropdown link blue when it's active. I've tried different methods but none seem to work. What am I missing? Here's my code: <div class="visible-sm visible-xs" id="accordion" role="t ...