Difficulty In Designing Business Card Using Css

I am trying to make a business card with name and title in the center and email and phone to be on extreme left and right on the card Here is my following code I am trying to g

Solution 1:

.card {
  border: 1px solid lightgray;
}
.title {
  display: flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
  text-align: center;
  word-break: break-all;
}
.title > div {
  width: 50%;
}
.info {
  display: flex;
  padding: 2em;
}
.info > div {
  flex: 1;
}
.info > div:nth-child(2) {
  text-align: right;
}

<divclass="card"><divclass="title"><div>Name: eDesignary</div><div>Title: Source code platform!</div></div><divclass="info"><div>Hyderabad</div><div>edesignary@gmail.com</div></div></div>

Please let me know if your problem is solved.

Solution 2:

Get a codepen.io account > search "business card" and then create something similar based off another person's pen. You can learn this way about other methods you wouldn't normally know about.

As for this, I'd probably make a DIV of something like 500px

The picture would take 50% of the div's heigh Then format your text accordingly

Solution 3:

When we type names, we put spaces between first, middle and last names. Assuming that none of these is very long, we can make your code work simply by swapping 'align-items' with 'text-align'.

HTML:

<divclass="business-card"><section><span>
          name:abcsfs dfjsd     flkjsdj flssfsdfds
    </span><span>
        title:xyz xyz xyz xyz xy xyz xyz xyz xyz
    </span></section><footer><spanclass="phone">
       123-123-123
   </span><spanclass="email">
       abc@abc.com
   </span></footer></div>

CSS:

.business-card {
  position: relative;
  border: 1px solid black;
  width: 200px;
}

.business-cardsection {
  display: flex;
  flex-flow: column;
  text-align: center;
}

.email {
  position: absolute;
  right: 0;
}

Please let me know if this solves your problem.

Solution 4:

Check Below snippet... let me know

.business-card{
   position:relative;
   border:1px solid black;
  width:800px;
  height: 400px;
}
.business-cardsection {
  display:flex; 
  flex-flow:column;
  align-items:center;
}
.email{
  position:absolute;
  right:0;
}

#textboxp{
  display: inline-block;
  width:31%!important;
  vertical-align:top;
  text-align:left;
  padding:0px5px;
}

<divclass="business-card"><section><span><imgstyle="height: 200px; width: 400px; align-items:center;"src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png"/></span></section><divid="textbox"><p>Text on the left.Text on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the left</p><p>Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.</p><p>Text on the right.</p></div><br><br><divstyle="clear: both;"></div><!-- Fixes float issues --></div>