CODEWITHSUNDEEP
htmlcss
user2293035
user2293035

Reputation: 21

Keep the original padding when font weight changes

I created two divs with some padding in each of them. 

div {
  display:inline;
  background-color:yellow;
  padding: 2px 2px 2px 2px;
}

div:hover {
  font-weight:bold;
}
<body style="font:15px arial,sans-serif;"> 
  <div>one</div>
  <div>two</div>
</body>

As seen in the css above, I made the font weight bold when the mouse hovers over the divs.

Now what happens is if I hover over the first div, the second div shifts to the right a little bit due to the additional horizontal space required to accommodate the text with the bold font.

Is there any way to prevent the div from shifting? Can I take the additional space into account even when the font weight is normal (i.e. when the div is not hovered)?

Thank you in advance!

Upvotes: 2

Views: 1043

Answers (3)

captainsac
captainsac

Reputation: 2490

Instead of display : inline; use float:left; and provide a specific amount of width to the divs

div {
  background-color: #FFFF00;			
  float: left;
  padding: 2px;
  width: 41px;
}

div:hover {
  font-weight:bold;
}
<div>one</div>
<div>two</div>

Upvotes: 0

Srivathsan
Srivathsan

Reputation: 51

Either fit the width to be a fixed one or in the hover part reduce the padding.

Upvotes: 0

Anand Shah
Anand Shah

Reputation: 180

The divs will shift because they're meant to fit around the text, so if the text gets bigger, so will the div. Your best bet is to set a fixed width on the div, therefore it won't move.

Upvotes: 4

Related Questions