I'm trying to put two flex items side by side, baseline-aligned (simple enough!), but with some small constraints: (1) overflow: hidden on both; (2) some padding-top on the second flex item. Here's the HTML:
<div class="outer">
<div class="inner one">Hello</div>
<div class="inner two">Hello</div>
</div>
...and the CSS:
.outer {
display: flex;
align-items: baseline;
}
.inner {
width: 30px;
overflow: hidden;
}
.one {
background: red;
}
.two {
background: yellow;
padding-top: 40px;
}
While Chrome (v43) gets the layout right (or at least what one could expect), Firefox (v38) breaks it completely: open this fiddle in Firefox and you'll see.
Any workaround for correct vertical alignment? It's so simple I can't believe both major browsers don't offer the same result.
The workaround for this is fairly simple.
.outer {
display: flex;
align-items: flex-end;
}
Note using flex-end for an align property, and not baseline. Baseline is a complicated thing in flexbox as far as i can see. If you want to achieve proper results with baseline you should maybe fancy up that example of yours with some more typography.
About the overflow problem and why it acts like that im not really sure about. Still i hope you can workaround your issue like that.
I advise you on reading this great, so called "Complete Guide to Flexbox".
Greetings!
Related
enter image description hereI got stack by a simple thing...
I am trying to create a simple navigation for my footer. So, I created a and placed an in it. The list contains three s and each of them has an inside. I wish my list items to be placed horizontally with spaces between / around them. Thus, I decided to use flexbox in this case. The question is that when I am setting display property value of my to flex and justify-content to center, it work predictably (i.e. all the list items sticked to each other are centered horizontally), however, as soon as I set justify-content to "space-between" or "space-around" I get an extra space to the right side of my content, which makes this space three times bigger than the one on the left side of the content.
I tried to search this topic in the history, but found nothing similar. Google search brought me a potential solution - to set flex:1 to each of the list items. But in this case I loose the gaps between the items which is not my intention.
Below I provide a picture of the problem and my testing code snippets. One more observation is that everything works great in code snippets programs (JSFiddle or Code Pen)...
Problem illustration
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.footer {
height: 100vh;
background: grey;
position: relative;
}
.container {
width: 90%;
height: 30vh;
margin: auto;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
.nav {
background: white;
height: 100%;
}
.list {
height: 100%;
list-style-type: none;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.item {
min-width: 30%;
background: grey;
}
<div class="footer">
<div class="container">
<nav class="nav">
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
</nav>
</div>
</div>
Your code snippet is ok. In your screenshot it seems you have a lot more css going on, though.
I can't see the complete CSS-snippet in your screenshot and I might be completely wrong: It looks like a piece of the clearfix-hack where you are missing the ::before part.
Because adding an empty space only in ::after will have exactly the effect you are describing.
It probably is the remains of a former float-construct, so you can just remove the ::after part.
I need a gallery of images. Thereby it should be responsive. When there are too many images for one line, they should be displayed in the next.
That's what I have already implemented. My problem now is that the last line (when it has just one image for example) is centered, too. But It should be floated left.
I tried float:left, but this just makes everything float left and not center anymore.
Here is an JSFiddle-Example.
How can I have the last image float left?
HTML:
<div class="psAppWrapper">
<div ng-repeat="app in applications track by $index" class="psAppTile">
<img src="{{app.icon}}" class="psAppIcon"/>
<p class="psAppTitle">{{app.title}}</p>
</div>
</div>
CSS:
.psAppIcon {
width: 80px;
height: 80px;
}
.psAppTitle {
text-align: center;
}
.psAppTile {
width: 80px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
.psAppWrapper {
width: 100%;
text-align:center;
}
EDIT
When I add float left it looks like this:
The red one is psAppWrapper. Here you can see that the images are not centered. The left ones have much less space to the left than the right ones to the right. The spaces should be the same.
This
.psAppWrapper {
width: 100%;
text-align:left; /* Changed this from text-align:center */
}
should align the last element to the left.
Nowadays, positioning block items via float: left; is considered bad practise. You should use display: flex; to align block items in the way you like. For the last row, use flex-wrap: wrap;. So you should end up with this CSS:
.psAppTile {
display: flex;
flex-wrap: wrap;
}
You can find explanations and more information on display:flex; here.
But I think that you'll need another technique, display: grid; might do the trick. I must admit that I've not yet used this for layout. [You can find a complete guide here.][3]
One of the solutions I learned is to set the display of the parent div element to table-cell and use the vertical-align property.
While this works, in my case I also need the parent div to float right, but it breaks the table-cell trick and the whole thing does not work now.
So my question is simple: Why exactly is this happening, and more importantly, how can I achieve the effect I want?
div {
/* float: right; uncomment this will make this not working */
display: table-cell;
vertical-align: middle;
height: 60px;
border: 1px solid red;
}
<div>
<input>
</div>
Corresponding JSFiddle
CSS3 provides flexbox. All you need is this:
body {
display: flex; /* create flex container */
justify-content: flex-end; /* align child to right edge */
}
div {
display: flex; /* create nested flex container */
align-items: center; /* center child vertically */
height: 60px;
border: 1px solid red;
}
<div>
<input>
</div>
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
Browser support:
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.
Wrap everything with a div set to float:right.
updated your fiddle with few tweaks. hope this works for you.
Please check http://jsfiddle.net/53ALd/3780/
html :
<div >
<input class="form-control" id="txtWOFastNavigation">
</div>
css :
div {
float: right;
height: 160px;
border: 1px solid #000;
position: relative;
background: red;
width: 104px;
}
div .form-control{
width: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
I tried to get two divs next to eachother. The right one has a fixed width, but the left one has to be able to resize. I tried multiple ways, but none fit all my requirements:
Right one has fixed width
Parent div has height of largest child (wraps its childs)
Left one has to resize
Html structure has to in this order (reason at bottom):
html:
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
I tried absolute positioning the right div and adding a margin on the left one and it achieved all requirements, except that the parent div doesn't wrap the largest child (as expected)
http://jsfiddle.net/0fxL71xL/3/
.container{max-width:400px;position:relative;}
.variable_width{margin-right:100px;}
.fixed_width{width:100px; position:absolute;right:0;top:0;}
I also tried using inline-block and max-width but then the divs don't align at the top, and I don't know how to handle the whitespace issue. Most important, it does not make the left div resize: http://jsfiddle.net/0fxL71xL/4/
.container{max-width:400px;}
.variable_width{max-width:290px; display:inline-block;}
.fixed_width{width:100px; display:inline-block;}
I also tried a float right on the right div, but it didn't come near what I wanted.
The closest I got was changing the order in html and using float:right on the div that has to go right, but in this case I can't use an #media query to have it display below the left div at a certain moment.
EDIT:While paulie_d's answer fixes it, I would prefer something that has a large browser support
flexbox can do that.
JSfiddle Demo
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.fixed_width {
width: 200px;
background: #bada55;
}
.variable_width {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: plum;
height: 100px;
}
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
.container {
width:100%;
}
.variable_width {
max-width: 70%;
display: inline-block;
background-color:blue;
margin-right: -3px;
}
.fixed_width {
width:100px;
width: 28%;
display: inline-block;
background-color:red;
vertical-align: top;
}
now you can use this code. i think it will work fine.you can add some content in variable width div class and check whether it is working or not.i have checked it and it really works :) .
http://jsfiddle.net/souraj/vaqbsdzk/
After more searching I came across this interesting page which sums some techniques to achieve exactly what I wanted. It gives the most complete answer.
http://clubmate.fi/100-percent-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems/
In IE 11 when an item items don't properly center if they have maximum width property. This example however works in Chrome and Firefox.
JS Bin
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
width: 100%;
}
.red {
background-color: red;
flex-grow: 1;
display: flex;
max-width: 200px;
}
<div class="container">
<div class="red">non centered box</div>
</div>
It is a bug. But according to IE Feedback it was supposed to be fixed already.
As a workaround, you can remove flex-grow: 1; if you don't have to use it.
Explicitly set width: calc(100%); so IE knows the box width and center it properly.
I have had this issue as well. In my case I wanted flex-grow but still wanted to limit the max-width. What I do is wrap any css I don't want IE11 to see in #support. IE11 does not support this rule and ignores its contents completely. I will just check for something that has been around forever like text-align so all the other modern browsers can apply the css rule. You can do this for anything, I just discovered this while trying to figure out an answer to this issue.
#supports(text-align:center) {
div {
max-width: 350px;
}
}