How would I make an input element 100% width that is available? So, 100% width minus the width of any other elements on the same line (not knowing the width of those elements)?
.bg {
padding: 20px;
background: #f5f5f5;
margin-bottom: 25px;
}
input {
width: 100%;
padding: 0.4em;
height: 25px;
border: 1px solid #ccc;
}
.button {
height: 25px;
padding: 0.4em;
background: #ccc;
border: 1px solid #ccc;
text-decoration: none;
}
<div class="bg">
<input type="text" placeholder="100% width - button" /><a class="button" href="#">Click</a>
</div>
<div class="bg">
<input type="text" placeholder="100% width" />
</div>
2 ways do that:
use flexbox, applying display:flex in .bg (.bg2 for demo) and flex:1 (or just flex-grow:1) in input
.bg {
padding: 20px;
background: #f5f5f5;
margin-bottom: 25px;
}
.bg2 {
display: flex;
border: solid red
}
.bg2 input {
flex: 1;
}
input {
width: 100%;
padding: 0.4em;
height: 25px;
border: 1px solid #ccc;
}
.button {
height: 25px;
padding: 0.4em;
background: #ccc;
border: 1px solid #ccc;
text-decoration: none;
}
<div class="bg bg2">
<input type="text" placeholder="100% width - button" /><a class="button" href="#">Click</a>
</div>
<div class="bg">
<input type="text" placeholder="100% width" />
</div>
For older versions of IE, use CSS tables
* {
box-sizing: border-box
}
.bg {
padding: 20px;
background: #f5f5f5;
margin-bottom: 25px;
display: table;
width: 100%;
}
input {
display: table-cell;
width: 100%;
padding: 0.4em;
height: 25px;
border: 1px solid #ccc;
}
.button {
display: table-cell;
height: 25px;
padding: 0.4em;
background: #ccc;
border: 1px solid #ccc;
text-decoration: none;
}
<div class="bg bg2">
<input type="text" placeholder="100% width - button" /><a class="button" href="#">Click</a>
</div>
<div class="bg">
<input type="text" placeholder="100% width" />
</div>
Adding display:flex to the .bg-class works. Flexbox tries to evenly distribute it's child-elements, but since one of the elements has 100% width and there's still another child, the width is adjusted, so everything fits in one row. There is a great guideline for the flex-attribute here.
Related
Notice: height of <div> is 50px, and line-height of <span> is also 50px
when don't apply 'line-height' to <span>, all elements align to the top of parent, when apply 'line-height: 50px' to <span>, why all elements be center vertically?
<div class="block">
<input type="text" class="inline-block-input">
<span class="inline-block-text">*</span>
<input type="text" class="inline-block-input">
</div>
<style>
.block {
display: block;
width: 500px;
height: 50px;
border: 1px solid red;
}
.inline-block-input {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
}
.inline-block-text {
display: inline-block;
width: 50px;
text-align: center;
height: 30px;
line-height: 50px;
}
</style>
To understand what is happening add some text inside the input:
.block {
display: block;
width: 500px;
height: 50px;
border: 1px solid red;
background: linear-gradient(blue, blue) 0 31px/100% 1px no-repeat;
}
.inline-block-input {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
background: transparent;
border:1px solid;
}
.inline-block-text {
display: inline-block;
width: 50px;
text-align: center;
height: 30px;
line-height: 50px;
border:1px solid green;
}
<div class="block">
<input type="text" class="inline-block-input" value="text">
<span class="inline-block-text">*bc</span>
<input type="text" class="inline-block-input" value="text">
</div>
Notice how all the text are aligned the same way due to the fact that the default vertical alignment is baseline. Your element seems to be centred but they are not. They are aligned following the baseline alignment and as a side effect you have your centring.
Change the alignment of the element and you will have a different behavior:
.block {
display: block;
width: 500px;
height: 50px;
border: 1px solid red;
background: linear-gradient(blue, blue) 0 31px/100% 1px no-repeat;
}
.inline-block-input {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
background: transparent;
border:1px solid;
vertical-align:top;
}
.inline-block-text {
display: inline-block;
width: 50px;
text-align: center;
height: 30px;
line-height: 50px;
border:1px solid green;
}
<div class="block">
<input type="text" class="inline-block-input" value="text">
<span class="inline-block-text">*bc</span>
<input type="text" class="inline-block-input" value="text">
</div>
And without line-height on the span you will still have the baseline alignment:
.block {
display: block;
width: 500px;
height: 50px;
border: 1px solid red;
background: linear-gradient(blue, blue) 0 21px/100% 1px no-repeat;
}
.inline-block-input {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
background: transparent;
border:1px solid;
}
.inline-block-text {
display: inline-block;
width: 50px;
text-align: center;
height: 30px;
border:1px solid green;
}
<div class="block">
<input type="text" class="inline-block-input" value="text">
<span class="inline-block-text">*bc</span>
<input type="text" class="inline-block-input" value="text">
</div>
Related questions to get more details:
Vertical-align aligns everything else except self
Inline elements and line-height
Why is the descender “created” when baseline is set to vertical-align?
I have nner and outer div.
normally the parent div wrap the child div but in my case child div have the same width than the parent.
I'm expecting that inner-container width is the same as input and not outer-container
Here an example to well understand
.outer-container{
width: 60%;
margin: auto;
background-color: white;
box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
text-align: center;
margin-top: 40px;
min-height: 200px;
}
.innercontainer {
background-color: #f3f3f3;
}
<div class ="outer-container">
<div class=" innercontainer">
<div>
Last name: <input type="text" name="lname"><br>
</div>
</div>
</div>
Try assigning display:inline-block to your innercontainer element. Try this code.
.innercontainer {
background-color: #f3f3f3;
display: inline-block;
}
You can use display:inline-block; like that :
.outer-container {
width: 60%;
margin: auto;
background-color: white;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
margin-top: 40px;
min-height: 200px;
}
.innercontainer {
background-color: #f3f3f3;
display:inline-block;
}
<div class="outer-container">
<div class=" innercontainer">
<div>
Last name: <input type="text" name="lname"><br>
</div>
</div>
</div>
You just need to add this to .innercontainer:
display: inline-block;
https://codepen.io/amitozdeol/pen/LrbvBo
I have set the opacity of a specific parent element (.container). It is not applying to the container but only to the children (.donate-btn) inside of the container (eventually I want the opposite to be true, for the parent to have reduced opacity and the children to be solid, for which there are multiple answers in SO, but I don't seen anything with the reverse issue). The parent(#main) of the .container has a background image.
When I first started playing with the opacity, the parent div was showing the applied opacity. For some reason it is not and I don't know what changed.
Here is the relevant CSS:
.container {
margin-right: 10%;
margin-left: 10%;
display: block;
padding: 30px;
padding: top 300px;
opacity: .5;
border: 2px solid black;
border-radius: 2em;
}
.donate-btn{
border: 2px solid black;
border-radius: 2em;
display: inline-block;
margin: 15px;
padding: 15px;
width: 200px;
height: 80px;
}
HTML:
<section id="main">
<div class="container">
<form id="sendDonation">
<input id='donation-amt' type="hidden" name="amount">
<button class='donate-btn' data-amt='25'>
<div class='amt'>$25</div>
</button>
<button class='donate-btn' data-amt='50'>
<div class='amt'>$50</div>
</button>
<button class='donate-btn' data-amt='100'>
<div class='amt'>$100</div>
</button>
</form>
</div>
</section>
Here is a jsfiddle.
I set the background to green (rather than an image) for simplicity.
Why is the opacity of the .container not changing, only the children?
How can I get the opacity of the .container to change?
That is because your container doesn't have a background color - the default is transparent.
This illusion make it seem that opacity doesn't affect the container, which in fact it does.
To see the opacity effect clearly, add a solid background color:
#main {
/* background-image: url("img/donate-background.jpg"); */
background-color: green;
background-size: cover;
padding-top: 30px;
padding-bottom: 30px;
}
.container {
margin-right: 10%;
margin-left: 10%;
display: block;
padding: 30px;
padding: top 300px;
opacity: .5;
border: 2px solid black;
border-radius: 2em;
background: white;
}
.donate-btn {
border: 2px solid black;
border-radius: 2em;
display: inline-block;
margin: 15px;
padding: 15px;
width: 200px;
height: 80px;
}
<section id="main">
<div class="container">
<form id="sendDonation">
<input id='donation-amt' type="hidden" name="amount">
<button class='donate-btn' data-amt='25'>
<div class='amt'>$25</div>
</button>
<button class='donate-btn' data-amt='50'>
<div class='amt'>$50</div>
</button>
<button class='donate-btn' data-amt='100'>
<div class='amt'>$100</div>
</button>
</form>
</div>
</section>
Your .container element does have opacity, however there is no content/background/anything inside (directly) on that element to make it opacity.
If (for example) you will set the background of your .container to red you can see that it has opacity:
body {
background: white;
}
#main{
/* background-image: url("img/donate-background.jpg"); */
background-color: green;
background-size: cover;
padding-top: 30px;
padding-bottom: 30px;
}
.container {
margin-right: 10%;
margin-left: 10%;
display: block;
padding: 30px;
padding: top 300px;
opacity: 0.5;
border: 2px solid black;
border-radius: 2em;
background: red;
}
.donate-btn{
border: 2px solid black;
border-radius: 2em;
display: inline-block;
margin: 15px;
padding: 15px;
width: 200px;
height: 80px;
}
<section id="main">
<div class="container">
<form id="sendDonation">
<input id='donation-amt' type="hidden" name="amount">
<button class='donate-btn' data-amt='25'>
<div class='amt'>$25</div>
</button>
<button class='donate-btn' data-amt='50'>
<div class='amt'>$50</div>
</button>
<button class='donate-btn' data-amt='100'>
<div class='amt'>$100</div>
</button>
</form>
</div>
</section>
I would like to set a height of a second DIV based on the height of its sibling which comes above it and also the parent container which has both of these DIVs.
<div class="panel">
<div class="box-one">
<label>
<span class="label-text">Name:</span>
<input type="text" />
</label>
<label>
<span class="label-text">Description:</span>
<textarea name="" id="" cols="30" rows="5"></textarea>
</label>
</div>
<div class="box-two">
<div class="content">....</div>
</div>
</div>
Here is my SCSS code
.panel {
height: 300px;
border: solid 2px black;
background-color: #ccc;
display: table;
width: 50%;
padding: 20px;
}
.panel label {
display: block;
margin-bottom: 1em;
}
.panel label .label-text {
display: block;
}
.panel label input, .panel label textarea {
width: 90%;
}
.panel .box-one, .panel .box-two {
display: table-row;
}
.panel .box-two {
height: 100%;
border: solid 2px black;
overflow: auto;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
}
.panel .box-two .content {
height: 100%;
overflow: auto;
}
Some how I kind of figured a solution with this CSS tables approach, but is there a better approach rather than this? Because this approach needs addtional DIVs to be wrapped around it.
Here is my codepen
http://codepen.io/nirmalkc/pen/jPRWKK?editors=110
BTW, I dont want to go with any javascript based approach.
If anyone, has an alternate for the above with a better apporach, that will be great.
flexbox can do that.
.panel {
height: 300px;
width: 50%;
margin: 10px auto;
border: 1px solid grey;
display: flex;
flex-direction: column;
}
.panel [class*="box"] {
flex: 1 0 auto;
}
.box-one {
background: lightblue;
}
.box-two {
background: lightgreen;
border-top: 1px solid red;
}
.tall {
height: 200px;
}
<div class="panel">
<div class="box-one">
</div>
<div class="box-two">
</div>
</div>
<div class="panel">
<div class="box-one tall">
</div>
<div class="box-two">
</div>
</div>
How to I align text to the right side of the image icon like the one in the example picture.
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
I have to align the title, subsitle and a little square image.
It is easy to use float: left and NOT break the height of red border div.
You only have to add display: table-cell to the .app_top block. Here's the solution:
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
You could use display: inline-block instead.
#main-container {
border: 5px solid #3F3F3F;
width: 270px;
}
.container {
width: 250px;
height: 200px;
border: 5px solid #7F0008;
margin: 5px;
}
.box {
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.img {
background: url(http://placehold.it/100/25);
width: 100px;
height: 25px;
border: 5px solid #EBEAAE;
}
<div id="main-container">
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
</div>
Maybe another option is to put the attribute in a parent div instead of the element
html:
<div id="wrapper">
<div class="twoColumn">
<img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
</div>
<div class="twoColumn">
<p> this is a testingalot test</p>
<button> mybutton </button>
</div>
</div
css:
#wrapper{
border: 1px solid black;
}
.twoColumn{
width: 49%;
float:left;
border: 1px solid red;
}
button{
width: 50px;
height: 40px;
background: red;
}
img{
max-width: 100%;
}
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
Most simple solution would be to change your markup structure by wrapping your spans in a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
.top{
width: 95%;
position: fixed;
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3%;
padding-right: 3%;
border-bottom: 1px solid #b2b2b2;
}
.search{
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background-color: #e3e3e6;
}
.search::-moz-focus-inner {
border: 0;
padding: 0;
}
.items{
background-color: #ffffff;
width: 100%;
padding-top: 50px;
}
.app{
margin-left: 25px;
margin-right: 25px;
}
.app_top div{display:inline-block}
.app_top div span{display:block}
<div class="main">
<div class="top" >
<input type="text" class="search" />
</div>
<!-- Items -->
<div class="items" style="border: 1px solid black; padding-top: ">
<div class="app" style="border: 1px solid red;" >
<div class="app_top">
<div>
<img src="_img1.jpg" width="95"/>
</div>
<div>
<span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
<span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
<span class="" style="border: 1px solid blue;"> </span>
</div>
</div>
<div class="app_bottom">
</div>
</div>
</div>
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
img { float:left; }
.content { overflow:hidden; }