Home/ Questions/Q 8479763
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T19:07:22+00:00

I’ve run into interesting problem while creating navigation bar with two dynamic size columns

  • 0

I’ve run into interesting problem while creating navigation bar with two dynamic size columns and a search box between them, and clickable tabs on left and right sides. Here is the code for the page:

<html>
<head>
<style>
.nav{
font-size: 14px;
width: 100%;
background-color: black;
color:white;
}

.nav .l-table {
display: table;
position: relative;
width: 100%;
}

.nav .l-table .l-cell {
display: table-cell;
position: relative;
text-align: center;
width: 95px;
}

.nav .l-table .l-cell.clickable {
background: gray;
}

.nav .l-table .l-cell.stretch{
min-width: 60px;
width: auto;
border-right: 1px solid;
}
</style>
</head>
<body>

<nav class="nav">
    <div class="l-table">
        <div class="l-cell clickable">
            <a href="#">Home</a>
        </div>

        <div class="stretch l-cell"></div>

        <div style="width:300px;" class="l-cell clickable">
                   <input type="text" value="Search"></input>
        </div>

        <div class="stretch l-cell"></div>

        <div class="l-cell clickable">
            <a href="#">Login</a>
        </div>
</div>
</nav>

</body>
</html>

Notice how two black areas shrink while window is resizing. This is the behaviour I want, so that navigation bar adjusts its size depening on the size of screen.

The problem I have is that I don’t need border-right in .nav .l-table .l-cell.stretch elements, but when I remove them from css, behaviour becomes different and width: auto doesn’t work.

Do you maybe have a clue what might be the problem? It is strange that removing the border causes this, it seems like a bug to me.

Also do you have other suggestionss how to make the same navigation with different css?

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are using quite a mess of fixed and variable width properties. May I suggest, if your problem allows, to use solely relative width definitions.

    That is:

    .nav .l-table .l-cell {
display: table-cell;
position: relative;
text-align: center;
width:5%;
min-width: 95px;
}

.nav .l-table .l-cell.clickable {
background: gray;
}

.nav .l-table .l-cell.clickable2 {
background: gray;
width:20%;
min-width:300px;
}

.nav .l-table .l-cell.stretch{
min-width: 60px;
width: 35%;
}

    (The clickable2 class is for the center search box. Change the class name there and get rid of the width in line style.)

    • 0