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
Related
why when giving a display: flex and a justify-content: center, the child items don't all appear in the parent div?
I have 15 child divs
HTML
<div class="container">
<div class="dv">1</div>
<div class="dv">2</div>
<div class="dv">3</div>
<div class="dv">4</div>
<div class="dv">5</div>
<div class="dv">6</div>
<div class="dv">7</div>
<div class="dv">8</div>
<div class="dv">9</div>
<div class="dv">10</div>
<div class="dv">11</div>
<div class="dv">12</div>
<div class="dv">13</div>
<div class="dv">14</div>
<div class="dv">15</div>
</div>
when giving a justify-content: center the divs at the beginning of the list disappear
css
.container{
display: flex;
align-items: center;
justify-content: center;
height: 90%;
overflow: auto;
white-space: pre-line;
border: 10px solid rgb(70, 70, 199);
width: 500px;
height: 500px;
background-color: blue;
}
.dv{
margin: 19px;
padding: 10px;
height: 90%;
background-color: white;
border: solid 1px black;
border-radius: 10px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
color: black;
width: 500px;
height: 400px;
}
Apparently the total width of the child dvs should not exceed that of the containing parent, and in order to handle such cases we use the flex-wrap property
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.
If a user is signed up to my site, in their login area I have 3 divs as follows:
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
These divs all have a width of 32% and sit inline with each other.
#psts-cancel-link {
background: white;
border-left: 3px solid #ccc;
padding: 1em;
width: 32%;
min-height: 270px;
float: left;
}
.psts-receipt-link {
background: white;
border-left: 3px solid #ccc;
min-height: 270px;
float: left;
width: 32%;
margin: 0 10px;
padding: 20px;
}
#psts-signup-another {
background: white;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
width: 32%;
min-height: 270px;
float: left;
}
When a user is not signed up, only one of the divs displays:
<div id="psts-signup-another"></div>
Is it possible to change the styling of this so that it's width is 100% when div1 and div2 aren't displayed?
So far I have tried this, but with no success:
#psts-cancel-link ~ .psts-receipt-link ~ #psts_existing_info #psts-signup-another {
width:100%;
}
Table Layout Implementation
Use a table layout. Specify display: table on the parent and display: table-cell on the child elements.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
display: table-cell;
word-wrap: break-word;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.container {
display: table;
width: 100%;
table-layout: fixed;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
Flexbox Layout Implementation
You can also use flexbox which expands and shrinks the child items according to the parent container.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
flex: 1;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
flex: 1;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
flex: 1;
}
.container {
display: flex;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
You could simply use :first-child if it's indeed the only child in the second case.
#psts-signup-another:first-child {}
You can use the adjacent selector. Have a look at the following snippet:
#psts-signup-another {padding: 5px; background: #f99;}
div + div + #psts-signup-another {padding: 5px; background: #99f;}
<h2>Div when three divs are present</h2>
<div class="theDivs">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
<h2>Div when three divs are not present</h2>
<div class="theDivs">
<div id="psts-signup-another"></div>
</div>
i think you should use another container div with a new class when user logout.
Logged:
<div class="container">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logout:
<div class="container logout">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
CSS:
.container.logout > div {
display:none;
}
.container.logout > .psts-signup-another {
display:block;
}
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; }