Is it possible style buttons in one div?
I want to style buttons when clear buttons appear on the backend.
When the second button disappears the first button should be width: 100%;. Any solution? And I tried button ~ button and its only works in last-child.
Please check the snippet
.container button + button:first-child {
width: 60%;
float: left;
}
.container button + button:last-child {
width: 40%;
float: left;
}
<div class="container">
<button>Visit</button>
<button>Clear</button>
</div>
Use Flexbox:
.container {
display: flex;
}
.container button:first-child {
width: 40%;
}
.container button:last-child {
flex-grow: 1;
}
<div class="container">
<button>Visit</button>
<button>Clear</button>
</div>
Related
I'm trying to create a panel with two sections, as shown above: a light green section on the left and the dark green wrapped around the light green box.
How can I achieve this? I tried putting a span with inline-block inside a div and tried height and width properties but it doesn't produce the desired effect.
Flexbox can help with this.
Create a container with display: flex property
Create two divs within this container and add a flex-basis property to each that equals panel width of 100% or desired number of pixel length
E.g. .panel { width = 500px; }, .div1 { flex-basis: 100px; }, .div2 { flex-basis: 400px; }
E.g. .panel { width = 100% }, .div { flex-basis: 25%; }, .div2 { flex-basis: 75%; }
Style divs (sections) accordingly - height, background-color, border, etc.
Within the second div (right section) add your icons and style as well
I used FontAwesome CDN for the icons.
Hope this helped, you can also see this Codepen I created.
HTML
<div class="container">
<div class="div1"></div>
<div class="div2">
<i class="fas fa-plus-square"></i>
<i class="fas fa-sync-alt"></i>
</div>
</div>
CSS
.container {
display: flex;
}
.container div{
height: 25px;
width: 100%;
}
.div1{
background-color:#abffb9;
flex-basis: 2%;
border: 1px solid #5cb85b;
}
.div2{
background-color:#5cb85b;
flex-basis: 98%;
text-align: right;
border: 1px solid #5cb85b;
}
.fas {
color: #fff;
}
Is this what you are after?
Flexbox is realy good for just this, you can read more about flexbox here.
.wrapper {
display: flex;
padding: 2px;
background-color: green;
}
.green-box {
flex: 0;
min-width: 20px;
background-color: Chartreuse;
}
.filler {
flex: 1;
text-align: right;
}
<div class="wrapper">
<div class="green-box">
</div>
<div class="filler">
Icon
</div>
</div>
I have a text inside the div with class message, and I want to move the div to vertical center with respect to parent div with class banner.
Please refer the JsFiddle here - https://jsfiddle.net/1rbhuwfs/
Whenever I try to set margin-bottom, it goes increasing beyond the parent div indefinitely, which I don't understand why. The parent div has display: block on it.
I prefer not to have any position: absolute in my code.
Thanks in advance.
Check below snippet, I have added
.banner > div {
vertical-align:middle;
}
and removed margin-bottom: 40px; form .message.
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.banner > div {
vertical-align:middle;
}
.img-1-holder {
display: inline-block;
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
display: inline-block;
}
.img2 {
height: 100px;
}
.message {
display: inline-block;
}
<div class="banner">
<div class="img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="message">
Some random text here
</div>
<div class="img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
Check jsfiddle, put parent to display:table and child to display: table-cell and vertical-align: middle.
https://jsfiddle.net/ggq39acr/
You can refer this too. https://www.w3.org/Style/Examples/007/center.en.html
The solutions suggest in this link works in general ! :D
One way to vertically center without position: absolute or using tables - and respecting your margin-bottom on image and text-div - is to use flexbox:
Add/change this:
.banner {
display: flex;
align-items: center;
}
https://jsfiddle.net/5496yk1k/
you can use flexbox fiddle
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: flex;
justify-content: center;
align-items: center;
}
In this case you can remove the margins on
.img1 {
height: 70px;
}
.message {
display: inline-block;
}
You can try to include a common class suppose img-inline with inline css properties and manage other css properties in your classes .img-1-holder, .img-2-holder and .message
Here is a sample code for you. You can try it in your jsfiddle. Sorry I am not posting fiddle link here.
HTML CODE
<div class="banner">
<div class="img-inline img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="img-inline message">
Some random text here
</div>
<div class="img-inline img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
CSS CODE:
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.img-1-holder {
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
margin-left: 15px;
}
.img2 {
height: 100px;
}
.img-inline {
display: inline-block;
vertical-align: middle;
}
Hope this helps :)
I want put textbox with button side by side.
But with next rules:
1) TextBox must fill all free width space of screen (leftpanel div)
2) Button have fixed width and height and must always stick to the right edge of browser. (rightpanel div)
My CSS style:
<style type="text/css">
div.centerpanel {
display: inline-block;
width: 100%;
height: 100%;
}
.leftpanel {
background: red;
display: inline-block;
width: 90%;
float: left
}
.rightpanel {
background: blue;
display: inline-block;
width: 10%;
float: left
}
</style>
in full screen it works well. But if i make browser window shortly by dragging edge/corners button partially trimmed.
sample (near full screen):
sample (after dragging small screen):
what i want:
There are two ways to achieve your layout,
First flexbox
.flexwrap {
display: flex;
width: 100%:
}
.flexwrap input {
flex: 1 1;
margin-right:10px;
}
<div class=flexwrap>
<input>
<button>+</button>
</div>
Second table
.tablewrap {
display: table;
width: 100%;
}
.tablewrap .t-cell {
display: table-cell;
}
.tablewrap .t-cell input {
width: 100%;
}
.tablewrap .t-cell:first-child{
padding-right:20px;
}
.tablewrap .t-cell:last-child {
width:20px;
}
<div class=tablewrap>
<span class=t-cell>
<input>
</span>
<span class=t-cell>
<button>+</button>
</span>
</div>
I have the following HTML:
<div class='container'>
<div class='first'>test</div>
<div class='second'>test</div>
</div>
accompied by the following CSS:
.container {
display: table;
width: 90%;
background: yellow;
}
.first {
display: table-cell;
background: red;
}
.second {
display: table-cell;
background: blue;
}
(Also: http://codepen.io/zssz/pen/GodBqQ)
How can I achieve that the second/blue div sits right below the first/red div, by ONLY changing the CSS of .second?
Thank you
(I have no control over the container CSS in this situation)
You can do this:
CSS
.second {
display: table-row;
background: blue;
}
DEMO HERE
I've been trying to figure this out for a long time and I can't seem to get it. I have the following HTML:
<div class="b">
<button>Show when I hover</button>
</div>
<div class="A">When I hover over this the background should change</div>
with the corresponding CSS:
.b {
float: right;
display: none;
}
.A {
float: left;
display: inline;
width: 1000px;
}
.A:hover {
background: gray;
}
.A:hover + .b {
display: block;
}
What I'm trying to do is whenever I hover over A the b div and corresponding button should show. In addition, I want it such that when my mouse is on the button, the background of A is still gray as if I was hovering over it. I can't seem to figure this out. Any ideas?
Relevant JSFiddle: http://jsfiddle.net/sn19k1wz/3/
You can do this by changing position of A and B
<div class="A">When I hover over this the background should change</div>
<div class="b">
<button>Show when I hover</button>
</div>
Change the div positions, hovering div tag should be the first one
Like this :
<div class="A">When I hover over this the background should change</div>
<div class="b">
<button>Show when I hover</button>
</div>
Demo URL
Try like this: Demo
.A {
display: inline-block;
width: 1000px;
position: relative;
}
.b {
display: none;
position: absolute;
z-index: 999;
right: 0;
top:6px;
}
.A:hover {
background: gray;
}
.A:hover + .b {
display: block;
background: red;
cursor:pointer;
}