CODEWITHSUNDEEP
htmlcsstext
user4657588
user4657588

Reputation:

keep separate text on the same line as div tag

I have am using CSS to sytle part of my text font to bold. But I don't want the whole line to be bold. Just part of the text. How can I achieve this? Here is my code:

HTML

<div>
   <div id="titleLabels">Revision:</div> 1.0 draft A
</div>

CSS

#titleLabels 
{
   font-weight: bold;
}

The output of this is this:

enter image description here

This is not what I want. I want the "1.0 draft A bit to be inline with the bit that says Revision".

How can I go about doing this?

Upvotes: 3

Views: 5913

Answers (3)

meuwka
meuwka

Reputation: 139

You can use a <b> tag to simply set a certain segment of text as bold

<div>
   <b>Revision:</b> 1.0 draft A
</div>

Upvotes: 1

j08691
j08691

Reputation: 207901

Just add display:inline to #titleLabels:

#titleLabels {
    font-weight: bold;
    display:inline;
}
<div>
    <div id="titleLabels">Revision:</div>1.0 draft A
</div>

Divs by default are block level elements and will take up the full width of their parent element unless you alter that.

A more logical solution would be to not use divs on the revision text and instead use either <strong>, <b> or a <span> with the font-weight styled.

#titleLabels {
  font-weight: bold;
}
<div>
  <b>Revision:</b>1.0 draft A
</div>
<div>
  <strong>Revision:</strong>1.0 draft A
</div>
<div>
  <span id="titleLabels">Revision:</span>1.0 draft A
</div>

Upvotes: 3

Akshay
Akshay

Reputation: 14348

Use display:inline-block

#titleLabels 
{
   font-weight: bold;
    display:inline-block;
}
<div>
   <div id="titleLabels">Revision:</div> 1.0 draft A
</div>

Upvotes: 1

Related Questions