Mixing
how to evenly space out drop down box?
0
I am trying to evenly space out my drop down box. I want the options to be evenly spaced out whenever the user select a drop down box. I tried using margin and this seems to work but for some reason, I can't get it to push down further enough....
<div class="subscriptionplan">
<select name="subscriptionplan">
<option value="">Choose Subscription Plan 1</option>
<option value="None">None</option>
<option value="Level 1">Level 1</option>
<option value="Level 2">Level 2</option>
<option value="Level 3">Level 3</option>
</select>
<br></br>
<select name="pricing_level1">
<option value="">Choose a price plan for Level 1</option>
<option value="None">None</option>
<option value="100">Monthly:$100</option>
<option value="800">Yearly:$800</option>
</select>
<br></br>
<select name="pricing_level2">
<option value="">Choose a price plan for Level 2</option>
<option value="None">None</option>
<option value="150">Monthly:$150</option>
<option value="1300">Yearly:$1300</option>
</select>
<br></br>
<select name="pricing_level3">
<option value="">Choose a price plan for Level 3</option>
<option value="None">None</option>
<option value="200">Monthly:$200</option>
<option value="1800">Yearly:$1800</option>
</select>
<br></br>
<button type="submit" name="submit">Sign up</button>
</form>
</div>
This is the CSS code:
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
html css
asked Nov 20 '18 at 8:14
musician888musician888
24
|
show 1 more comment
0
I am trying to evenly space out my drop down box. I want the options to be evenly spaced out whenever the user select a drop down box. I tried using margin and this seems to work but for some reason, I can't get it to push down further enough....
<div class="subscriptionplan">
<select name="subscriptionplan">
<option value="">Choose Subscription Plan 1</option>
<option value="None">None</option>
<option value="Level 1">Level 1</option>
<option value="Level 2">Level 2</option>
<option value="Level 3">Level 3</option>
</select>
<br></br>
<select name="pricing_level1">
<option value="">Choose a price plan for Level 1</option>
<option value="None">None</option>
<option value="100">Monthly:$100</option>
<option value="800">Yearly:$800</option>
</select>
<br></br>
<select name="pricing_level2">
<option value="">Choose a price plan for Level 2</option>
<option value="None">None</option>
<option value="150">Monthly:$150</option>
<option value="1300">Yearly:$1300</option>
</select>
<br></br>
<select name="pricing_level3">
<option value="">Choose a price plan for Level 3</option>
<option value="None">None</option>
<option value="200">Monthly:$200</option>
<option value="1800">Yearly:$1800</option>
</select>
<br></br>
<button type="submit" name="submit">Sign up</button>
</form>
</div>
This is the CSS code:
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
html css
asked Nov 20 '18 at 8:14
musician888musician888
24
Q @musician888 what you mean by "spaced out"?
– BG Bruno
Nov 20 '18 at 8:17
breaktags are self closing, meaning you don't need an additional tag to close it. Thus you should replace<br></br>with<br />
– Nick Parsons
Nov 20 '18 at 8:20
why don't you do them as radio buttons instead?
– Carol McKay
Nov 20 '18 at 8:25
when the user click on the drop down box, it looks like it is overlapping the second drop down box but I realised that it looks good when zoom in and not zoom out
– musician888
Nov 20 '18 at 8:31
I am not sure if it is working though....
– musician888
Nov 20 '18 at 8:32
|
show 1 more comment
0
0
0
I am trying to evenly space out my drop down box. I want the options to be evenly spaced out whenever the user select a drop down box. I tried using margin and this seems to work but for some reason, I can't get it to push down further enough....
<div class="subscriptionplan">
<select name="subscriptionplan">
<option value="">Choose Subscription Plan 1</option>
<option value="None">None</option>
<option value="Level 1">Level 1</option>
<option value="Level 2">Level 2</option>
<option value="Level 3">Level 3</option>
</select>
<br></br>
<select name="pricing_level1">
<option value="">Choose a price plan for Level 1</option>
<option value="None">None</option>
<option value="100">Monthly:$100</option>
<option value="800">Yearly:$800</option>
</select>
<br></br>
<select name="pricing_level2">
<option value="">Choose a price plan for Level 2</option>
<option value="None">None</option>
<option value="150">Monthly:$150</option>
<option value="1300">Yearly:$1300</option>
</select>
<br></br>
<select name="pricing_level3">
<option value="">Choose a price plan for Level 3</option>
<option value="None">None</option>
<option value="200">Monthly:$200</option>
<option value="1800">Yearly:$1800</option>
</select>
<br></br>
<button type="submit" name="submit">Sign up</button>
</form>
</div>
This is the CSS code:
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
html css
asked Nov 20 '18 at 8:14
musician888musician888
24
I am trying to evenly space out my drop down box. I want the options to be evenly spaced out whenever the user select a drop down box. I tried using margin and this seems to work but for some reason, I can't get it to push down further enough....
<div class="subscriptionplan">
<select name="subscriptionplan">
<option value="">Choose Subscription Plan 1</option>
<option value="None">None</option>
<option value="Level 1">Level 1</option>
<option value="Level 2">Level 2</option>
<option value="Level 3">Level 3</option>
</select>
<br></br>
<select name="pricing_level1">
<option value="">Choose a price plan for Level 1</option>
<option value="None">None</option>
<option value="100">Monthly:$100</option>
<option value="800">Yearly:$800</option>
</select>
<br></br>
<select name="pricing_level2">
<option value="">Choose a price plan for Level 2</option>
<option value="None">None</option>
<option value="150">Monthly:$150</option>
<option value="1300">Yearly:$1300</option>
</select>
<br></br>
<select name="pricing_level3">
<option value="">Choose a price plan for Level 3</option>
<option value="None">None</option>
<option value="200">Monthly:$200</option>
<option value="1800">Yearly:$1800</option>
</select>
<br></br>
<button type="submit" name="submit">Sign up</button>
</form>
</div>
This is the CSS code:
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
html css
html css
asked Nov 20 '18 at 8:14
musician888musician888
24
asked Nov 20 '18 at 8:14
musician888musician888
24
asked Nov 20 '18 at 8:14
musician888musician888
24
asked Nov 20 '18 at 8:14
musician888musician888
24
asked Nov 20 '18 at 8:14
musician888musician888
24
24
Q @musician888 what you mean by "spaced out"?
– BG Bruno
Nov 20 '18 at 8:17
breaktags are self closing, meaning you don't need an additional tag to close it. Thus you should replace<br></br>with<br />
– Nick Parsons
Nov 20 '18 at 8:20
why don't you do them as radio buttons instead?
– Carol McKay
Nov 20 '18 at 8:25
when the user click on the drop down box, it looks like it is overlapping the second drop down box but I realised that it looks good when zoom in and not zoom out
– musician888
Nov 20 '18 at 8:31
I am not sure if it is working though....
– musician888
Nov 20 '18 at 8:32
|
show 1 more comment
Q @musician888 what you mean by "spaced out"?
– BG Bruno
Nov 20 '18 at 8:17
breaktags are self closing, meaning you don't need an additional tag to close it. Thus you should replace<br></br>with<br />
– Nick Parsons
Nov 20 '18 at 8:20
why don't you do them as radio buttons instead?
– Carol McKay
Nov 20 '18 at 8:25
when the user click on the drop down box, it looks like it is overlapping the second drop down box but I realised that it looks good when zoom in and not zoom out
– musician888
Nov 20 '18 at 8:31
I am not sure if it is working though....
– musician888
Nov 20 '18 at 8:32
Q @musician888 what you mean by "spaced out"?
– BG Bruno
Nov 20 '18 at 8:17
Q @musician888 what you mean by "spaced out"?
– BG Bruno
Nov 20 '18 at 8:17
break tags are self closing, meaning you don't need an additional tag to close it. Thus you should replace <br></br> with <br />– Nick Parsons
Nov 20 '18 at 8:20
break tags are self closing, meaning you don't need an additional tag to close it. Thus you should replace <br></br> with <br />– Nick Parsons
Nov 20 '18 at 8:20
why don't you do them as radio buttons instead?
– Carol McKay
Nov 20 '18 at 8:25
why don't you do them as radio buttons instead?
– Carol McKay
Nov 20 '18 at 8:25
when the user click on the drop down box, it looks like it is overlapping the second drop down box but I realised that it looks good when zoom in and not zoom out
– musician888
Nov 20 '18 at 8:31
when the user click on the drop down box, it looks like it is overlapping the second drop down box but I realised that it looks good when zoom in and not zoom out
– musician888
Nov 20 '18 at 8:31
I am not sure if it is working though....
– musician888
Nov 20 '18 at 8:32
I am not sure if it is working though....
– musician888
Nov 20 '18 at 8:32
|
show 1 more comment
1 Answer
1
active
oldest
votes
0
em is not equal to px.
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
/* ------------------------*/
You did not add the context for absolute position.
assuming that you need css for spacing select boxes side by side please refer below. you can remove br tags.
div.subscriptionplan {
/* position: absolute;
right: 180em;
bottom: 60em;*/
display:block;
width:100%;
}
div.subscriptionplan select{
/* margin: 180em;*/
margin:0.5em;
display:inline-block;
max-width:33.3%;
}
answered Nov 20 '18 at 8:32
vssadinenivssadineni
379110
thanks but what do you mean by not adding the context for absolute position?
– musician888
Nov 20 '18 at 11:47
.subscriptionplan is positioned absolute and I do not know why it has to be in absolute positioned. if it has any significance or how inner elements will get effected.
– vssadineni
Nov 20 '18 at 11:53
oh.... I have used position absolute for almost everything... I thought that by using position absolute, it won't affect other images? Am I using it incorrectly?
– musician888
Nov 20 '18 at 11:55
No, actually by positioning elements in absolute state you are removing them from their natural order.
– vssadineni
Nov 20 '18 at 11:58
oh... I have been wondering why some of my pictures can't be moved at all
– musician888
Nov 20 '18 at 12:03
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388740%2fhow-to-evenly-space-out-drop-down-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
em is not equal to px.
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
/* ------------------------*/
You did not add the context for absolute position.
assuming that you need css for spacing select boxes side by side please refer below. you can remove br tags.
div.subscriptionplan {
/* position: absolute;
right: 180em;
bottom: 60em;*/
display:block;
width:100%;
}
div.subscriptionplan select{
/* margin: 180em;*/
margin:0.5em;
display:inline-block;
max-width:33.3%;
}
answered Nov 20 '18 at 8:32
vssadinenivssadineni
379110
thanks but what do you mean by not adding the context for absolute position?
– musician888
Nov 20 '18 at 11:47
.subscriptionplan is positioned absolute and I do not know why it has to be in absolute positioned. if it has any significance or how inner elements will get effected.
– vssadineni
Nov 20 '18 at 11:53
oh.... I have used position absolute for almost everything... I thought that by using position absolute, it won't affect other images? Am I using it incorrectly?
– musician888
Nov 20 '18 at 11:55
No, actually by positioning elements in absolute state you are removing them from their natural order.
– vssadineni
Nov 20 '18 at 11:58
oh... I have been wondering why some of my pictures can't be moved at all
– musician888
Nov 20 '18 at 12:03
|
show 5 more comments
0
em is not equal to px.
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
/* ------------------------*/
You did not add the context for absolute position.
assuming that you need css for spacing select boxes side by side please refer below. you can remove br tags.
div.subscriptionplan {
/* position: absolute;
right: 180em;
bottom: 60em;*/
display:block;
width:100%;
}
div.subscriptionplan select{
/* margin: 180em;*/
margin:0.5em;
display:inline-block;
max-width:33.3%;
}
answered Nov 20 '18 at 8:32
vssadinenivssadineni
379110
thanks but what do you mean by not adding the context for absolute position?
– musician888
Nov 20 '18 at 11:47
.subscriptionplan is positioned absolute and I do not know why it has to be in absolute positioned. if it has any significance or how inner elements will get effected.
– vssadineni
Nov 20 '18 at 11:53
oh.... I have used position absolute for almost everything... I thought that by using position absolute, it won't affect other images? Am I using it incorrectly?
– musician888
Nov 20 '18 at 11:55
No, actually by positioning elements in absolute state you are removing them from their natural order.
– vssadineni
Nov 20 '18 at 11:58
oh... I have been wondering why some of my pictures can't be moved at all
– musician888
Nov 20 '18 at 12:03
|
show 5 more comments
0
0
0
em is not equal to px.
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
/* ------------------------*/
You did not add the context for absolute position.
assuming that you need css for spacing select boxes side by side please refer below. you can remove br tags.
div.subscriptionplan {
/* position: absolute;
right: 180em;
bottom: 60em;*/
display:block;
width:100%;
}
div.subscriptionplan select{
/* margin: 180em;*/
margin:0.5em;
display:inline-block;
max-width:33.3%;
}
answered Nov 20 '18 at 8:32
vssadinenivssadineni
379110
em is not equal to px.
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
/* ------------------------*/
You did not add the context for absolute position.
assuming that you need css for spacing select boxes side by side please refer below. you can remove br tags.
div.subscriptionplan {
/* position: absolute;
right: 180em;
bottom: 60em;*/
display:block;
width:100%;
}
div.subscriptionplan select{
/* margin: 180em;*/
margin:0.5em;
display:inline-block;
max-width:33.3%;
}
answered Nov 20 '18 at 8:32
vssadinenivssadineni
379110
answered Nov 20 '18 at 8:32
vssadinenivssadineni
379110
answered Nov 20 '18 at 8:32
vssadinenivssadineni
379110
answered Nov 20 '18 at 8:32
vssadinenivssadineni
379110
379110
thanks but what do you mean by not adding the context for absolute position?
– musician888
Nov 20 '18 at 11:47
.subscriptionplan is positioned absolute and I do not know why it has to be in absolute positioned. if it has any significance or how inner elements will get effected.
– vssadineni
Nov 20 '18 at 11:53
oh.... I have used position absolute for almost everything... I thought that by using position absolute, it won't affect other images? Am I using it incorrectly?
– musician888
Nov 20 '18 at 11:55
No, actually by positioning elements in absolute state you are removing them from their natural order.
– vssadineni
Nov 20 '18 at 11:58
oh... I have been wondering why some of my pictures can't be moved at all
– musician888
Nov 20 '18 at 12:03
|
show 5 more comments
thanks but what do you mean by not adding the context for absolute position?
– musician888
Nov 20 '18 at 11:47
.subscriptionplan is positioned absolute and I do not know why it has to be in absolute positioned. if it has any significance or how inner elements will get effected.
– vssadineni
Nov 20 '18 at 11:53
oh.... I have used position absolute for almost everything... I thought that by using position absolute, it won't affect other images? Am I using it incorrectly?
– musician888
Nov 20 '18 at 11:55
No, actually by positioning elements in absolute state you are removing them from their natural order.
– vssadineni
Nov 20 '18 at 11:58
oh... I have been wondering why some of my pictures can't be moved at all
– musician888
Nov 20 '18 at 12:03
thanks but what do you mean by not adding the context for absolute position?
– musician888
Nov 20 '18 at 11:47
thanks but what do you mean by not adding the context for absolute position?
– musician888
Nov 20 '18 at 11:47
.subscriptionplan is positioned absolute and I do not know why it has to be in absolute positioned. if it has any significance or how inner elements will get effected.
– vssadineni
Nov 20 '18 at 11:53
.subscriptionplan is positioned absolute and I do not know why it has to be in absolute positioned. if it has any significance or how inner elements will get effected.
– vssadineni
Nov 20 '18 at 11:53
oh.... I have used position absolute for almost everything... I thought that by using position absolute, it won't affect other images? Am I using it incorrectly?
– musician888
Nov 20 '18 at 11:55
oh.... I have used position absolute for almost everything... I thought that by using position absolute, it won't affect other images? Am I using it incorrectly?
– musician888
Nov 20 '18 at 11:55
No, actually by positioning elements in absolute state you are removing them from their natural order.
– vssadineni
Nov 20 '18 at 11:58
No, actually by positioning elements in absolute state you are removing them from their natural order.
– vssadineni
Nov 20 '18 at 11:58
oh... I have been wondering why some of my pictures can't be moved at all
– musician888
Nov 20 '18 at 12:03
oh... I have been wondering why some of my pictures can't be moved at all
– musician888
Nov 20 '18 at 12:03
|
show 5 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388740%2fhow-to-evenly-space-out-drop-down-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Q @musician888 what you mean by "spaced out"?
– BG Bruno
Nov 20 '18 at 8:17
breaktags are self closing, meaning you don't need an additional tag to close it. Thus you should replace<br></br>with<br />– Nick Parsons
Nov 20 '18 at 8:20
why don't you do them as radio buttons instead?
– Carol McKay
Nov 20 '18 at 8:25
when the user click on the drop down box, it looks like it is overlapping the second drop down box but I realised that it looks good when zoom in and not zoom out
– musician888
Nov 20 '18 at 8:31
I am not sure if it is working though....
– musician888
Nov 20 '18 at 8:32