Position elements inside of a div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

Position elements inside of a div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetu</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>
.user {<!--from www.  j a v a 2s.  c  om-->
   border:2px solid Chartreuse;
   display:inline-block;
   padding:0.6rem;
}

.user .avatar,
.user .info {
   display:inline-block;
   vertical-align:middle;
   border:2px solid yellow;
}

.user .avatar {
   max-width:51px;
   border-radius:51%;
   overflow:hidden;
}

.user .avatar img {
   display:block;
   width:100%;
   height:auto;
}

.user .info .name,
.user .info .date,
.user .info .time {
   display:inline-block;
   vertical-align:middle;
   border:2px solid blue;
}

.flex-user {
   border:2px solid pink;
   padding:0.6rem;
   display:flex;
   flex-direction:row;
   align-items:center;
}

.flex-user .avatar,
.flex-user .info {
   border:2px solid OrangeRed;
}

.flex-user .avatar {
   max-width:51px;
   border-radius:51%;
   overflow:hidden;
   margin-right:0.6rem;
}

.flex-user .avatar img {
   display:block;
   width:100%;
   height:auto;
}

.flex-user .info {
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
}

.flex-user .info .name,
.flex-user .info .date,
.flex-user .info .time {
   border:2px solid grey;
}

.flex-user .info .message {
   flex-basis:100%;
}

body {
   padding:2rem;
}

article {
   margin-bottom:2rem;
}
</style> 
 </head> 
 <body translate="no"> 
  <article class="user"> 
   <figure class="avatar"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt=""> 
   </figure> 
   <div class="info"> 
    <div class="name">
      Lorem ipsum do 
    </div> 
    <div class="date">
      Lorem ipsum 
    </div> 
    <div class="time">
      Lorem ipsum 
    </div> 
    <div class="message">
      Lorem ipsum dolor sit a 
    </div> 
   </div> 
  </article> 
  <article class="flex-user"> 
   <figure class="avatar"> 
    <img src="https://www.java2s.com/style/demo/Opera.png" alt=""> 
   </figure> 
   <div class="info"> 
    <div class="name">
      Lorem ipsu 
    </div> 
    <div class="date">
      Lorem ipsum 
    </div> 
    <div class="time">
      Lorem ipsum 
    </div> 
    <div class="message">
      Lorem ipsum dolor sit a 
    </div> 
   </div> 
  </article>  
 </body>
</html>

Related Tutorials