Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How Can I Put Two Divs Next To Each Other And Have It Take Up The Whole Width Of The Screen?

Post a Comment
I'm trying to put two divs next to each other and have them both fill up the width of the screen. Ideally, I would want it to look like this. I have tried to do this myself, but th

Solution 1:

Simply use another container which holds your divs and use display:flex

To make the gap use justify-content: space-between and reduce width of box.

<head>
<style>
.box {
    width: 48%;
    background-color: #202020;
    border: 2px solid #484848;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 5px;
}
.wrapper {
  display:flex;
  justify-content:space-between;
  width:100vw;
}
p {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    color: #fff;
    margin: 0px;
}
</style>
</head>

<body>
<div class="wrapper">
<div class="box" style="float:right;">
  <p>Test</p>
</div>
<div class="box" style="float:left;">
  <p>Test</p>
</div>
</div>

</body>

Solution 2: 

.container {
  display: flex;
  width: 100%;
  height: 100px;
}

.twin {
  margin:8px;
  height: inherit;
  border: 1px solid red;
  width: 50%;
}
<html>
<head>
</head>
<body>

<div class="container">
<div class="twin">
</div>
<div class="twin">
</div>

</div>
</body>
</html>

Post a Comment for "How Can I Put Two Divs Next To Each Other And Have It Take Up The Whole Width Of The Screen?"