I am using CSS tables to setup a basic grid for a page. The center cell of each row will contain content whereas the first and third "columns" will just be a background color.
The problem I am having has to do with table-cell height. Here is a jsfiddle showing the issue: http://jsfiddle.net/UQUA9/
/*** The essential CSS for the layout ***/
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
width: 100%;
}
html>/**/body .Frame {
height: 100%;
}
.Row {
display: table-row;
height: 1px;
overflow: hidden; /* commenting this out has no effect. */
}
html>body .Row.Expand {
height: auto; /* commenting this out has no effect. */
}
.Row div {
display: table-cell;
}
Note that in the HeaderRow, the ContentColumn has a large gap beneath the end of the text between it and the MenuRow. I don't understand why the table-cell is padding it out like that. As far as I can see, I don't have any padding or margin set that would account for this empty space. I went with CSS table specifically because it will autofit cell height to content and now it isn't working!
Here's a screen shot to illustrate. The extra grey is the problem. The cell should end on the line after the text but there is a bunch of empty grey. The pink MenuRow should be displayed right after the text in the HeaderRow.
I know I am missing something simple or obvious. Any hints are appreciated.
Related
I am currently designing a book website and on the right-hand side want to have a "Table of contents" which is in a fixed position and scrollable. I set the header for my website to "display: table-row" and similarly did so with the table of contents and its internal elements. (A header and a the scrollable list of chapters) As I understand it, display: table row should make a div element fill the remaining height and only the remaining height. [1] However, in this case, the content continues offscreen instead of allowing the user to scroll through it. (You can see the problem on this jsfiddle: https://jsfiddle.net/chrmon2/9wzjckvn/6/)
My css:
#container {
height: 300px;
border: 1px solid black;
}
#header {
background: blue;
display: table-row;
}
#toc h1 {
background: red;
display: table-row;
}
#toc #content {
background: yellow;
overflow-y: scroll;
display: table-row;
}
Is this not a capability of display: table-row or am I doing something wrong? Thanks
https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height
As I understand it, the effect you want is as follows:
When there is remaining space, stretch the table of contents items;
When the space is too small, begin scrolling.
This is an ideal application of CSS Flexboxes. Flexboxes allow you to define how items stretch (or don't), how they align with each other, how they wrap etc.
In this case, we're going to use flexboxes for all the divs in this example.
.container, .toc, .content {
display: flex; /* begins flexbox layout */
flex-direction: column; /* Flexboxes can be aligned from left-to-right
or from top-to-bottom. In this case, we want
them to be top-to-bottom. */
flex-grow: 1; /* On .container, this does nothing. However, for
children of Flexboxes, this tells them to grow
if any space is still available. */
min-height: 0; /* For a more complicated reason, this is necessary
to make flexboxes scroll correctly. This needs
to be set on all the flexboxes in this example. */
}
.toc .content .item {
flex-grow: 1; /* Make items grow when there is room available */
}
.content {
overflow-y: scroll;
}
You can see the effects of this at this JSFiddle.
Just remove display: table-row from #toc #content and add this :
#content{
max-height:200px;
}
height can be as per your requirement.
I would like to have a border bottom that is overrule the container width to the right. So I have two colomns of six col-md-6. The right one has an article as a child. That article has a border-bottom of one px. That should reach the window viewports right. See image bellow:
As you can see, the right vertical line wil show the container end. There should stop the content and let text for example position on a new line. But the border should overrule that so it will reach the viewport right.
Oh and I make use of bootstrap grid if that was not clear!
Code in progress:
http://codepen.io/anon/pen/gaewLB
Borders can't extend beyond their element.
BUT you can use a pseudo-element instead; like so.
.page header,
.page article {
padding: 60px 30px;
/*border-bottom: 1px solid #c2c2c2; */
position: relative; /* positioning context */
}
body {
overflow-x: hidden; /* prevent scrollbars */
}
.page header::after,
.page article::after {
content: '';
position: absolute;
top:100%;
left: 0;
height: 1px;
background: #c2c2c2;
width: 100vw; /* or some other large px/em value */
}
Codepen Demo
I am using a bootstrap carousel. Inside of this, I put images (with unknown width and heigth). The width of the carousel is also unknown because the page is responsive. The heigth is know, for large screens is 500px and for small screens is 300px.
I want to center the images horizontally and vertically in the carousel, for that, I am using this:
HTML
<div class="item">
<div class="containerOut"><div class="containerIn"><img src...></div></div>
</div>
CSS
.item
{
heigth: 500px; /*for small screens is 300px*/
position: relative;
}
.containerOut
{
display: table;
heigth: 100%;
margin: 0 auto; /*for horizontal align*/
}
.containerIn
{
display: table-cell;
vertical-align: middle;
}
img
{
max-width: 100%;
display: block;
vertical-align: middle;
}
This works fine when the img dimensions are smaller than the width and heigth. But when the heigth img is more than 500px or when the img width is more than the width of the carousel, the img overflows the carousel. And I want to resize the image to completely enter in the carousel, in large and small screens.
I try to put max-width: 100% in the containers, but not works because the display: table attribute. I need the display: table attribute to vertical align, because I try other options but anything works.
What can I do to specify the max-width and max-heigth of 100% of the carousel images? Thanks!
Does this plunker solve the problem?
Here's the summary of changes:
img
{
width: 100%;
}
.item
{
height: 500px;
background: blue; /*added a color only to see the height*/
}
Since vertical-align is already on your .containerIn div, you shouldn't need to also apply it to the images.
I am trying to setup a form such that:
All inputs will be horizontally aligned, even when they have no label.
Inputs will be vertically aligned within their row for when the label wraps.
The inputs will stretch to fill the remaining space (or squished)
The submit button will fill an entire row.
I have achieved the first and fourth requirements but I am having trouble with making the inputs fill the row and be vertically aligned.
Here's my progress so far:
http://jsbin.com/kozozabo/3/edit?html,css,output
The LESS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#narrow-form {
width: 300px;
overflow: hidden;
padding-right: 0.5em;
}
#wide-form {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin-left: 300px;
}
.row {
#label-width: 100px;
width: 100%;
overflow: hidden;
label {
width: #label-width;
float: left;
display: inline-block;
}
.no-label {
margin-left: #label-width;
}
input, select {
/* Trying to make these aligned to the right of
* their respective labels filling any remaining
* width.
*/
display: inline-block;
}
button {
width: 100%;
}
}
I tried giving the inputs absolute positioning with a left margin of the same width of the label but that didn't work.
Okay I have come up with a solution that I am happy with. It does involve some table abuse unfortunately.
I have only tested this in Chromium.
http://jsbin.com/kozozabo/5/edit?output
I set the form to display: table, each .row to display: table-row and the labels, inputs, selects and buttons to display: table-cell.
This made everything line up and fill all available space.
I then added two new classes intended to be affixes to the .row class, this is where the real table abuse begins.
.no-label - With the intent of "skipping" the first psuedo-cell. To accomplish this I defined it as such:
.no-label:before {
content: "";
display: table-cell;
}
Essentially inserting a hidden cell, forcing the subsequent inputs to be in the second column.
.full-width - With the intent of making it's contents the full width of the "table". To accomplish this I defined it as such:
.full-width {
display: table-caption;
caption-side: bottom;
}
A table caption spans the entire width of the table. I know I am only going to do this to the button so I forced it to be at the bottom with caption-side.
It would have been better to just define the DOM as a table but I didn't want to reprogram the javascript that was setting up this form. I always wouldn't get to of played with css, all be it in a menacing manner.
I'm working on a responsive wordpress theme but I have little problem. My page includes several boxes that are displayed side by side. Each box has a responsive height and width and contains an image and text(text is overlaid on the image).
Is there a way to set all boxes to the same height considering the correct aspect ratio(image)? Also if some boxes don't contain an image?
Live-Preview: http://apu.sh/3ne
JsFiddle http://jsfiddle.net/tjwHk/
My suggestion for your case is to fix all the boxes width & height to a value of your preference.
then, give a max-width & max-height of 100% to the image. causing it to never overflow the parent div [box] without losing the aspect ratio of the image. (if you'll try to do this with width & height you will lose the ratio)
Edit: padding:none; is not valid. use padding:0; instead
So, to summarize, change this in your CSS:
#custom-list .custom-list-element
{
width: 50%;
height: 200px; /* fix any height you want*/
float: left;
background-color: #333333;
text-align: center; /*so the image will always be centered in the div*/
position: relative;
}
#custom-list .custom-list-element img
{
max-width: 100%; /* the width never overflow the div*/
max-height: 100%; /* the height never overflow the div*/
}
#custom-list .custom-list-element article p
{
padding: 0; /* valid value */
}
#custom-list .custom-list-element article h1
{
color: #fff;
padding: 0; /* valid value */
font-size: 1.5em;
}
and finally, because I like Fiddles so much.. http://jsfiddle.net/avrahamcool/tjwHk/1/