CODEWITHSUNDEEP
htmlcss
Yemiez
Yemiez

Reputation: 458

Have elements next to each other

I've been looking around, and haven't found a way to get my elements to display the way I want them too (Mostly because I've absolutey no idea what I'm doing in CSS).

Here's my JS fiddle: https://jsfiddle.net/q0qjhk8p/2/

And here's an ASCII demonstation on how I wish for it to be displayed:

Title goes here
----------------------------------------------------------------------------
Content put here should be on                            [      image            
the left side, yet not affect the                               goes
avatar on the right.                                            here       ]
                                                            And this 
                                                            text should 
                                                            be centered 
                                                            underneath the 
                                                            image.
---------------------------------------------------------------------------
Blablablablaba footer

Upvotes: 0

Views: 1195

Answers (3)

Josh Pittman
Josh Pittman

Reputation: 7324

The simplest way to do this is to wrap the main content in a div. Then wrap that and the div with the image and subtext in another div. I have wrapped them in main tag below, just so that stands out, but you can use a div if you're not familiar with semantic tags just yet.

https://jsfiddle.net/g90xxaaj/

Then I gave the main tag a css property of display: flex this makes the divs inside it sit side by side.

Then I added have the div encasing the image and subtext a `text-align: center' property.

You don't have to use flexbox for this but it is an excellent way to deal with things like this is css. The other way you could do it is to look into something called floats. Joshua Duxbury's answer explains how to do this. One reason not to use flexbox is that it is relatively new and won't work on internet explorer 9 or older. If that is not a concern then flexbox is much less confusing than working with floats in the long run.

This is probably the best starting point for learning more about flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ This is a great game to play for practice: http://flexboxfroggy.com/ And here is a fantastic free course if you have the time and are serious: https://flexbox.io/

Upvotes: 2

gargantuan
gargantuan

Reputation: 8946

So here's a solution using FlexBox

The things to note are...

  1. I removed all your text-align stuff. That's the wrong property to use to get the layout you're looking for.

  2. I made the Avatar container a percentage width, and set the width of the image inside to 100%. That way you have a somewhat responsive solution. You could set an explicit width of the avatar container if you wanted.

  3. You can set an explicit width for the copy too, if you wanted. I'd suggest setting a percentage width and a right margin.

The heavy lifting is done with flexbox,

.user-profile-card > .user-profile-card-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    background: #AAA;
}

Upvotes: 2

Joshua Duxbury
Joshua Duxbury

Reputation: 5260

I've added some extra divs and also used the following CSS

  1. float : left // float to content to the left side
  2. float : right // float the avatar to the right side of the card.
  3. display : inline-box // this is to make the image stay on the same line as the content

see fiddle below

https://jsfiddle.net/n4k469o3/

CSS

    .user-profile-card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 10px;
    border: solid 1px transparent;
}
.content {
  width:100px;
  display: inline-block;
  float: left;

}
.user-profile-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2)
}
.user-profile-card > .user-profile-card-title {
    padding-bottom: 10px;
    border-bottom: solid 1px #ccc;
    text-align: left;
    font-size: 24px;
}

.user-profile-card > .user-profile-card-body {
    padding: 10px;
    text-align: left;
}

.user-profile-card > .user-profile-card-body > .user-profile-card-avatar {
    align-content: right;
    text-align: right;
    display: inline-block;
    width: 110px;
    float: right;
}

.img-card-avatar {
    border-radius: 50px;
}

.user-profile-card > .user-profile-card-foot {
    padding-bottom: 5px;
    padding-top: 10px;
    border-top: solid 1px #ccc;
    text-align: left;
    font-size: 10px;
    margin-top:240px;
}

HTML

<div class="user-profile-card">
  <div class="user-profile-card-title">
    A title is put here
  </div>
  <div class="user-profile-card-body">
  <div class="content">
    Content put here should be on the left side, yet not affect the avatar on the right.  
  </div>
    <div class="user-profile-card-avatar">
         <img src="https://i.sstatic.net/pH9qA.jpg"><br>
          And this text should be centered underneath the image.
    </div>
  </div>
  <div class="user-profile-card-foot">
    Some footer stuff is put here.
  </div>
</div>

Upvotes: 2

Related Questions