How to prevent html div from expanding when text size is changed

To fix the horizontal pushing: Instead of using padding to space the items apart, one solution is to use width and text-align: center; so that the items don't push the other items after them.

To fix the vertical pushing: One solution is to specify a line-height equal to the largest font-size (which would be your :hover size)

#navigation{
    background-color:black;
    width:98%;
    font-family:calibri;
    padding:1%;
    margin-left:0px;
    position:absolute;
    top:0;
    left:0;
    display:block;
}
#nav{
    list-style-type:none;
}
ul#nav li{
    float:left;
    width: 15%;
    text-align: center;
}
.navlink{
    display:block;
    background-color:black;
    text-decoration:none;
    color:white;
    line-height:14pt;
}
.navlink:hover{
    font-weight:bold;
    font-size:14pt; 
}
<!DOCTYPE html>
<html>
<body>
    <div id = "navigation">
        <ul id = "nav">
            <li><a href = "mechadogs.org/home" class = "navlink">Home</a></li>
            <li><a href = "mechadogs.org/team" class = "navlink">Our Team</a></li>
            <li><a href = "mechadogs.org/gallery" class = "navlink">Gallery</a></li>
            <li><a href = "mechadogs.org/community" class = "navlink">Community</a></li>
            <li><a href = "mechadogs.org/first" class = "navlink">FIRST</a></li>
        </ul>
    </div>
</body>
</html>

Add a max-height: 30px; to #navigation.

In general, if you are looking for something that transform shape/size aesthetically, it's easier to work with min/max width in pixels, rather then %.

Tags:

Html

Css

Recent Posts