I would like for each element to be the same size and align properly, but as you can see, the elements with fewer total weeks are positioned lower by that space.
I can add phantom rows, but I am hoping to make this correction in css. How can I achieve this?
CSS
.miniMonth{
position: relative;
left: 0px;
display: inline-block;
padding: 30px;
width: 340px;
height: 327px;
cursor: pointer;
border: solid black 1px;
}
.contents {
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
background-color: rgb(225, 225, 225);
}
HTML
<div class="contents">
<div class="miniMonth">/* CALENDAR CONTENT*/</div>
...
<div class="miniMonth">/* CALENDAR CONTENT*/</div>
</div>
Use vertical-align: top. The default is baseline which is why all of the bottoms of each .miniMonth's content are aligned.
.miniMonth {
position: relative;
display: inline-block;
vertical-align: top;
padding: 30px;
width: 340px;
height: 327px;
cursor: pointer;
border: solid black 1px;
box-sizing: border-box;
}
You can use flexbox. Set parent div to display: flex and Child (minimonths) to flex: 1 1 auto; this will align them in same row and will be the same height.
Related
I have an HTML structure like:
.container {
width: 100%;
height: 300px;
background-color: blue;
}
.dots-container-wrapper {
width: 100%;
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
.dots-container>ul {
padding: 0;
display: flex !important;
transition: all 0.25s;
position: relative;
margin: 0;
list-style: none;
transform: translateX(0);
align-items: center;
bottom: unset;
height: 100%;
}
.dots-container>ul li {
width: 6px;
height: 6px;
margin: 0 2.5px;
background-color: #fff;
border: none;
border-radius: 50%;
display: inline-block;
opacity: .7;
}
<div class="container">
<div class="dots-container-wrapper">
<div class="dots-container">
<ul class="dots">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The problem is that the div "dots-container" has a property max-width: 55px. But in case the width is less than 55px, I would like to use the real width, however, the div is always 55px. This is a problem because I´m using this in a carousel with dots functionality. When there are 5 pictures, you can see 5 dots aligned in the center, but in case there are fewer pictures, let´s say 2, the div is still 55px and the dots don´t seem to be aligned in the center. See example screenshots.
Your .dots-container is displayed as a block. By default a block will always try to fill up the entire width. By making the container .dots-container-wrapper display flex, it's children will only take up as much space as they need (while also centering them if needed).
.dots-container-wrapper {
width: 100%;
display: flex; // change to flex
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
Here is my fiddle:
http://jsfiddle.net/schmudde/VeA6B/
I cannot remove the top and bottom padding on either side of a font awesome icon:
span {
border: 1px solid red;
line-height: 40%;
}
i {
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
I have attempted specific line-heights and inheriting line-heights. There is something fundamental here I am clearly not understanding.
Use span { line-height: 100%; } so it would fill the block.
The line-height on the span won't help you much as the icon is added to the pseudo class :before on the <i /> tag. This pseudo class will create a somewhat hidden element, if you can call it that.
So if you want to override the css:
.icon-check:before { font-size: 2rem; }
Removing the padding of the icon can be tricky. Maybe if you set the span to display: inline-block you can use height, width in combination with overflow: hidden.
span {
border: 1px solid #FF0000;
display: inline-block;
height: 38px;
overflow: hidden;
position: relative;
width: 45px;
}
i.icon-check:before {
left: 0;
position: absolute;
top: -4px;
}
DEMO
You set borders in span, and line inheriting line-heights in i, that's the problem.
just add borders to i :
span {
line-height: 40%;
}
i {
border: 1px solid red;
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
Fiddle
So I am having a problem with a label in a table cell not making room for itself and instead somehow being behind it's sibling, but taking up space INSIDE of it's sibling?
I've created a JSFiddle to show you what I mean: http://jsfiddle.net/8yzLP/
There's a label that inside a div that's inside a table cell but it's being hidden by it's sibling div.
Here's the structure markup:
<table>
<tr>
<td class="trip-finder-table-cell">
<div class="trip-finder-sort-by-container">
<label>Sort By</label>
<div class="selectList_container trip-finder-sort-by-select" tabindex="0" style="position: relative;">
<p class="selectList_value">
<span class="selectValue_content" style="cursor: pointer; display: block; text-align: left;">Sort Option</span>
<span class="select-carat" style="cursor: pointer;"></span>
</p>
</div>
</div>
</td>
</tr>
</table>
The CSS is a coming from all over, but I've included the necessary elements to recreate the problem in the JS fiddle. They are as follows:
td.trip-finder-table-cell {
width: 17%;
padding: 15px 1.25%;
vertical-align: top;
position: relative;
}
td.trip-finder-table-cell > div[class*=trip-finder] {
position: relative;
}
td.trip-finder-table-cell > div > label:not([for]) {
display: inline;
float: left;
line-height: 30px;
margin-right: 5px;
}
.selectList_value {
padding: 4px 0 4px 10px;
width: 100%;
}
.select-carat {
display: block;
width: 25px;
height: 25px;
position: absolute;
float: right;
right: 3px;
top: 2px;
background: transparent url('../img/global/forms/select-carat.png') no-repeat center center;
}
.selectList_options {
overflow: hidden;
max-height: 250px;
overflow-y: auto;
position: relative;
top: 5px;
background: #fff;
background: rgba(255,255,255,.9);
border: 1px solid #ccc;
}
.selectList_container {
min-width: 110px;
border: 1px solid #cccccc;
background: #fcfcfc;
position: relative;
}
I've tried everything I can think of to get this to work as expected (with the label to the left, and the sibling to the right), but no matter what I try it just doesn't happen. Maybe someone can be kind enough to help me out?
Your floating some elements and some are not
check ur position: xxx and float: xxx lines
mainly these lines should go
.select-carat {
position: absolute;
float: right;
right: 3px;
top: 2px;
}
td.trip-finder-table-cell > div > label:not([for]) {float: left;}
What I am trying to do is, placing the two div blocks, CV and Contact at the bottom of the page, and when hovered over it, they would cover the whole page like they do at this state. I tried to move them with margin-top property, but they didn't behave proper when i hovered on them. Also, I want no scroll bars that is whatever user's screen size is, the boxes always appear in corner of page. Is my solution is valid for this, or do i need some javascript to do these? Here is my jsfiddle:
http://jsfiddle.net/cR9NL/
what positions should I use in this situation: absolute or relative?
html code is still the same, below is my css for you and demo:
CSS
html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }
#container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
#container div {
height: 25%;
width: 15%;
text-align: center;
}
#container>div:hover {
height: 100%;
width: 100%;
text-align: center;
position: absolute;
z-index: 5;
}
#upper-left{
background: #77cc00;
float: left;
border: solid 3px #99ee22;
}
#upper-right{
background: #ffdd22;
float: right;
border: solid 3px #ffff44;
}
#lower-right {
position: absolute;
bottom:0;
right: 0;
background: #55bbff;
border: solid 3px #77ddff;
}
#lower-left{
position: absolute;
bottom: 0;
left: 0;
background: #ff5522;
border: solid 3px #ff7744;
}
#container>div>p {
font-family: Tahoma;
margin: 28% auto;
font-weight: 900;
color: white;
font-size: 30px;
}
DEMO
http://jsfiddle.net/bartekbielawa/cR9NL/2/
Make the lower-left and lower-right divs positioned absolute, with 0 for the bottom value and 0 for the left and right values, respectively.
Fiddle :) :
position:absolute;
bottom:0;
right:0;
http://jsfiddle.net/cR9NL/1/
I am trying to get the text in a span to align vertically in the middle relative to adjacent text. This is easily achieved, however when the text in the span takes up two lines, the text is cut-off.
To solve this problem the span either needs to expand in height when the text takes up two lines, or to somehow align the text to the middle..
A working example of the problem is here http://jsfiddle.net/BxLnN/
Any suggestions or solutions would be greatly appreciated.
The current dimensions of the containing elements must remain the same.
Cheers!
the html
<div class="divisions_container">
<div class="division">
<div class="div_head">
DIVISION 1 <span>SIX WINNING NUMBERS</span>
</div>
<div class="div_head">
DIVISION 2
<div>
<span>FIVE WINNING NUMBERS PLUS ONE OF THE TWO SUPPLEMENTARY NUMBERS</span>
</div>
</div>
</div>
</div>
the css
/* division winnings */
.divisions_container {
font-size: 13px;
padding: 0 10px;
width: 7.4cm;
height: 8.5cm;
}
.div_head {
margin-top: 20px;
text-align: left;
padding-left: 5px;
position: relative;
background-color: #000;
color: #fff;
max-height: 6mm;
font-weight: bold;
font-size: 1.2em;
}
/* # winning numbers */
.div_head span {
font-size: 0.5em;
vertical-align: middle;
font-weight: 200;
border: 1px solid red;
display: inline-block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 100px;
}
You have got the span with position: absolute;. When you make an element absolutely positioned, it becomes a block element without any margins, and you cannot use vertical-align on them, as it works only on inline and inline-block elements.
So I suggest this CSS:
/* division winnings */
.divisions_container {
font-size: 13px;
padding: 0 10px;
width: 7.4cm;
height: 8.7cm;
}
.div_head {
margin-top: 20px;
text-align: left;
padding-left: 5px;
position: relative;
background-color: #000;
color: #fff;
max-height: 6mm;
font-weight: bold;
font-size: 1.2em;
}
/* # winning numbers */
.div_head span {
font-size: 0.5em;
vertical-align: middle;
font-weight: 200;
border: 1px solid red;
display: inline-block;
}
.div_head div {position: absolute;
right: 0;
top: -2px;
bottom: 0;
left: 100px;
}
Fiddle: http://jsfiddle.net/praveenscience/BxLnN/1/
If it's possible for you to set a fixed height to your span, like 20px or so, then you could use: line-height: 20px in your .div_head span style. That would then center the text in your span automatically.
You also don't need to set a display: inline-block and vertical-align: middle that way.
Example: http://jsfiddle.net/BxLnN/2/
Try this works...
You must specify width of span and position to relative and increase or decrease the value of top and left;
.div_head span {
font-size: 0.5em;
vertical-align: middle;
font-weight: 200;
border: 1px solid red;
display: inline-block;
position: relative;
right: 0;
top: -20px;
bottom: 0;
left: 100px;
text-align: left;
width: 200px;
}
Try this works...
You must specify width of span and position to relative and increase or decrease the value of top and left;
.div_head span {
font-size: 0.5em;
vertical-align: middle;
font-weight: 200;
border: 1px solid red;
display: inline-block;
position: relative;
right: 0;
top: -20px;
bottom: 0;
left: 100px;
text-align: left;
width: 200px;
}
The Nice One Is Here
HTML
<div class="Division_Container">
<span>Division 1</span>
<span class="Inner_Container">
six winning numbers
</span>
</div>
<div class="Division_Container">
<span>Division 2</span>
<span class="Inner_Container">
five winning numbers and rest of the nubmers to be displayede winning numbers and rest of the nubmers to be displayed
</span>
</div>
<div class="Division_Container">
<span>Division 2</span>
<span class="Inner_Container">
five winning numbers and rest of the nubmers to be displayede winning n
</span>
</div>
CSS
.Division_Container{display: block; width: 300px; background: #000; color: #fff; margin: 10px;}
.Inner_Container{display: inline-block; vertical-align: middle; left: 200px; width: 200px; margin-left: 20px; border: 1px solid red;}
/* If you want to specify height add following */
.Division_Container:before{content: "."; display: inline-block; height: 100px; vertical-align: middle; visibility: hidden;}