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

June 29, 2023 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><divclass="wrapper"><divclass="box"style="float:right;"><p>Test</p></div><divclass="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><divclass="container"><divclass="twin"></div><divclass="twin"></div></div></body></html>

Build Html5

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

Solution 1:

Solution 2:

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?"