I have two divs, which I aligned side by side, inside a container. I want to make both of them height 100%. I do that and it works fine, but after i change the left div's border or padding it seems to alter the height so it's larger than the right div. Is there any idea how to fix this problem?
.container {
height: 200px;
width: 100px;
}
.one {
height: 100%;
width: 100px;
background-color: green;
float: left;
}
.two {
height: 100%;
width: 100px;
background-color: red;
float: right;
}
Thanks in advance.
Flex is a good solution for what you want to achieve
.container {
display: flex;
height: 200px;
width: 100px;
}
.one {
flex: 1;
min-height: 100vh;
width: 100px;
background-color: green;
float: left;
}
.two {
flex: 1;
min-height: 100vh;
width: 100px;
background-color: red;
float: right;
}
Related
I want my ul to get the full height of the div but its not taking the divs entire height so I need to change the ul to take full height of the div
.header-wrapper {
display: inline-flex;
width: 100%;
height: 50px;
top: 0;
left: 0;
position: fixed;
background: linear-gradient(base.$secondaryColor, base.$primaryColor);
}
.top-nav-bar {
height: 100%;
float: right;
background-color: green;
li {
display: inline-flex;
list-style-type: none;
color: base.$whiteColor;
margin-left: 10px;
margin-right: 10px;
align-items: center;
justify-content: center;
background-color: red;
height: 50px;
width: 100px;
cursor: pointer;
&:hover {
color: base.$blackColor;
background-color: base.$whiteColor;
}
}
}
Here is my code
I am trying to create a gui application to control the volume level of my machine using Qt5 and C++.
This is what I kind of want to achieve.
So, I created the basic layouts and added the QSlider, and then used the following stylesheet to style it:
QSlider::groove:horizontal
{
height: 16px;
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}
I got the following result:
First the handle is an eclipse, and not a circle. But I wanted to reduce the height of the groove, so I modified the above stylesheet:
QSlider::groove:horizontal
{
height: 10px; // modified here
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}
And now, the handle of the slider became a rectangle.
Can anyone please answer what's causing it to behave like this, or point me to some docs.
your border-radius should be proportional to the length and width to become a circle.
Try this style :
QSlider::groove:horizontal {
border-radius: 1px;
height: 3px;
margin: 0px;
background-color: rgb(52, 59, 72);
}
QSlider::groove:horizontal:hover {
background-color: rgb(55, 62, 76);
}
QSlider::handle:horizontal {
background-color: rgb(85, 170, 255);
border: none;
height: 40px;
width: 40px;
margin: -20px 0;
border-radius: 20px;
padding: -20px 0px;
}
QSlider::handle:horizontal:hover {
background-color: rgb(155, 180, 255);
}
QSlider::handle:horizontal:pressed {
background-color: rgb(65, 255, 195);
}
And This is for your style (I change margin and padding)
QSlider::groove:horizontal
{
height: 16px;
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -4px 0;
padding: -4px 0px;
border-radius:11px;
border: 3px solid #ffffff;
}
How to set transition delay on li:after so that it aligns with transition for li:hover? Seems like it doesn't work when transition: all 0.3s; is set, because it appears instantly.
Here is the Fiddle
Maybe if you do something like this, where you first set up the :after and then show it on :hover
body {
background-color: #f01;
}
ul {
background-color: #fff;
}
li {
position: relative;
list-style-type: none;
display: inline;
line-height: 2em;
padding: 5px;
transition: all 1s;
}
li:hover {
background-color: #414C52;
transition: all 1s;
}
li:after {
top: 25px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #414C52;
margin-left: -10px;
transition: all 1s;
border-width: 10px;
opacity: 0;
}
li:hover:after {
opacity: 1;
transition: all 1s;
}
a {
padding: 12px 10px color: #333;
}
<ul class="nav navbar-nav">
<li>asdfasdf</li>
<li class="active">ffffft</li>
</ul>
yes, it should do it but you need an inital li:after before your li:hover:after
Here is the Fiddle Link
.homeFirstSection {
float: left;
width: 100%;
height: 500px;
position: relative;
}
.home_left_bar {
float: left;
background: #f67777;
width: 4%;
height: 100%;
z-index: 5;
position: fixed;
}
How I can set the height of fixed part to height of its wrap?
Found a very simple solution only setting the css height to inherit.Here is the Fiddle and Code
.homeFirstSection {
float: left;
width: 100%;
height: 200px;
position: relative;
}
.home_left_bar {
float: left;
background: #f67777;
width: 4%;
height: inherit;
z-index: 5;
position: fixed;
}
I'm trying to build a horizontal list based menu. In this menu, the two left floated menu links are fixed width, while the remaining menu links are floated right.
The issue is I'd like the two fixed width links to stay as is, however the floated right items to be spaced evenly throughout the rest of the available whitespace.
See my fiddle
CSS:
#footer_menu {
margin: 0;
height: 54px;
padding: 0px;
}
#footer_menu ul {
margin: 0;
height: 54px;
padding: 0px;
display: table;
table-layout: fixed;
width:100%;
}
#footer_menu li {
list-style: none;
padding: 0px;
}
#footer_menu .nav_l {
float: left;
display: table-cell;
white-space:nowrap;
}
#footer_menu .nav_r {
float: right;
width:auto;
display: table-cell;
white-space:nowrap;
}
HTML:
<div id="footer_menu">
<ul>
<li class="nav_l">Link</li>
<li class="nav_l">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
</ul>
</div>
Anyone have any ideas?
Try this - DEMO
#footer_menu {
margin: 0;
height: 54px;
padding: 0px;
display: table;
width: 100%;
}
#footer_menu ul {
margin: 0;
height: 54px;
padding: 0px;
display: table-row;
background: #ccc;
}
#footer_menu li {
list-style: none;
padding: 0px;
}
#footer_menu .nav_l {
display: table-cell;
white-space:nowrap;
width:50px;
padding:5px;
border: 1px solid #000;
}
#footer_menu .nav_r {
width:auto;
display: table-cell;
white-space:nowrap;
padding:5px;
border: 1px solid #c00;
}