CODEWITHSUNDEEP
htmlcssnavigationpaddingpercentage
Swen
Swen

Reputation: 787

Responsive padding on navigation links

I have a navigation bar which consists of two parts. The left area, which is where the actual links are. And the right area, which is were a search box will display.

The left area is fluid, while the right area has a fixed width.

What I'm trying to figure out is how to set the padding on my navigation links so that it will use up the full fluid width of the left area. (The navigation links are buttons with a hover effect, I would like them to cover the full navigation bar regardless of it's width)

See the example below

What I'm trying to do (fluid/percentage based padding based on bar width)

  width 300px
|========================================|========|
|---Link------Link------Link------Link---| Search |
|========================================|========|

  width 400px
  - padding on Links automatically adjusts to fill the bar
|================================================|========|
|----Link--------Link--------Link--------Link----| Search |
|================================================|========|

How would I go about achieving this? I've tried messing with padding percentages but I can't seem to get it to work as desired. Are padding percentages even the best way to go about this?

Upvotes: 0

Views: 1085

Answers (2)

Sam Hasler
Sam Hasler

Reputation: 12616

reduce the width of the container with padding and absolutely position the search box inside the padding. Here's an example on jsbin

HTML (note that some whitespace has been deliberately removed so that there aren't text nodes taking up space.):

  <nav class="">
    <div class="nav-link-container">
            <div class="nav-link"><a >link</a>
      </div><div class="nav-link"><a >link</a>
      </div><div class="nav-link"><a >link</a>
      </div><div class="nav-link"><a >link</a>
      </div>
    </div><div class="search-box-container">
      <input class="search-box" placeholder="search">
    </div>
  </nav>

CSS:

nav {
  padding-right: 220px;
  position: relative;
  background: lightblue;
  line-height: 1.5em;
}
  .nav-link-container {
    display: inline-block;
    width: 100%;
    text-align: center;

  }
    .nav-link {
      display: inline-block;
      width: 25%;
      outline: 1px dashed grey;
    }
  .search-box-container {
    position: absolute;
    right: 0;
    top:0;

    width: 210px;
    display: inline-block;
  }
    .search-box {

      width: 200px;

      border-radius: 5px;
      border: 1px solid lightgrey;
      padding-left: 5px
    }

NB: I've only used outline to show where the links are, you wouldn't do that in practise.

Upvotes: 1

MildlySerious
MildlySerious

Reputation: 9170

Depending on what support level you desire, you could use flexboxes.

I'll just assume you want to support older browsers, tho, where the best solution is propably a normal 2 column layout, with the links inside the left column getting a percentage width (25% in your example) and propably a min-width.

Heres a working fiddle. I made the main box resizeable for easier demonstration.

Upvotes: 1

Related Questions