Is it possible to set the width of an element based on the height of the parent element? How to do this?
0
I'm researching a few things about CSS and I had that doubt. I searched about it in other posts on the web, but i don't find yet.
If i have some img with height equals 80% of its parent div (its width will also be the same), how can i set the input's width to fill in the remaining space.
The code snippet might look like the one below:
.forms {
display: block;
width: 70%;
height: 36px; /*This height change for different devices*/
padding: 2px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
outline: 0;
font-size: 14px;
line-height: 30px;
}
#inputSearch {
position: relative;
width: 80%;
display: inline-block;
border: 0;
outline: 0;
}
#imgSearch {
position: relative;
float: right;
height: 80%;
top: 10%;
right: 6px;
}<div id="parent" class="forms">
<input id="inputSearch" type="text">
<img id="imgSearch" src="https://www.freeiconspng.com/uploads/search-icon-png-21.png">
</div>In my case, i can not change the parent div attributes, like display, because i am using a project pattern. There are other elements next to parent div. Hence, i want to change only the children attributes.
I would appreciate if someone guide me about that.
html css
asked Nov 22 at 13:26
Iuri Dias
167
add a comment |
0
I'm researching a few things about CSS and I had that doubt. I searched about it in other posts on the web, but i don't find yet.
If i have some img with height equals 80% of its parent div (its width will also be the same), how can i set the input's width to fill in the remaining space.
The code snippet might look like the one below:
.forms {
display: block;
width: 70%;
height: 36px; /*This height change for different devices*/
padding: 2px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
outline: 0;
font-size: 14px;
line-height: 30px;
}
#inputSearch {
position: relative;
width: 80%;
display: inline-block;
border: 0;
outline: 0;
}
#imgSearch {
position: relative;
float: right;
height: 80%;
top: 10%;
right: 6px;
}<div id="parent" class="forms">
<input id="inputSearch" type="text">
<img id="imgSearch" src="https://www.freeiconspng.com/uploads/search-icon-png-21.png">
</div>In my case, i can not change the parent div attributes, like display, because i am using a project pattern. There are other elements next to parent div. Hence, i want to change only the children attributes.
I would appreciate if someone guide me about that.
html css
asked Nov 22 at 13:26
Iuri Dias
167
Can you give an example on CodePen or something as to what your current situation is and what you are looking for specifically with a screenshot or different image. Because recreating this on CodePen as is doesn't really give me any insight as to what the problem is.
– Rimble
Nov 22 at 13:45
Sure! I just did that.
– Iuri Dias
Nov 22 at 14:48
I’d simply position the image absolute, and have the input field go over the full width underneath it, with an appropriate padding-right so that the input field content does not go under the image …
– misorude
Nov 22 at 15:08
@misorude Yeah, I did this earlier, but I still can not specify the size of this padding-right. I need to use the width of the image (or height of the parent div) as a parameter shape.
– Iuri Dias
Nov 22 at 15:27
@Rimble, I did that you was say.
– Iuri Dias
Nov 22 at 15:28
add a comment |
0
0
0
I'm researching a few things about CSS and I had that doubt. I searched about it in other posts on the web, but i don't find yet.
If i have some img with height equals 80% of its parent div (its width will also be the same), how can i set the input's width to fill in the remaining space.
The code snippet might look like the one below:
.forms {
display: block;
width: 70%;
height: 36px; /*This height change for different devices*/
padding: 2px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
outline: 0;
font-size: 14px;
line-height: 30px;
}
#inputSearch {
position: relative;
width: 80%;
display: inline-block;
border: 0;
outline: 0;
}
#imgSearch {
position: relative;
float: right;
height: 80%;
top: 10%;
right: 6px;
}<div id="parent" class="forms">
<input id="inputSearch" type="text">
<img id="imgSearch" src="https://www.freeiconspng.com/uploads/search-icon-png-21.png">
</div>In my case, i can not change the parent div attributes, like display, because i am using a project pattern. There are other elements next to parent div. Hence, i want to change only the children attributes.
I would appreciate if someone guide me about that.
html css
asked Nov 22 at 13:26
Iuri Dias
167
I'm researching a few things about CSS and I had that doubt. I searched about it in other posts on the web, but i don't find yet.
If i have some img with height equals 80% of its parent div (its width will also be the same), how can i set the input's width to fill in the remaining space.
The code snippet might look like the one below:
.forms {
display: block;
width: 70%;
height: 36px; /*This height change for different devices*/
padding: 2px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
outline: 0;
font-size: 14px;
line-height: 30px;
}
#inputSearch {
position: relative;
width: 80%;
display: inline-block;
border: 0;
outline: 0;
}
#imgSearch {
position: relative;
float: right;
height: 80%;
top: 10%;
right: 6px;
}<div id="parent" class="forms">
<input id="inputSearch" type="text">
<img id="imgSearch" src="https://www.freeiconspng.com/uploads/search-icon-png-21.png">
</div>In my case, i can not change the parent div attributes, like display, because i am using a project pattern. There are other elements next to parent div. Hence, i want to change only the children attributes.
I would appreciate if someone guide me about that.
.forms {
display: block;
width: 70%;
height: 36px; /*This height change for different devices*/
padding: 2px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
outline: 0;
font-size: 14px;
line-height: 30px;
}
#inputSearch {
position: relative;
width: 80%;
display: inline-block;
border: 0;
outline: 0;
}
#imgSearch {
position: relative;
float: right;
height: 80%;
top: 10%;
right: 6px;
}<div id="parent" class="forms">
<input id="inputSearch" type="text">
<img id="imgSearch" src="https://www.freeiconspng.com/uploads/search-icon-png-21.png">
</div>.forms {
display: block;
width: 70%;
height: 36px; /*This height change for different devices*/
padding: 2px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
outline: 0;
font-size: 14px;
line-height: 30px;
}
#inputSearch {
position: relative;
width: 80%;
display: inline-block;
border: 0;
outline: 0;
}
#imgSearch {
position: relative;
float: right;
height: 80%;
top: 10%;
right: 6px;
}<div id="parent" class="forms">
<input id="inputSearch" type="text">
<img id="imgSearch" src="https://www.freeiconspng.com/uploads/search-icon-png-21.png">
</div>html css
html css
asked Nov 22 at 13:26
Iuri Dias
167
asked Nov 22 at 13:26
Iuri Dias
167
edited Nov 22 at 14:47
asked Nov 22 at 13:26
Iuri Dias
167
asked Nov 22 at 13:26
Iuri Dias
167
asked Nov 22 at 13:26
Iuri Dias
167
167
Can you give an example on CodePen or something as to what your current situation is and what you are looking for specifically with a screenshot or different image. Because recreating this on CodePen as is doesn't really give me any insight as to what the problem is.
– Rimble
Nov 22 at 13:45
Sure! I just did that.
– Iuri Dias
Nov 22 at 14:48
I’d simply position the image absolute, and have the input field go over the full width underneath it, with an appropriate padding-right so that the input field content does not go under the image …
– misorude
Nov 22 at 15:08
@misorude Yeah, I did this earlier, but I still can not specify the size of this padding-right. I need to use the width of the image (or height of the parent div) as a parameter shape.
– Iuri Dias
Nov 22 at 15:27
@Rimble, I did that you was say.
– Iuri Dias
Nov 22 at 15:28
add a comment |
Can you give an example on CodePen or something as to what your current situation is and what you are looking for specifically with a screenshot or different image. Because recreating this on CodePen as is doesn't really give me any insight as to what the problem is.
– Rimble
Nov 22 at 13:45
Sure! I just did that.
– Iuri Dias
Nov 22 at 14:48
I’d simply position the image absolute, and have the input field go over the full width underneath it, with an appropriate padding-right so that the input field content does not go under the image …
– misorude
Nov 22 at 15:08
@misorude Yeah, I did this earlier, but I still can not specify the size of this padding-right. I need to use the width of the image (or height of the parent div) as a parameter shape.
– Iuri Dias
Nov 22 at 15:27
@Rimble, I did that you was say.
– Iuri Dias
Nov 22 at 15:28
Can you give an example on CodePen or something as to what your current situation is and what you are looking for specifically with a screenshot or different image. Because recreating this on CodePen as is doesn't really give me any insight as to what the problem is.
– Rimble
Nov 22 at 13:45
Can you give an example on CodePen or something as to what your current situation is and what you are looking for specifically with a screenshot or different image. Because recreating this on CodePen as is doesn't really give me any insight as to what the problem is.
– Rimble
Nov 22 at 13:45
Sure! I just did that.
– Iuri Dias
Nov 22 at 14:48
Sure! I just did that.
– Iuri Dias
Nov 22 at 14:48
I’d simply position the image absolute, and have the input field go over the full width underneath it, with an appropriate padding-right so that the input field content does not go under the image …
– misorude
Nov 22 at 15:08
I’d simply position the image absolute, and have the input field go over the full width underneath it, with an appropriate padding-right so that the input field content does not go under the image …
– misorude
Nov 22 at 15:08
@misorude Yeah, I did this earlier, but I still can not specify the size of this padding-right. I need to use the width of the image (or height of the parent div) as a parameter shape.
– Iuri Dias
Nov 22 at 15:27
@misorude Yeah, I did this earlier, but I still can not specify the size of this padding-right. I need to use the width of the image (or height of the parent div) as a parameter shape.
– Iuri Dias
Nov 22 at 15:27
@Rimble, I did that you was say.
– Iuri Dias
Nov 22 at 15:28
@Rimble, I did that you was say.
– Iuri Dias
Nov 22 at 15:28
add a comment |
1 Answer
1
active
oldest
votes
0
This could be a possible solution if i understood right the problem.
Try this using flex properties :
#parent{
display : flex;
//optional alignment
align-items: center;
}
#inputSearch{
flex-grow: 1;
}
#imgSearch{
width: 80%;
height: 80%;
}
answered Nov 22 at 13:51
juxhin bleta
598
I cant change the parent's atributtes because i am using a project pattern. Therefore, i need to keep the parent's display as block. There are other elements next the parent div, i only can change the children atributtes. Even so, thank you for help!
– Iuri Dias
Nov 22 at 14:18
add a comment |
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%2f53432028%2fis-it-possible-to-set-the-width-of-an-element-based-on-the-height-of-the-parent%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
This could be a possible solution if i understood right the problem.
Try this using flex properties :
#parent{
display : flex;
//optional alignment
align-items: center;
}
#inputSearch{
flex-grow: 1;
}
#imgSearch{
width: 80%;
height: 80%;
}
answered Nov 22 at 13:51
juxhin bleta
598
I cant change the parent's atributtes because i am using a project pattern. Therefore, i need to keep the parent's display as block. There are other elements next the parent div, i only can change the children atributtes. Even so, thank you for help!
– Iuri Dias
Nov 22 at 14:18
add a comment |
0
This could be a possible solution if i understood right the problem.
Try this using flex properties :
#parent{
display : flex;
//optional alignment
align-items: center;
}
#inputSearch{
flex-grow: 1;
}
#imgSearch{
width: 80%;
height: 80%;
}
answered Nov 22 at 13:51
juxhin bleta
598
I cant change the parent's atributtes because i am using a project pattern. Therefore, i need to keep the parent's display as block. There are other elements next the parent div, i only can change the children atributtes. Even so, thank you for help!
– Iuri Dias
Nov 22 at 14:18
add a comment |
0
0
0
This could be a possible solution if i understood right the problem.
Try this using flex properties :
#parent{
display : flex;
//optional alignment
align-items: center;
}
#inputSearch{
flex-grow: 1;
}
#imgSearch{
width: 80%;
height: 80%;
}
answered Nov 22 at 13:51
juxhin bleta
598
This could be a possible solution if i understood right the problem.
Try this using flex properties :
#parent{
display : flex;
//optional alignment
align-items: center;
}
#inputSearch{
flex-grow: 1;
}
#imgSearch{
width: 80%;
height: 80%;
}
answered Nov 22 at 13:51
juxhin bleta
598
answered Nov 22 at 13:51
juxhin bleta
598
answered Nov 22 at 13:51
juxhin bleta
598
answered Nov 22 at 13:51
juxhin bleta
598
598
I cant change the parent's atributtes because i am using a project pattern. Therefore, i need to keep the parent's display as block. There are other elements next the parent div, i only can change the children atributtes. Even so, thank you for help!
– Iuri Dias
Nov 22 at 14:18
add a comment |
I cant change the parent's atributtes because i am using a project pattern. Therefore, i need to keep the parent's display as block. There are other elements next the parent div, i only can change the children atributtes. Even so, thank you for help!
– Iuri Dias
Nov 22 at 14:18
I cant change the parent's atributtes because i am using a project pattern. Therefore, i need to keep the parent's display as block. There are other elements next the parent div, i only can change the children atributtes. Even so, thank you for help!
– Iuri Dias
Nov 22 at 14:18
I cant change the parent's atributtes because i am using a project pattern. Therefore, i need to keep the parent's display as block. There are other elements next the parent div, i only can change the children atributtes. Even so, thank you for help!
– Iuri Dias
Nov 22 at 14:18
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53432028%2fis-it-possible-to-set-the-width-of-an-element-based-on-the-height-of-the-parent%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
Can you give an example on CodePen or something as to what your current situation is and what you are looking for specifically with a screenshot or different image. Because recreating this on CodePen as is doesn't really give me any insight as to what the problem is.
– Rimble
Nov 22 at 13:45
Sure! I just did that.
– Iuri Dias
Nov 22 at 14:48
I’d simply position the image absolute, and have the input field go over the full width underneath it, with an appropriate padding-right so that the input field content does not go under the image …
– misorude
Nov 22 at 15:08
@misorude Yeah, I did this earlier, but I still can not specify the size of this padding-right. I need to use the width of the image (or height of the parent div) as a parameter shape.
– Iuri Dias
Nov 22 at 15:27
@Rimble, I did that you was say.
– Iuri Dias
Nov 22 at 15:28