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;}
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I have the following code, and I can't get the text in the header-loggedout div to display centered within the borders. If I adjust the height, vertical margins, or padding of the div it always ends up moving the bottom border down for some reason. The image and text just won't align properly. How can I keep the text and image in (at least roughly) the same position but vertically align both to the middle between the top/bottom borders?
Here's a fiddle.
.header-lower {
position: relative;
display: table;
z-index: 0;
padding: 10px 0px;
width: 100%;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.header-logo {
display: table-cell;
text-align: left;
margin: 0 0 20px;
vertical-align: inherit !important;
}
.header-logo a {
display: inline-block;
float: left;
max-width: 100%;
line-height: 0;
}
.header-loggedout {
font-size: 26px;
vertical-align: middle;
}
<div class="header-lower">
<div class="header-logo">
<a href="#">
<img title="" alt="alt" src="http://placehold.it/310x39" />
</a>
</div>
<div class="header-loggedout">
Test Text
</div>
</div>
You can set display of .header-loggedout as table-cell:
.header-loggedout {
font-size: 26px;
vertical-align: middle;
display: table-cell;
}
Fiddle Here
replace this class
.header-lower {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
display: table;
padding: 10px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 100%;
z-index: 0;
}
You can use absolute positioning
Fiddle here
.header-loggedout {
font-size: 26px;
position:absolute;
top:50%;
right: 20px;
transform: translateY(-50%);
}
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.
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>
I have the following structure:
<div class="wrap">
<div class="menu">
<div class="item">
Menu
<div class="submenu">
<div class="submenuitem">Submenu</div>
</div>
</div>
</div>
</div>
and so far the following CSS:
div.wrap {
background: #eee;
height: 80px;
}
div.menu {
margin-left: 50px;
background: #36e;
}
div.item {
background: #d00;
color: #fff;
line-height: 40px;
padding: 0px 20px;
font-size: 16px;
display: inline-block;
margin-left: 50px;
}
div.item:hover {
background: #b00;
}
div.submenu {
display: none;
background: #0b0;
height: 40px;
position: absolute;
right: 0%;
top: 50%;
min-width: 300px;
}
div.item:hover div.submenu {
display: inline-block;
}
div.submenuitem {
line-height: 40px;
padding: 0px 20px;
background: #b00;
color: #fff;
display: inline-block;
}
JSFiddle
The behaviour I'm after is that the width of submenuitem expands to fit its textual content, but that it can use at most the width of wrap for expanding. It should also be positioned directly under item unless the width of submenuitem will be larger than the distance from its original position to the right end of wrap. Thereafter it should expand to the left until it meets the left edge of wrap.
As you can see this succeeds perfectly when I can know the distance from submenuitem's original position to the right end of wrap by setting right: 0%; min-width: 300px; on submenuitem, but I want to do this in a way that doesn't require knowing that distance.
I have been trying to craft or find a solution to this for the past few days and have not managed to get any closer. Is it even possible with pure CSS to begin with?
Is this something you want? check this one nd let me know.
http://jsfiddle.net/zmcEC/9/
div.wrap {
width: 400px;
background: #eee;
position: relative;
height: 80px;
}
div.submenu {
display: none;
background: #0b0;
height: 40px;
position: absolute;
right: 0;
top: 40px;
left:0;
}