CODEWITHSUNDEEP
htmlcss
kunal
kunal

Reputation: 151

Div tag in one single row

I am facing the trouble regarding to the css div tag.

This is my code which I am using.

    #title {
      float: left;
      background-color: #2e3539;
      color: white; 
    }
    
    .arrow-down {
      float: left;
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 0px solid transparent;
      border-bottom: 15px solid #2e3539;
    
    }
    
    .arrow-up {
      float: left;
      width: 0; 
      height: 0; 
      border-left: 0px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid #2e3539;
    
    }
 <DIV class=arrow-down></DIV>
    <DIV id=title>{Title}</DIV>
    <DIV class=arrow-up></DIV>

And this is the output

title bar

I am trying to make all this Div tag in one row so the Image should Like below:-

enter image description here

Guys please help , I am not understanding what I am doing wrong here.

guys, I tried some of the Suggestion but had the same issue so I add the full code here Please have a look.

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 11.00.9600.18427"></HEAD>
<BODY>
<H1>{First name} {Last name}</H1>
<DIV class=arrow-down></DIV>
<DIV id=title>{Title}</DIV>
<DIV class=arrow-up></DIV><BR>
<DIV id=phone>
<P style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><SPAN><BR>off:</SPAN> {mobile no} | <SPAN>mob:</SPAN> {office number}</P><BR></DIV>
<DIV id=address><SPAN>company</SPAN><BR> {address}
<BR>{country}<BR><BR></DIV>
<STYLE>
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');

body {
    font-size:12px;
    color: black;
    font-family: 'Lato', sans-serif;
}

h1 {
    color: #77bc1f;
    margin: auto;
    padding-left: 14px;
    font-size: 17px;
}

span {
    color: #77bc1f;
    font-weight: bold; 

}

#title {
  float: left;
  background-color: #2e3539;
  color: white; 
}
.arrow-down {
    float: left;
    width: 5px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 21px solid #2e3539;
}
.arrow-up {
  float: left;
  width: 5px; 
  height: 0; 
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  border-top: 21px solid #2e3539;
}
</STYLE>
</BODY>

Thank you in advance.

Upvotes: 0

Views: 1591

Answers (5)

mch
mch

Reputation: 1279

Make sure the line-height matches the border-top and border-bottom of the two triangles, so that the triangles are equally high as the #title element. If the three elements are not equally high, it will be impossible to align them correctly.

This solution uses ::before and ::after inside a inline-block element, instead of three consecutive float's.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>

<body>

<style type="text/css">
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');

body {
    font-size:12px;
    color: black;
    font-family: 'Lato', sans-serif;
}

h1 {
    color: #77bc1f;
    margin: auto;
    padding-left: 14px;
    font-size: 17px;
}

span {
    color: #77bc1f;
    font-weight: bold; 
}

#title {
    display:inline-block;
    color: white;
    position: relative;
    background: #2e3539;
    margin:0 21px;
    padding:0 3px;
    line-height:15px;
}

#title::before,
#title::after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    width:0;
    height:0;
}

#title::after {
    right:-21px;
    border-left: 21px solid #2e3539;
    border-right: 0px solid transparent;
    border-bottom: 15px solid transparent;
}

#title::before {
    left:-21px;
    border-left: 0px solid transparent;
    border-right: 21px solid #2e3539;
    border-top: 15px solid transparent;
}

#phone {
    font-size: 10pt;
    font-family: Arial, sans-serif;
}

</style>

<h1>{First name} {Last name}</h1>
<div id="title">{Title}</div>
<div id="phone">
    <span>off:</span> {mobile no} | <SPAN>mob:</SPAN> {office number}
</div>
<div id=address>
    <span>company</span><br>
    {address}<br>
    {country}<br><br>
</div>

</body>
</html>

Upvotes: 0

Ionut Necula
Ionut Necula

Reputation: 11480

Add an extra div that should contain the ribbon and use display: inline-block. I hope this is what you need:

UPDATE:

You also need to set the line-height on the #title the same as .arrow-down's border-bottom and .arrow-up's border-top width.

@import url('http://fonts.googleapis.com/css?family=Lato:400,700');
body {
    font-size:12px;
    color: black;
    font-family: 'Lato', sans-serif;
}

h1 {
    color: #77bc1f;
    margin: auto;
    padding-left: 14px;
    font-size: 17px;
}

span {
    color: #77bc1f;
    font-weight: bold; 

}

.container{
  font-size: 0;
}
#title {
  display: inline-block;
  vertical-align: top;
  background-color: #2e3539;
  color: white; 
  font-size: 12px;
  line-height: 15px;
}
.arrow-down {
    display: inline-block;
    vertical-align: top;
    width: 5px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 15px solid #2e3539;
}
.arrow-up {
  display: inline-block;
  vertical-align: top;
  width: 5px; 
  height: 0; 
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #2e3539;
}
<div class='container'>
  <div class='arrow-down'></div>
  <div id='title'>{Title}</div>
  <div class='arrow-up'></div>
</div>

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Adjust you border width, have a look at the snippet below (same code that you've posted):

<HTML><HEAD>
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 11.00.9600.18427"></HEAD>
<BODY>
<H1>{First name} {Last name}</H1>
<DIV class=arrow-down></DIV>
<DIV id=title>{Title}</DIV>
<DIV class=arrow-up></DIV><BR>
<DIV id=phone>
<P style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><SPAN><BR>off:</SPAN> {mobile no} | <SPAN>mob:</SPAN> {office number}</P><BR></DIV>
<DIV id=address><SPAN>company</SPAN><BR> {address}
<BR>{country}<BR><BR></DIV>
<STYLE>
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');

body {
    font-size:12px;
    color: black;
    font-family: 'Lato', sans-serif;
}

h1 {
    color: #77bc1f;
    margin: auto;
    padding-left: 14px;
    font-size: 17px;
}

span {
    color: #77bc1f;
    font-weight: bold; 

}

#title {
  float: left;
  background-color: #2e3539;
  color: white; 
}
.arrow-down {
    float: left;
    width: 5px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 15px solid #2e3539;
}
.arrow-up {
  float: left;
  width: 5px; 
  height: 0; 
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #2e3539;
}
</STYLE>
</BODY></HTML>

Hope this helps!

Upvotes: 0

Dr. Roggia
Dr. Roggia

Reputation: 1125

just change the border of both arrow, from 21px to 18px, this sould do the trick

    #title {
      float: left;
      background-color: #2e3539;
      color: white; 
    }

    .arrow-down {
        float: left;
        width: 5px;
        border-left: 15px solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 18px solid #2e3539;
    }

    .arrow-up {
      float: left;
      width: 5px; 
      border-left: 0px solid transparent;
      border-right: 15px solid transparent;
      border-top: 18px solid #2e3539;
    }
    <div class=arrow-down></div>
    <div id=title>{Title}</div>
    <div class=arrow-up></div><BR>

Upvotes: 0

user6269864
user6269864

Reputation:

Just avoid using float: left and use display: inline-block instead:

.arrow-down {
  display: inline-block; //added this line
  float: left;
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 15px solid #2e3539;

}

#title {
  /*float: left;*/ //remove
   display: inline-block;
  background-color: #2e3539;
  color: white; 
}

The other solution with float: left posted by someone else here will also work, but will cause you even more trouble in the future.

Upvotes: 0

Related Questions