I have a div containing an input and an a element:
.wrapper {
width: 300px;
display: inline-block;
}
.custom-input {
display: block;
width: 100%;
}
.button {
width: 20px;
height: 20px;
background-color: #ccc;
display: block;
}
<div class="wrapper">
<input class="custom-input" type="text" />
<a class="button"></a>
</div>
Here's a jsfiddle.
I want my input and my button inline. The input with button always has 100% width of the wrapper. In some cases, I want to remove the button. The input then has 100% width of the wrapper div.
It is only inline when I use inline-flex for the wrapper. But I want it to be able to run on old browsers (IE 8-9), and I want my input and my element to always have 100% width of wrapper.
How can I do it?
Using width: 100% on your input will make it take all the horizontal space available, pushing the button to the line below.
This should work :
.wrapper{
width: 300px;
display: inline-block;
}
.custom-input{
display: inline-block;
}
.button{
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
Here's the updated jsfiddle : http://jsfiddle.net/k6yhtf92/3/
try to use display: inline-block instead display:block
updated css
.wrapper{
width: 300px;
display: block;
}
.custom-input{
display: inline-block;
}
.button{
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
Related
I am trying to put an input right after a text ends. (Not after the div that contains the text).
Something like this:
But I don't know how to do it.
I tried to place it with an absolute position but when I resize the window it overlaps the text and input.
This is my css:
.div-heading {
position: relative;
}
.heading-2 {
font-size: 52px;
}
.search{
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: -89px;
margin-left: 239px;
padding-left: 10px;
}
Any ideas?
You can achieve it through display: inline:
div {
width: 300px;
word-break: break-all;
white-space:normal;
}
label, input {
display: inline;
}
input {
width: 80px;
}
<div>
<label for="spd">VERYVERYVERYVERYVERYVERYVERYVERYVERYVERYVERYVERYVERYERYVERYVERYVERYVERYVERY</label> <input type="text" name="spd" id="spd" />
</div>
I have these responsive boxes side by side with an image and text inside. However, some of the boxes are not aligned properly due to the text. I have tried to change this with no success.
Here is an image of the problem: https://imgur.com/a/EpXzG4i
Here comes the HTML:
<div id="grid">
<span class="box">
<i class="fa fa-file-text fa-3x"></i>
<div class="service">Super awesome box</div>
</span>
...
</div>
And the CSS:
#grid {
width: 100%;
}
#grid .box {
display: inline-block;
width: 135px;
height: 135px;
margin: 11px;
background-color: #b7cfdd;
}
#grid .box .service {
font-family: "Roboto", sans-serif;
font-size: 17px;
color: #555;
}
#grid .box i {
margin-top: 20px;
color: #00406e;
}
Here you can see the problem in action: http://jsfiddle.net/et72powz/3/
Is there an easy fix to this problem?
Your HTML is invalid. A division tag, cannot be nested inside of a span. Make the span div and you'll be fine.
Make use of vertical-align to line them all up nicely.
http://jsfiddle.net/et72powz/15/
#grid .box {
display: inline-block;
width: 135px;
height: 135px;
margin: 11px;
background-color: #b7cfdd;
vertical-align: top
}
The problem coming from display: inline-block replace it with float: left and it will act as you want check the updated Fiddle.
i got a solution for you but i don't really know the actual behaviour of why this works.. i just deleted some of your css .. try this css code..
#grid {
width: 100%;
}
#grid .box {
display: inline-block;
width: 135px;
height: 135px;
margin: 11px;
background-color: #b7cfdd;
}
#grid .box i {
margin-top: 20px;
color: #00406e;
}
Use flexbox for your grid.
#grid {
width: 100%;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
http://jsfiddle.net/et72powz/8/
Change the height to min-height and also assign them a position(vertical alignment) by giving vertical-align:top;
#grid .box {
display: inline-block;
width: 135px;
min-height: 140px;
margin: 11px;
background-color: #b7cfdd;
vertical-align:top;
}
Also a fiddle : http://jsfiddle.net/et72powz/11/
I am wanting to put a child image, with its size adjusted, inside a parent div. How do I get this parent div's with to be the same, and not bigger, than the child image? See the below snipppet for an example. Thanks.
div {
border: 1px solid blue;
width: auto;
height: auto;
display: inline-block;
overflow: auto;
}
img {
background-color: orange;
width: 80%;
height: 80%;
overflow: auto;
}
<div>
<img src="https://www.python.org/static/opengraph-icon-200x200.png" />
</div>
In that case, you need to have the width of the img to be 100% and have the width or something of 80%:
div {
border: 1px solid blue;
width: auto;
height: auto;
display: inline-block;
overflow: auto;
}
img {
background-color: orange;
display: block;
}
<div>
<img src="https://www.python.org/static/opengraph-icon-200x200.png" />
</div>
Preview
The fact that you are using a percentage for the img size is the problem. You are saying that your image has to be 80% of the parent div therefore you are explicitly telling the img not to fill the whole div.
The other problem you have is that an image is an inline element, if you change that to block it will remove the extra space at the bottom of the image.
See the CSS
div {
border: 1px solid blue;
display: inline-block;
}
img {
background-color: orange;
display: block;
width: 90px;
height: 90px;
}
Also a Pen
I hope it helps!
Why the second DIV when using display: inline-block is pushing downward?
Here is my code what I have tried.
HTML
<div class="div1"></div><div class="div2"></div>
CSS
.div1{
width: 400px;
height: 500px;
background: #F00;
display: inline-block;
}
.div2{
width: 300px;
height: 200px;
background: #00F;
display: inline-block;
}
jsFiddle: http://jsfiddle.net/enve/fbreJ/
I know that it works using float: left, but I can't use it in what I am trying to do.
Because that's the way inline-block elements work.
To fix that, just add a vertical aligment:
.div2 {
vertical-align: top;
}
jsFiddle Demo: http://jsfiddle.net/enve/fbreJ/1/
http://jsfiddle.net/dsUnc/
However when I replace an img tag with text - elements are positioned like expected (next to each other with the same height).
Happens on all browsers.
How to fix it?
float: left is not an option
HTML:
<div id='main'>
<div id='first'>
<img src='https://www.google.ru/images/icons/product/chrome-48.png' height='30'>
</div>
<div id='second'>Text</div>
</div>
CSS:
div {
border: 1px solid gray;
height: 30px;
}
#first {
display: inline-block;
height: 30px;
}
#second {
display: inline-block;
height: 30px;
}
Add vertical-align: top to do it without float.
jsFiddle
#first {
display: inline-block;
height: 30px;
vertical-align: top;
}
#second {
display: inline-block;
height: 30px;
vertical-align: top;
}
Make the container with relative position and the div you want to position with absolute position with top:0;
http://jsfiddle.net/uqAGt/
Just add float: left or vertical-align: top to your child divs:
Demo: http://jsfiddle.net/dsUnc/2/
Demo: http://jsfiddle.net/dsUnc/5/