ComicalGamer ComicalGamer -4 years ago 73
CSS Question

Getting two divs to stay next to each other with a border style and scale with the browser

Very new to HTML/CSS/JavaScript/JQuery, and I need some help. I'm trying to get my two divs that are nested inside another div to stay next to one another and scale with the screen. So I used width: 50%;, but I also need a border around the two and that seems to increase their width making the right-most div move down. I tried the table/table-cells method, and other solutions that yielded no results, so now I'm posting my source code, and if anyone can help it would be much appreciated.

CSS:

body{
background-color: black;;
}

#header{
display: table;
width:100%;
height:30%;
background-color: white;
overflow: hidden;
}

.button1{
display: table-cell;
width: 50%;
height: auto;
background-color: red;
border-radius: 120px 0px 0px 120px / 120px 0px 0px 120px;
border-color: green;
border-width: thin;
border-collapse:collapse;
border-style: bold;
border-right-style: none;
float:left;
text-align: center;
vertical-align: middle;
}

.button2{
display: table-cell;
width: 50%;
height: auto;
background-color: blue;
border-radius: 0px 120px 120px 0px / 0px 120px 120px 0px;
border-color: red;
border-width: thin;;
border-style: solid;
border-left-style: none;
float: right;
text-align: center;
vertical-align: middle;
}


HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<title></title>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="header">
<div class="button1">Button1</div><div class="button2">Button2</div>
</div>
</body>

</html>

Answer Source

I'm assuming .button1 and .button2 should be .articles and .videos?

What you're seeing is the default box-model behavior. To keep padding and borders from pushing beyond the specified widths, use box-sizing: border-box on the elements.

body{
  background-color: black;;
}

#header{
  display: table;
  width:100%;
  height:30%;
  background-color: white;
  overflow: hidden;
}

.articles {
  display: table-cell;
  width: 50%;
  height: auto;
  background-color: red;
  border-radius: 120px 0px 0px 120px / 120px 0px 0px 120px;
  border-color: red;
  border-width: thin;
  border-collapse:collapse;
  border-style: solid;
  border-right-style: none;
  text-align: center;
  vertical-align: middle;
}

.videos {
  display: table-cell;
  width: 50%;
  height: auto;
  background-color: blue;
  border-radius: 0px 120px 120px 0px / 0px 120px 120px 0px;
  border-color: red;
  border-width: thin;;
  border-style: solid;
  border-left-style: none;
  text-align: center;
  vertical-align: middle;
}
#header > div {
  box-sizing: border-box;
}
<div id="header">
  <div class="videos">Videos</div>
  <div class="articles">Articles</div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download