How can I create two vertically-aligned left-floated divs?

Hey, I have a user info section with the user pic, user name, and user bio. I want the user pic on the left side and the name & bio on the right side.

Here is the HTML code:

<div class="user-info">
<div class="user-pic">
    <img src="" class="u-pic"/>
</div> 
<div class="user-name">Jon Doe</div>   
<div class="user-bio">I am an English teacher</div></div>

Link to view demo

After making these changes, all the divs have the same height. However, I would like the name div to be at the top and the bio div to be at the bottom of the name div.

Thank you!

csscss-float

Answer №1

Update styling for user-name class

.user-info {
  width: 500px;
  height: 100px;
  border: 1px solid #DFDFDF;
  box-shadow: 0px 1px 1px #aaa;    
    padding:15px
}
.user-pic {
  float: left;
  width: 80px;
  height: 80px;
  border: 1px solid #DFDFDF;
    margin-right:15px;
    background:blue;
}
.user-name {
  font-size: 19px;
  color: #333;
    margin-right:15px;
}

.user-bio{
  float: left;
  font-size: 19px;
  color: #333;
}

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

Tips for keeping my background image from shrinking when I resize the window?

When I resize the webpage window, my background image shrinks in size. Currently, it is not repeating (which is a step forward), but now I need it to cover the entire screen to avoid showing white space around the background when the window gets smaller. ...

htmlcss

The li::before pseudo element isn't working properly

I am having issues with my UL list where the CSS class I applied is not affecting the li::before pseudo class. Here's the HTML: <ul class="my-ul"> <li>Item 1</li> <li>Item 2</li> </ul> This is the CSS I a ...

htmlcsspseudo-element

"Utilizing nested div tags for precise positioning within a parent div tag

For days, I have been attempting to align 4 div tags (accommodation site widgets) within another div tag so that they are displayed in a single horizontal line side by side. Despite using CSS properties such as "float" and "display", only 2 out of the 4 di ...

htmlcsscss-float

What is the method for designing a CSS rule that solely activates when the body/html direction is set to "rtl"?

Our website is available in English at https://www.example.com. We have recently started using the GTranslate service to generate an Arabic version of the site at https://www.example.com/ar/. Upon reviewing the Arabic version, we noticed that GTranslate a ...

htmlcssright-to-left

What is the best way to create a function that automatically resumes audio playback 3 seconds after the pause button is clicked?

I am looking to develop a basic webpage with an autoplay audio feature. The page would include a "pause" and "play" button. I aim to implement a function where clicking the "pause" button would stop the audio, but after 3 seconds, it would automatically re ...

javascriptjqueryhtmlcss

Issue with Carousel Slide in BootStrap 5.0 beta 1: Unable to function properly

Why won't my carousel slide properly? It just switches to the next item without any sliding transition. I've read through Bootstrap 5 documentation, but it doesn't work there either. Has the slide transition feature been removed? HTML: < ...

htmlcssbootstrap-5

When using Italics, the conflict arises between the specified line-height and the actual height of the

Recently, I encountered an issue that has me a bit perplexed: I have a span element with line-height set to 18px and font-size at 16px. Everything works perfectly when the text inside is regular; the height of the span remains at 18 pixels. The problem a ...

firefoxhtmlcssitalics

If the option is not chosen, remove the requirement for it

I am in the process of creating a form that offers 3 different payment options: 1 - Direct Deposit 2 - Credit Card 3 - Cash at Office The issue I am facing is with the validation of input fields for Credit Cards. I want to make it so that these field ...

javascriptjqueryhtmlcssforms

What is the best way to determine the size of the URLs for images stored in an array using JavaScript?

I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...

javascripthtmlcssarrays

The HTML image link is adorned with a tiny blue checkmark underneath

My a tag with an image inside seems to be extending below the image, resulting in a small blue tic mark on the bottom right side. I've attempted different CSS solutions such as setting border to none, but nothing has resolved the issue. Any assistance ...

htmlcss

By setting the overflow-x property to hidden on my container, I have inadvertently disabled the sticky positioning

How can I make an element sticky when scrolling and hide horizontal scroll on mobile? I'm having trouble with horizontal scrolling on iPhone. Can you help me troubleshoot this issue? Thank you. .sticky-sidebar { position: -webkit-sticky; posit ...

htmlcssbootstrap-5

What is the best way to emphasize a column starting from the top and going down to the nth row

I'm working on a task to highlight columns and rows in a table from the top to the selected cell and from the left to the selected cell. Currently, I have achieved highlighting both the whole column and row. Here is an image of the desired outcome: ...

javascriptjquerycss

showing information on webpage 2 received via query parameters from webpage 1

Hello, I am trying to input text into a textarea and then send the data through a query string to another webpage. My goal is to display the data on the second webpage. I have written the following code, but it doesn't seem to be working. I've ch ...

javascripthtmljquerycssquery-string

"Troubleshooting: Why is my Bootstrap modal window only printing a

I've encountered an issue with printing the content of a Bootstrap modal window. Previously, the code I had was working fine but now it seems to be malfunctioning. Content is dynamically added to the form using appendChild() in a separate function. Ho ...

javascriptjqueryhtmlcssbootstrap-4

Menu remains open even after clicking the nav button again

I've been searching extensively, but haven't found a straightforward solution to the issue. When I click the button, it opens but doesn't close again. Any suggestions on what might be missing? Thanks in advance. <nav class="navbar navbar ...

htmlcssbootstrap-4

What could be causing the images to not be found on my web server?

Recently, I've encountered an odd issue with my website. For some reason, the images in my folders are not displaying when I try to access them. Despite trying various solutions, I am still unable to figure out the problem. In addition to this, my CS ...

phphtmlcssimage

"Can you explain the method by which reveal.js adjusts the size of

I have been exploring the resizing behavior of elements in reveal.js and trying to understand how they dynamically adjust. If you resize the page height, you can observe that the elements shrink up to a certain extent along with the page. However, when in ...

javascripthtmlcssreveal.js

Position Ionicons center above h3 header in Bootstrap

My icons keep aligning to the left: <section class="section-what-i-do"> <div class="container"> <h2>What I do</h2> <p class="sub-header" id="learn-more-section">Studying, creating, learning</p> < ...

htmlcsstwitter-bootstrap

JavaScript is causing a complete failure of CSS position transition functionality

Here are the tasks I want to accomplish: Show a div element; Move it to an initial position; Set transition properties; Move it to the target position using CSS transition. Below is a minimal example: function modifyElement() { /* var obj = ...

javascriptcsstransition

I am experiencing an issue with the Search Filter where it is not successfully removing

My goal is to filter colors when a user searches for a color code. Currently, the search function displays the correct number of filtered items, but the color bubbles are not being removed as intended. I am working on removing the bubbles when a search is ...

javascripthtmljquerycss