i've got a problem with display: table-cell; and the space between the cells. I'd like to have dynamically the same width for all cells.
See JSFiddle
How you can see the "Ausstattung & Skizze" is much wider than the others. Is there a way to dynamically set the same width to all cells?
You can use table-layout:fixed; on the parent element which holds display:table;
ul{
display: table;
width: 700px;
table-layout: fixed;
}
This way, every cell will get the same width if you don't force their width, no matter how many cells you have in a row.
(Edit: see this JSfiddle http://jsfiddle.net/m8evqnv0/ )
li {
display: inline-block;
width: 150px;
}
edit: no need for inline-block, with width:25%
if the width of the unordered list is fixed, then:-
li
{
width: 25%;
}
best practice:- use classes for li and then style the class.
if you want the table to be responsive, use table markups then. it will work like a charm.
fiddle:- http://jsfiddle.net/4wsmx8t0/3/
Related
See Below for the Self-contained Example
Pictures of what I am trying to do, and what I actually get:
I want to create css rules so that my content looks like this (correct):
I am struggling to find a simple solution online, so my content looks like this (wrong):
Summary of what I'm trying to achieve:
I couldn't find a solution on stackoverflow or any css blog which provided solutions to similar but incompatible problems.
I have two floated divs, left and right on a row div. The left div contains an image that stretches out until it is the width of the left div. The left div's height is dependent on the img it contains. This is the height that I want the right div to conform to. I need this conformity so that when there is no more room on the right div, the overflow:hidden code will hide the excess text.
Fixed heights are not allowed. I am trying to avoid Java Script for this. Is there a solution in pure CSS?
CSS snippet
.left {
float:left;
width:50%
}
.right {
float:right;
width:50%;
background-color:darkgrey;
overflow:hidden;
}
img {
min-width:100%;
height: auto;
width: 100%;
}
As you can see, I don't have any code here to handle equal div heights because all the solutions I've tried have not worked.
Here is my jsfiddle so you can see the problem:
http://jsfiddle.net/1upodwg9/
To use overflow: hidden; the container would need a defined height, otherwise it doesn't know where the overflow begin. Since you want to have a dynamic image (with different heights) I'm afraid you have to use javascript.
Fiddle
http://jsfiddle.net/1upodwg9/14/
.child-row {
display:block;//added
background:red;
}
.left {
float:left;
width:50%;
height:100%;//added
display:inline-block;//added
}
.right {
width:50%;
background-color:darkgrey;
display: inline-block;//added
}
Fiddle example when you have more content
http://jsfiddle.net/1upodwg9/15/
Something like this fiddle ?
$(window).resize(function () {
var height = $("#leftDiv").css("height")
$("#rightDiv").css("height", height);
});
If you're only catering to IE8+ and/or modern browsers you can use display: table, display: table-row, display: table-cell
.parent {
margin: auto; /* helps place in middle */
width: 70%;
display: table;
}
.child-row {
display: table-row;
}
.child-col {
display: table-cell;
vertical-align: top;
}
Example: http://jsfiddle.net/1upodwg9/16/
(Sorry, I changed the image cos for some reason it wasnt loading on my end)
EDIT: Actually, it doesn't work for when the image is too small (the right col will set the height)
On a web page, I have a row of submit buttons.
This row of buttons should be centered on the page
Each button should be as wide as the widest button (i.e no fixed/hard-coded button widths).
This is easily done with a <table>, but as people keep telling me those are bad for you, I wondered if this can be done with CSS instead. So, I have tried the display: table and table-cell CSS classes, but either the buttons don't get equal widths, or the longest button's caption gets clipped:
.button-row {
display: table;
margin: auto;
table-layout: fixed;
}
.button-row button {
white-space: nowrap;
display: table-cell;
width: 50%;
}
<div class="button-row" >
<button>Short caption</button>
<button>A much longer caption</button>
</div>
Actually, it does look correct in IE, but not in Chrome and Firefox. Here is a fiddle with both my table- and CSS-attempt:
http://jsfiddle.net/kfwhpre8/
If possible, I would like to get rid of the width: 50% settings, because the number of buttons may vary, but that's easy enough to calculate.
Looking at your fiddle, keep in mind that in the table version the buttons are contained in tds. This is the essence of the problem. It appears using table-cell on buttons directly is problematic. If you don't mind chaniging your HTML you can try:
<div class="button-row">
<div>
<button>Short caption</button>
</div>
<div>
<button>A much longer caption</button>
</div>
</div>
.button-row {
display: table;
margin: auto;
table-layout: fixed;
}
.button-row>div {
display: table-cell;
width: 50%;
}
.button-row button {
width:100%;
}
Fiddle
prob not the answer you are looking for as you said you want to get rid of the width:50%
If you set the width:100% in the button-row button{}all the buttons will be as wide as the widest button
.button-row button {
display: table-cell;
width: 100%;
}
I'm unsure if this would suffice, as you'd have to check each time a new button was added, as to the best size for them. But you could simply add a width to each button and a margin to replicate the table layout.
At least in the HTML's current form.
.button-row button {
display: table-cell;
width: 150px;
margin: 1px;
}
Fiddle: http://jsfiddle.net/kfwhpre8/3/
I have a ul of imgs to create a side-scrolling gallery.
I'd like for the images' height to be constrained to the browser window and their width to resize in order to maintain their scale.
Even though I've specified a height for every containing element, the images with height:90%; are way bigger than the browser window. See the fiddle here: JSFiddle
What am I doing wrong here?
Additional info: If I set height: 90vh; on .gallery-image it looks pretty much exactly how I want it, but it feels like a hack and I'd like to understand why % isn't working.
I'm looking to achieve this functionality: example.
This might be what your looking for?
http://jsfiddle.net/jny0u3rc/11/
I simplified the code, this might not work if you have to have the images loaded in as list-items.
This specifies a container height of 100% and an image height of 90%. images are inline elements by default, so I set them to
white-space:nowrap and overflow:auto on the container.
The CSS:
.gallery {
height: 100%;
overflow: auto;
white-space:
nowrap; }
.gallery img{
margin: 20px 10px 0 0px;
height:90%
}
Is this what you're looking for? http://jsfiddle.net/jny0u3rc/8/
.gallery {
height: 100%;
overflow-x: scroll;
white-space: nowrap;
width: 100%;
}
.gallery-list {
list-style: none;
margin-top: 15px;
margin-bottom: 0px;
height: 100%;
}
.gallery-listitem {
padding-top:0px;
padding-right: 10px;
height: 100%;
display:inline-block
}
.gallery-image {
height:90%;
width:auto;
}
There are two issues:
You forgot to add 100% height on the html and body elements
You are using display: table and display: table-cell. The 100% height technique does not work on table displays. Change this to display: block and display: inline-block and you will get the expected results.
(Heavily) Modified Fiddle
You can achieve what you want by adding a width to each image. Of course the width doesn't have to be static. You can add a width of 100% and then set the height to auto so the images scale.
For a span to take a height, it has to be inline-block.
For an element to serve as offset parent (against which percentage heights of children are computed), it has to have position set. This is quite basic CSS.
See jsfiddle.net/6xh6wbpL/2.
My JSFiddle:
http://jsfiddle.net/3YGdL/
My CSS:
#sidebar {
width: 100%;
background-color: blue;
}
#sidebar div {
width: 33%;
display: inline-block;
}
#sidebar-left {
background-color: green;
}
#sidebar-center {
background-color: red;
}
#sidebar-right {
background-color: yellow;
}
#sidebar li {
list-style: none;
}
My Question:
I want the 3 columns in one line with exactly the same width and aligned top. The content of those 3 columns should be dynamic, this means, the height should automatic change to the max height. We never know which of the 3 columns is the highest one, so this should be dynamic too.
My current solution is in the JSFiddle, I've tried other stuff like "display: table" but this was even worse...
I've tried this, but it didn't work for me...
Here is pure CSS solution
The HTML sturcture is the same, only i altered few lines in your CSS. I assigned #sidebar display to table.
Then, assigned #sidebar>div to display as the table-cell for equal height to all columns. For improving form UI i added this code
div.form-group input, div.form-group textarea {
clear:both !important;
float:none;
margin:5px;
display:block;
}
For futher details refer this URL
Hope this will be useful
Here is a solution with a simple jQuery Script: Example
First I gave every section a class .column to target them more easily.
Then I get the height of every element, and apply the highest height to all of them.
heightArrayHeading = [];
$('.column').each(function() {
$(this).css('height', '');
heightArrayHeading.push($(this).outerHeight());
});
$('.column').css('height', Math.max.apply(Math, heightArrayHeading));
Finally I gave .column vertical-align:top; to align them on top.
is this what you looking for?
JSFIDDLE
please remember that display:inline-block by default is baseline so you have to set it vertical-align:top, plus inline-block create whitespaces, you can see solutions for that here:
INLINE-BLOCK FIXES
UPDATE
now that i read carefully your question I understand you want same height for 3 columns, so I give you a link with some methods to achieve that:
Fluid Width Equal Height Columns
Hope it helps!
I'm trying to create some evenly spaced columns (an ol), with the columns themselves being fixed width.
So far, I've managed to achieve the desired effect by using table layout, and nesting an additional element inside the list item.
HTML:
<ol>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ol>
CSS:
ol {
display: table;
width: 100%;
}
li {
display: table-cell;
}
div {
margin: 0 auto;
width: 100px;
height: 250px;
}
This works great, but has the following 2 shortcomings:
As you can see in the demo, the first & last columns don't line up flush with the parent's outer edges.
This can't really be used responsively. The only thing you can do at smaller widths is stack them, but I'd like to split them (2 or 3 per row).
Is what I'm after even possible in CSS alone? I know there are a plethora of ways to accomplish this in JS, but I'm after a CSS-only solution.
P.S. I don't care about IE7-, but I do need to support IE8. CSS3 selectors are OK though, since I'm anyhow using selectivizr in the project (I know that's JS ;-)).
It seems appropriate for you to recycle "how to *really* justify a horizontal menu". Basically the behaviour you're describing is that of inline-block elements of identical width having text-align:justify applied:
ol {
/*force the desired behaviour*/
text-align: justify;
/*remove the minimum gap between columns caused by whitespace*/
font-size: 0;
}
li {
/*make text-align property applicable*/
display: inline;
}
/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
content: "";
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
div {
display: inline-block;
width: 100px;
height: 250px;
}
Working fiddle.
NB: you may have to re-apply desired font-size and text-align to descendants of ol depending on the reset you're using (i.e. to prevent these properties from being inherited)
Ok my first thought would be to use media queries to gain a responsive approach for how many you want to show per row on differing screen sizes and my second would be to use
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
this will stop the paddings you may put in later adding onto the box model size.
Hope this is close to what you are after.