I am trying to add a second element, a text input, next to an existing button, and have them be side-by-side. The button originally occupied most of the space. Now I just want each element to take up roughly 50% of the width of the space available and be next to each other.
Code image below. I added the parent div and the sponsored_post_bid
element to try and achieve side-by-side.
main .add-post-modal .add-post-categories .extra-category {
float: left;
}
main .add-post-modal .add-post-categories .extra-category input {
width: 0px !important;
height: 0px !important;
overflow: hidden;
-moz-appearance: none;
}
main .sponsored_post_bid {
width: 48%;
height: 100%;
float: right;
}
<div style="margin: auto; width: 100%;">
<div class="extra-category">
<input type="radio" name="category" id="cat9" value="Sponsored" />
<label for="cat9">Sponsored Post</label>
</div>
<input class="sponsored_post_bid" value="Bid $$$" />
<div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Unfortunately they are on different lines. If I try for .extra-category
to have width: 48%
I get the following:
Which is also not the intended goal.
CodePudding user response:
I added float
to your input and a class called new
I added to the label. I wasn't sure if you wanted to use flex-box or not so I figured going the old fashion route was okay. However, it seems like perhaps in your screenshots the width is not 100% of body which may alter this result. Let us know if that's the case.
main .add-post-modal .add-post-categories .extra-category {
float: left;
}
main .add-post-modal .add-post-categories .extra-category input {
width: 0px !important;
height: 0px !important;
overflow: hidden;
-moz-appearance: none;
}
main .sponsored_post_bid {
width: 48%;
height: 100%;
float: right;
}
input[type=radio] {
float: left;
}
label.new {
float: left;
margin-right: 10px;
}
<div style="margin: auto; width: 100%;">
<div class="extra-category">
<input type="radio" name="category" id="cat9" value="Sponsored"/>
<label for="cat9" class="new">Sponsored Post</label>
</div>
<input class="sponsored_post_bid" value="Bid $$$" />
<div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Give this snippet a whirl.
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<style>
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.container {
width: 400px;
padding: 24px;
font-size: 13px;
margin: 0 auto;
}
.main {
grid-column: 1 / -1;
grid-gap: 0;
display: grid;
grid-template-columns: auto auto;
align-items: center;
}
input[type=text] {
background: #F4F6F8;
border: 1px solid #9EADBB;
border-radius: 4px;
padding: 6px 12px;
box-sizing: content-box;
width: 100%;
}
#field {
width: 100%;
margin-top: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div>
<input type="radio" name="category" id="cat9" value="Sponsored" />
<label for="cat9">Sponsored Post</label>
</div>
<input class="sponsored_post_bid" type="text" value="Bid $$$" />
</div>
<input id="field" type="text" placeholder="Please enter your name">
</div>
</body>
</html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Try style="display:inline-block" on inner div:
<div style="margin: auto; width: 100%;">
<div class="extra-category" style="display:inline-block">
<input type="radio" name="category" id="cat9" value="Sponsored"/>
<label for="cat9">Sponsored Post</label>
</div>
<input class="sponsored_post_bid" value="Bid $$$"/>
<div>
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>