I put 3 divs into div with display:flex, expecting that it will fit all the space by the real content amount.
.flex {
display: flex;
padding: 10px;
}
The live exemple is here: http://plnkr.co/edit/rX3ykWgyTH65uIDHpIS1?p=preview
But in Chrome it seems that the result is not quite as I thought (just like in the table above):
.
Is it normal? If is then why?
The issue is caused by margin:auto 10px; that you have applied to your flex items (selector .pod > div).
Or to be more precise, it's caused by the vertical margin:auto - this is overriding the stretch effect of flex.
Change the margin to margin:10px and it will work.
Related
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
I've been trying to get my head managing a specific layout without using flexbox (specifically flex-direction: column). I'm almost certain this has been asked elsewhere but for the life of me I haven't been able to find it, so I'm very sorry if it has and will gladly close if anyone can show me it answered somewhere else.
The problem is this: given an arbitrary number of divs, all but one of which have a fixed height, how can I lay them out in a column such that the remaining element fills 100% of the height available to it, after the others have been taken into account?
It looks like (Codepen):
div.container
div.cell.fixedheight
div.cell.fillheight
div.cell.fixedheight
div.cell.fixedheight
div.cell.fixedheight
This is pretty easily achievable using flexbox with something like:
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.fixedheight {height: 20px;}
.fillheight {flex: 1;}
But I'm essentially not in a position to use flexbox, since supporting older browsers is necessary here.
Edit when I say I can't use flexbox, I mean not even vendor prefixes :(
You can achieve it with table layouts, with a light wrapper of row-style and cell-style divs. If anyone knows of a solution that doesn't involve an extra wrapper in the markup I'll gladly take it :)
See the approach on this Codepen but I'll put the relevant code here:
div.container
div.row.fixedheight
div.cell
div.row.fillheight
div.cell
div.row.fixedheight
div.cell
div.row.fixedheight
div.cell
div.row.fixedheight
div.cell
and then the CSS:
.container {
display: table;
}
.row {
display: table-row;
}
.row.fixedheight {
height: 20px;
}
.row.fillheight {}
.cell {
display: table-cell;
}
The .cells will accept very little further styling (margins etc) so they'll need to act as a wrapper for whatever richly styled divs you want to put inside them.
Also note that multiple .fillheights will share the available height between them equally.
Also note that the fixed height rows are not in fact fixed height - the 20px will be used as effectively a min-height, but the cell will wrap whatever it has in it. I've been accepting this and setting height: 0 on the cell and height: 20px on an inner div which isn't table-styled.
I would like to create a grid with 4 columns. Columns width should fit to there respective contents, and gutters should all share the same width changing depending on the columns width. The tricky thing is that the total width of the container / grid should be adjustable dynamically, as it should be a responsive design.
Here is a scheme that's explains what i want to achieve :
And here is a fiddle trying with margin-left:auto (doesn't work)
nav ul {
width:80%; /* fluid design */
}
nav ul li {
display:inline-block;
}
nav ul li:not(:first-child) {
margin-left:auto;
}
I can use latest CSS3, Sass, Compass and Susy. But i haven't found any way to do it yet. It seems Susy doesn't allow me to have columns adjusting their width to their content - or i haven't found how. Does anyone have any idea ? thanks !
As in the link I posted as a comment, you may use flexboxes to achieve your layout.
Basically if you give your container this CSS:
.flexbox-container {
display: flex;
justify-content: space-between;
}
your content will adapt to the 100% of the container and space between elements will always be the same.
Here you have a FIDDLE as an example. Try writting more on any div to see it growing.
I've added a margin right to the elements so there's always a gap between elements. If you remove that margin, when no room the space between elements will be 0.
There's more options avalaibles like giving your elements the option to shrink if no room enough with flex-shrink: and many others...
More info about flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
At this point in time the only way to achieve this is through Javascript. CSS is not capable of finding the width based on your content.
ive got some problem with my css styles:
I have different groups ( <div>'s ) that have subgroups displayed in ONE colum
or MULTIPLE ( max. 3) colums.
The problem i have is, that my vertical-align wont work within float elements with an 100% height.
within the subgroups: ST200 | Überblick... | EN DE should be displayed with vertical-align: middle
Maybe someone could help me.
complete code posted on jfiddle
http://jsfiddle.net/ZAa33/
Andres's comment here seems to address your problem: the line-height of the text is confining it to a smaller area than its container div.
To test, I changed the line-height property on .kursid to 35px, and the ST200 was successfully centered vertically, but only for those divs that had heights of 35px. For a more general solution, you could redesign your code to allow line-height and height to be set explicitly equal on all divs with text you want centered vertically, or you could see the other answers to that question for other options.
Vertical-Align Property works with only inline and inline-block elements. if you float any element, by default that element display property value is changed to block. In your case that is why vertical-alignment is not working on floated element. one solution for your problem is use inline.
[Inline-block demo](http://jsfiddle.net/Mostwanted_cJ/W8nf8)
Your JSFiddle is edited.
change all of your span to div and apply display:inline-block and vertical-align:middle
Inline-block demo
i found a solution to my Question that works pretty nice ;)
i just needed to set:
.kurs {
border-radius: 15px 15px 15px 15px;
background-color: #c5c5c5;
width: 100%;
min-height: 35px;
margin-bottom: 10px;
display: flex;
! display: -webkit-flex; <- remove
! display: -moz-box; <- remove
align-items: center; <- add
justify-content: center; <- add
}
The updated fiddle ;)
http://jsfiddle.net/ZAa33/9/
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.