CODEWITHSUNDEEP
css
Tan WS
Tan WS

Reputation: 181

How to prevent divs from moving when I hover on an element that changes size above it

http://bit.ly/1fVGrBT

Here is my website. When you hover on Problem and move away, the div below it gets pushed up and down. Same happens for Solution. Any idea or tips how to prevent it from moving?

I think it is moving due to the changed font size and the underline, but I am not sure what I can do.

Upvotes: 2

Views: 3277

Answers (3)

tommyno
tommyno

Reputation: 79

On hover, you enlarge the text, and thus the container. This pushes the rest of the content down.

3 solutions:

  1. Use transform: scale(1.2); to enlarge the text. This doesn't affect the flow of the document. Add this to your element:hover. Remember to add browser prefixes. Read more here

    Example:

    #switcher li:hover {
transform: scale(1.2);
}

  2. Add a height to your navigation. This locks the container height.

  3. Add position: absolute on either the navigation or the content. This removes them from the document flow, so won't affect each other.

Upvotes: 1

Hamed Ali Khan
Hamed Ali Khan

Reputation: 1118

Set CSS line-height to fix the height for text in <h3> tags

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

this seems to fix it for me:

#switcher {
    display: inline-block;
    margin: 0;
    overflow: hidden;
    max-height: 30px;
}

basically I'm telling the container to not expand more than 30px in height.

Upvotes: 0

Related Questions