CODEWITHSUNDEEP
css
cesarcarlos
cesarcarlos

Reputation: 1405

Keeping the same gap while resizing buttons

I have two buttons that appear side by side. The idea is that whenever the screen width changes, the buttons will grow or shrink accordingly. This is working fine. However, I'd like to have a 10px distance between the buttons, no matter what the screen width is. In my case as the screen width grows, the gap also grows which I'd like to avoid.

Here is the test code I have been working with:

<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
body {
    margin:0;
    padding: 0;
}
div.buttons {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
}
a.left, a.right {
    display: block;
    width: 49%;
    box-sizing: border-box;
    background-color: #f00;
    text-align: center;
}
a.left {
    float: left;
}
a.right {
    float: right;
}

</style>
</head>

<body>
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
</body>
</html>

I can tell that giving a 1% to the gap will make it grow with the screen, but I'm trying to find a way of giving the gap a fixed size while having the button behave as expected.

EDITED TO ADD: I'm looking for a solution which not only would keep the gap fixed but that will also keep the left and right margins fixed as well. So 5px space to edge, button, 10px gap, button, 5px space to edge.

Thanks for any help you can provide.

Upvotes: 1

Views: 1333

Answers (3)

ChiralMichael
ChiralMichael

Reputation: 1224

I have a solution in this fiddle.

HTML

<div class="buttons">
  <div class="button-container">
    <a class="button">first</a>
  </div><div class="button-container">
    <a class="button">second</a>
  </div>
</div>

CSS

.buttons {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}
.button-container {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin: 0;
}
.button {
   display: block;
   box-sizing: border-box;
   background-color: #f00;
   text-align: center;
   padding: 5px;    
}
.button-container:nth-child(odd) .button {
  margin-right: 5px;
}
.button-container:nth-child(even) .button {
  margin-left: 5px;
}

Key points to take home. Firstly, you need to avoid any whitespace between the inline-block elements .button-container to avoid a rendered space. Otherwise, setting width:50% will end up wrapping (because your have two 50% wide items with an intervening space, which is more that 100% width). Secondly, using .button-container allows you to evenly split the buttons across the page using a set percentage. The spacing between buttons then becomes a margin interior to the container.

Upvotes: 1

Johannes
Johannes

Reputation: 67778

So here's a new version, fulfilling your later added additional requirements.

It gives the buttons absolute position and defines their width by defining their left and right borders 5px from the outer border and 5px each from the center (adding up to a 10px distance between them), using calc:

body {
    margin:0;
    padding: 0;
}
div.buttons {
    width: 100%;
    height: 1.6em;
}
a.left, a.right {
    position: absolute;
    display: block;
    background-color: #f00;
    text-align: center;
}
a.left {
 left: 5px;
 right: calc(50% + 5px);
}
a.right {
 right: 5px;
 left: calc(50% + 5px);
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

That's due to the fact that you links are aligned to the outer borders (via float), not to each other. To change it the way you want, remove the floats and center them, plus add a 10px margin-right on the left one:

(for the snippet I reduced the width to 48% since otherwise it won't fit into a small screen)

body {
    margin:0;
    padding: 0;
}
div.buttons {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    text-align: center;
}
a.left, a.right {
    display: inline-block;
    width: 48%;
    box-sizing: border-box;
    background-color: #f00;
    text-align: center;
}
a.left {
 margin-right: 10px;
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>

Upvotes: 0

Related Questions