How can I put two divs next to each other and have it take up the whole width of the screen?
Question
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 the width of the divs end up being too big and show up on two line.
Here's the code I'm using:
<head>
<style>
.box {
width: 50%;
background-color: #202020;
border: 2px solid #484848;
border-radius: 10px;
padding: 5px;
margin-bottom: 5px;
}
p {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #fff;
margin: 0px;
}
</style>
</head>
<body>
<div class="box" style="float:right;">
<p>Test</p>
</div>
<div class="box" style="float:left;">
<p>Test</p>
</div>
</body>
I think the issue is due to the padding and border sizes of the div, but I can not seem to fix it. Any help would be much appreciated! :)
2 answers
solution1
0 2019-06-08 20:10:51
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>
solution2
0 2019-06-08 20:46:34
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.