Hi. I have to inputs and each one is within a div and those divs are within a larger container div. My problem is those inputs are smaller than their container divs. I don’t know how to expand them to have equal size of height with their container divs. Below is my part of code.
Thank you very much for your answer. Could you please tell me what have you changed in my code? Your changes in my code seems to work correctly but mine doesn’t.
Evaluate your original post code (that does not work)
against the code I provided. Look at the source code line order of the HTML
and the attributes of each CSS line. Note, for example that <center> tags were removed because they have been deprecated from the more recent HTML specs.
It they look the same after that, then let me know.
BTW, how much HTML/JS/CSS coding experience have you had?
I tried to use as much of your original code as I could
with the changes to make it work!
<center> is obsolete for centering elements. Discard it.
Next, there is no need to close the <input> with </input>.
Third, I don’t see you have targeted the div with a class of inputdiv with any styles. I’m assuming that .inputdiv would be what you would want to target to distribute the heights (likely with percentage values).
Fourth, I find it very hard to read HTML markup that looks like this:
Fifth, you have a stylesheet, but you also have a border set on the div called group that you have absolutely positioned to its child element (the form inputs). Keep all of your CSS in one spot.
Sixth, you have no use for unique classes for your form inputs. They are both set to border-box.
My opinion is that this code should be scrapped and re-written to be much more simple.
What you have could be condensed to 10 lines or less on the HTML side.
Do you have a live site example or screenshot that shows how the heights are distributed unevenly?
Thank you very much for your answer. I want those two search bars to be shown in the center of the web page and by omitting tag, they will be shown to the left of website thus I can not omit them. Or do you have a better suggestion for that? As you asked me about my experience in implementing html/css I can tell you I am inexperienced and amateur.
You could center a block by setting its horizontal margins to auto, and if you display it as a css table it will center without the need of an explicit width set.
E.g:
#tfnewsearch{ /* the form */
display: table;
margin: 0 auto 0 auto;
}
You could also center the form’s direct child “tfheader” by setting the text-align to center it’s (the form’s) inline content and then make the child an inline-block. Then the child could get the left aligning back for its own content.
E.g:
#tfnewsearch{ text-align:center;} /* Without a width, or auto, the form (a block) will expand and center its content in available space */
#tfheader{
background-color:#c3dfef;
position:relative;
top:135px;
height:250px;
display:inline-block; /* as inline-block it will shrink-wrap its content and obey current text-aligning */
text-align:left; /* if needed: reset the text-align to what you use */
}
I think this HTML format is sufficient for what you are trying to achieve, but maybe @erik_j has selflessly already directed you. This is similar to what @jmrker posted, but I want to simplify it even further:
I don’t know what .tfclear is there for. Do you have a reason for that? If not, I can’t imagine that this needs to be more than those 6 lines. Maybe you would like to add <label>s to the form inputs.
Without seeing your test site to see why you have absolute positioning, I will lobby how you might amend your CSS targets as follows (similar styles as Erik):
#tfnewsearch {
display: table;
margin: 0 auto 0 auto;
text-align:center;
}
#inputdiv {
background-color:#c3dfef;
position:relative; /* left this until we know why you have this positioned like this ... probably not needed */
top:135px;
height:250px;
display:inline-block; /* as inline-block, it will shrink-wrap its content and obey current text-aligning */
}
input {
height:40%; /* sample height of inputs to occupy. adjust as needed. */
width:100%;
}
Will you be able to remember what tfq2b is? If I was the author, I might call it cityinput or something like that.
Do you have other code for this page or a screenshot of what you’re working on?
Thank you very much for your helpful response. I want to implement two search bars exactly the same as in the https://www.yelp.co.uk/london website. I used your code in my implementation but the problem is those search bars aren’t shown horizontally near each other. second, I used .group class in my code because I wanted to create two search bars and two titles that are all in the related smaller div then I want those divs to be shown horizontally thus I created an other larger div “.group” in order to contain all of them and I display it as the table and the I display the other divs inside it to be table-cell because I wanted those divs to be shown horizontally . I don’t know whether my solution is correct or not. Third I don’t know how can I copy all of my total code here that won’t be shown fragmented. Is there any kind of quot here to put my code inside it?
I appreciate if anyone suggest me to improve my code. In addition, unfortunately the button’s height doesn’t expand to have the same height as the other inputs. And the result in https://www.cubicfactory.com/jseditor/ shows me the 2 inputs heights aren’t expanded the same as the label’s height!
but the result in Mozila firefox developer is like the picture below:
I don’t know why there is difference in showing the height of inputs in them! After all I want the search bar to be shown in the middle of the blue div. I would be appreciate if any one helps me to solve this problem.
Please run your code through the CSS & html validators as there are loads of typos in your code and you will learn a lot more by debugging them yourself rather than me pointing them out to you
