Divs side-by-side, centred, and overflowing edge of screen

Question

I am trying to design a landing page to link to 2 web apps. I am trying to make the design as visually attractive as possible. I think it would look good if the Divs containing the links were side-by-side at the centre of the screen, with their edges overflowing the left and right of the screen. I can then put a border-radius on them and some nice blocky colour:

Goal:

enter image description here

I have tried numerous options, including inline-block and overflow:hidden:

HTML

<div id="centre-pane">
    <div class="app-btn">
        <a href="l1.php"><img src="icon.png">link text</a>
    </div>
    <div class="app-btn">
        <a href="l2.php"><img src="icon2.png">link text</a>
    </div>
</div>

CSS

.app-btn 
{
    width:1000px;
    height:320px;

    display:inline-block;
    border:10px solid black;
    border-radius: 50px;
}

#centre-pane {   
    width:2000px;
    margin:0 auto;
    text-align:center;
    overflow-x: hidden;
}

Is this possible? I have found several ways of getting them side-by-side (eg here) but nothing that also lets them overflow the screen.

Why do they need to overflow if you're hiding the overflow? Not sure what you are trying to do here — Paulie_D, Apr 21 '15 at 10:06
I suppose they don't, but I would like the _appearance_ of half of a `border-radius` box if that makes sense. — Mark d, Apr 21 '15 at 10:11
Since you know the dimensions you could do it like this: http://jsfiddle.net/bsu9onsc/1/ try to change the width of the frame and you will see how the buttons follow (set som overflow hidden to hide scroll (as in version /2). — Dr.Flink, Apr 21 '15 at 10:12

score 0 · Accepted Answer · answered Apr 21 '15 at 10:14

Just using position absolute would do the trick.

I've added a wrapper but it may not be required.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html,
.wrapper {
  height: 100%;
}
.wrapper {
  position: relative;
}
.btn {
  width: 45%;
  height: 30%;
  background: lightblue;
  border: 2px solid blue;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.left {
  left: 0;
  border-radius: 0 25% 25% 0;
  border-left: none;
}
.right {
  right: 0;
  border-radius: 25% 0 0 25%;
  border-right: none;
}

<div class="wrapper">
  <div class="btn left"></div>
  <div class="btn right"></div>
</div>

Brilliant thanks! Your original comment made me remember that you can set the `border-radius` independently for each corner, which of course means it actually doesn't have to overflow. Worth noting though, in Firefox at least that the `border-radius: % % % %` syntax draws funny elliptical radiuses, so I am going to instead use `border-top-left-radius` etc. which seems to work fine. Thanks again! — Mark d, Apr 21 '15 at 10:23

score 0 · Answer 2 · answered Apr 21 '15 at 10:15

You can achieve this with absolute positioning and negative margins (for the right item). You'll have to fix the size of the body though in order to achieve the effect. I've also added individual classes to the first and second item respectively (.app-btn-1 and .app-btn-2):

body {
    width: 2000px;
    overflow-x: hidden;
}

.app-btn {
    width:1000px;
    height:320px;
    position: absolute;
    border:10px solid black;
    border-radius: 50px;
    overflow-x: hidden;
}

.app-btn-1 {
    left: -500px;
    text-align: right;
}

.app-btn-2 {
    left: 100%;
    margin-left: -500px;

}

DEMO

NOTE: For my demo to look right in jsfiddle, I've quartered the sizes so you can see the effect in the small window

score 0 · Answer 3 · answered Apr 21 '15 at 10:22

Here is the code you need:

.menu {
    display: inline-block;
    height: 200px;
    width: 40%;
    margin-top: calc(50% - 100px);    
    border: 2px solid red;
    background-color: brown;
    color: black;
    text-decoration: none;
    transition: all 0.5s;
}
#left {
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: -10px;
}
#right {
    float: right;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: -10px;
}
.menu:hover {
    background-color: gray;
    border-color: brown;
    color: red;
}

<a href="#"><div class="menu" id="left">Left</div></a>
<a href="#"><div class="menu" id="right">Right</div></a>

I made a JS Fiddle for you.

Divs side-by-side, centred, and overflowing edge of screen

3 Answers3