In order to centrally position an <a> tag inside a <div> and have it fill the parent entirely I am using the markup and CSS in the snippet below:
.container {
align-items: center;
background: lightcoral;
border: 1px solid black;
display: flex;
height: 100px;
justify-content: center;
overflow: hidden;
width: 100px;
}
.contained {
background: lightblue;
padding: 100px;
}
<body>
<div class="container">
<a class="contained" href="#">1</a>
</div>
<div class="container">
<a class="contained" href="#">2</a>
</div>
<div class="container">
<a class="contained" href="#">3</a>
</div>
</body>
For the purposes of demonstration the <div>s have fixed sizes but ultimately they may change size slightly in different viewport sizes, hence giving the <a> tags large amounts of padding to ensure that they always cover the entire <div> whilst staying central. The colours are also only included to make it easier to see the effect.
When viewed in Chrome or Firefox (version 58.0.3029.110 [64-bit] and version 53.0 [64-bit] respectively, at time of writing) the <a> tags are positioned centrally, with the excess padding hidden by the parent <div> (you should be unable to see an red colouration, only blue). However, in IE11 the <a> tags are being pushed off to the right by their padding, which does not match the behaviour seen in Chrome and Firefox. Furthermore, adding flex-direction: column to the .container class causes the <a> tag to be pushed down instead of right, which suggests the issue is tied to flex-direction.
Is there a workaround for IE to make it behave in the same way as Chrome and Firefox?
In order for the anchor to fill the parent, you just need to add flex-grow:1, the use flex to centre it's content:
.container {
align-items: center;
background: lightcoral;
border: 1px solid black;
display: flex;
flex-direction: column; /* add this so your grow will make it grow to 100% height */
height: 100px;
width: 100px;
}
.contained {
background: lightblue;
flex-grow: 1; /* add this for 100% height */
align-self: stretch; /* add this for 100% width */
display:flex; /* the following is for centring your anchor content */
justify-content: center;
align-items: center;
}
<body>
<div class="container">
<a class="contained" href="#">1</a>
</div>
<div class="container">
<a class="contained" href="#">2</a>
</div>
<div class="container">
<a class="contained" href="#">3</a>
</div>
</body>
I think it will help you
No need to add hug value of padding you can use flex to get the same and you can check in IE it's working fine and your parent background: lightcoral; is hide now.
Here i attached IE screenshot and it's working fine.
Use flex to get it
.container {
align-items: center;
background: lightcoral;
border: 1px solid black;
display: flex;
height: 100px;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100px;
}
.contained {
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
align-self: center;
}
<div class="container">
<a class="contained" href="#">1</a>
</div>
<div class="container">
<a class="contained" href="#">2</a>
</div>
<div class="container">
<a class="contained" href="#">3</a>
</div>
Related
I'm trying to put 4 images in a flexbox div in a parent flexbox, with total height 100%, without stretching out of the parent flexbox. I've searched a lot, but I didn't found something useful.
I have made a minimum example:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<!--
Weird. Chromium (Chrome & new Edge) usually renders height 100%,
but not height-responsive; sometimes renders scroll bar.
Firefox always renders the scroll bar result.
-->
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
</main>
When opening this example, chromium-based browsers(Chrome, new Edge) usually render height 100%, the desired result, but it is not "height-responsive": the max height of the images remains fixed once the page is fully loaded.
What even worse is, sometimes they give the stretched result with scrollbar; and Firefox always give me the stretched result with scrollbar, which is not what I want.
Try opening this S.O. page in Chromium & Firefox, and run the snippet. The results are different, too.
Chromium (almost always left, rarely right):
Firefox (always):
Any way to achieve what I want? The wrapping div and parent div may be something other than flexbox. I just want the images staying in the div, with width-responsive & height-responsive.
Also, any reason why Chromium browsers' rendering results are not consistent? Is my example missing something?
I know I can use the background image technique, so I can put image in div without changing layout at all. But I want only the image part clickable, so there must be an image element there corresponding to the clickable area.
background-image example:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
background-color: yellowgreen;
}
a {
flex: 1;
background-image: url('https://imgur.com/ruE1EBV.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border: 5px solid red;
}
<main>
</main>
Edit:
Equal row heights in flex-direction: column is okay when the content inside doesn't contain any images. I think the tricky part is the images. They just stretch...
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid red;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
</main>
Well, I found an easy answer to fix this simple minimum example.
Just add overflow: hidden to .imgs, so images don't grow out of main.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
</main>
Applying this to my actual, much more huge layout did fix my layout.
So all I need to do is to carefully inspect my overflows.
Why Chromium behaves differently: stackoverflow: Why do Chrome and Firefox show different flex layout results?
I'm trying to use flexbox (justify-content: space-between;) to push the Motorola logo to the left and the red block (nav-bar) to the right. It actually works pretty well as long as there is no anchor tag involved. However, I need anchor tags so that visitors can actually click on each item of the nav-bar and get to the respective section of the website.
How can I make justify-content work without removing the anchor tags?
HTML
<div id="header">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Motorola_Logo_White.png" alt="This is Motorolas Logo">
<div id="nav-bar">
<div id="nav1" class="nav-link"><a href="#prices">Prices</div>
<div id="nav2" class="nav-link"><a href="#prices">Specs</div>
<div id="nav3" class="nav-link"><a href="#prices">Reviews</div>
</div>
</div>
CSS
#header {
background-color: gray;
position: fixed;
justify-content: space-between;
z-index: 1;
display: flex;
width: 100%;
height: 4rem;
}
#header-img {
background-color: orange;
height: 4rem;
width: 25%;
display: flex;
align-items: center;
justify-content: center;
}
#nav-bar {
background-color: red;
width: 25%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
Here you can see it on Codepen
In cases where you have a flex container with left-aligned content - except one or more items you want to right-align, there is a shortcut using the margin property.
If you add the following rule to your existing styles:
#nav-bar {
margin-left: auto; /* Pushes the element right inside a flex container */
}
It should work as you want. You could even remove the justify-content: space-between; rule from your #header selector.
I have a project where I want to change some circle elements into hyperlinks by wrapping them in an <a href>. The problem is, I lose the styling that I had previously applied after I wrap the html div in the <a> tag. I am having trouble finding a solution after adding the <a> tag in the css.
Here is a Codepen I have created of a draft project. Try wrapping a .circle div in an <a> tag:
CodePen
In case CodePen is down
.wrapper {
width: 100%;
}
.wrapper .first {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
max-width: 1222px;
}
.wrapper .first .circle {
width: 100px;
height: 100px;
overflow: hidden;
text-align: center;
margin-right: 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #FF9E9D;
border-radius: 50%;
border-style: solid;
border-color: #FF9E9D;
transition: all 0.4s ease-in-out;
}
<div class="wrapper">
<div class="first">
<div class="circle">
<h5>MD</h5>
</div>
</div>
</div>
Thanks, any help is greatly appreciated.
since you want the entire div to be a link why not give the a tag a class of that style. For example
<a class="first" href="your link"></a>
Note that ".first" can be any of the classes you want your link to be or you want your user to click on to go to that link
it works fine while i do it in that code pen
<div class="circle"><h5>MD</h5></div>
<div class="circle"><h5>MD</h5></div>
<div class="circle"><h5>MD</h5></div>
<div class="circle"><h5>MD</h5></div>
<div class="circle"><h5>MD</h5></div>
this is what i done
or
<div class="circle"><h5>MD</h5></div>
is also looks fine
Hopefully this isn't an unsolved task, but I'm trying to vertically justify an unknown (ish) number of divs inside of a container.
Each div should be equal distances from each other, and, additionally, the same distance from the edges. (Assuming the last part can be accomplished using ghost elements before and after)
The divs will each fill the width of the container, and the container is a set height, but the number of elements inside the container is unknown.
I'm assuming it can be done using Flexbox to some degree, but have been unsuccessful in my attempts thus far.
Yep, flexbox is the simplest way to do it.
On the container element:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
On the child elements:
.container div {
flex: 1;
width: 100%
}
For the spacing between the elements, just add padding to the container and bottom margins to the children.
The style would look like this:
.container {
/* Same as above, and */
padding: 20px;
}
.container div {
/* Same as above, and */
margin-bottom: 20px;
}
.container div:last-of-type{
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
}
(I was typing this when you posted your answer, so I put it up anyway)
Fiddle
I use justify-content:space-evenly.
HTML:
div.container {
display: flex;
}
div.one_item_container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
<div class="container">
<div class="one_item_container">
<img height="30" src="hello.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
</div>
As usual, no matter how long I search, I find the answer only immediately after I ask the question. :D
For those curious, or for my own future reference: Flexbox's justify DOES work, you just need a few more options:
HTML:
<div id="outer-container">
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
</div>
CSS:
#outer-container {
height: 250px;
width: 200px;
background: red;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.inner-element {
width: 200px;
height: 10px;
background: blue;
}
https://css-tricks.com/almanac/properties/j/justify-content/
https://jsfiddle.net/WW3bh/
This question already has answers here:
Absolutely positioned flex item is not removed from the normal flow in IE11
(4 answers)
Closed 6 years ago.
This http://jsfiddle.net/7ra5oL77/ should line up the orange dots horizontally with the text underneath.
The relevant items are:
<div class="draggable ui-widget-content"></div>
and
<div class="item">60°C</div>
This works in Chrome and Edge, but Firefox seem to not use the full width and there is a too big white space on the right side.
Can anyone help me?
The issue that I see is that firefox is recognizing your div.lines as items within the flexbox even though the are position absolute. If you pull them outside of the container or delete them altogether (I don't see their purpose), then you should be fine.
The absolute positioned .lines mess up with the space-around alignment:
#graph-containment-wrapper {
justify-content: space-around;
}
This seems a bug, because the spec says
An absolutely-positioned child of a flex container does not
participate in flex layout.
The justify-content property aligns flex items along the
main axis of the current line of the flex container.
As a workaround, you can use auto margins to achieve the same effect without the interference of absolutely positioned elements:
.draggable {
margin: 0 auto;
}
.lines {
padding: 0px;
margin: 0px;
height: 1px;
background-color: orange;
position: absolute;
}
.draggable {
width: 30px;
height: 30px;
background: orange;
border-radius: 30px;
cursor: n-resize;
top: 200px;
z-index: 1;
border: 0px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0 auto;
}
.x-axis {
display: flex;
justify-content: space-around;
width: 100%
}
#graph-containment-wrapper {
display: flex;
height: 20rem;
background-color: white;
}
.graph {
-webkit-user-select: none;
}
.draw-area{
width: 100%
}
.hlines{
background-color: lightgray;
width:100%;
height: 1px;
display: flex;
}
.hlines-container{
display:flex;
min-height: 100%;
justify-content: space-between;
flex-direction: column;
padding: 15px;
height: 20rem;
margin-top: -20rem
}
<div class="graph">
<div class="draw-area">
<div id="graph-containment-wrapper">
<div class="draggable ui-widget-content"></div>
<div class="draggable ui-widget-content"> </div>
<div class="draggable ui-widget-content"> </div>
<div class="draggable ui-widget-content"> </div>
<div class="draggable ui-widget-content"> </div>
<div class="lines" id="myline0"></div>
<div class="lines" id="myline1"></div>
<div class="lines" id="myline2"></div>
<div class="lines" id="myline3"></div>
</div>
<div class="hlines-container">
<div class="hlines"></div>
<div class="hlines"></div>
<div class="hlines"></div>
<div class="hlines"></div>
<div class="hlines"></div>
<div class="hlines"></div>
</div>
</div>
<div class="x-axis">
<div class="item">20°C</div>
<div class="item">30°C</div>
<div class="item">40°C</div>
<div class="item">50°C</div>
<div class="item">60°C</div>
</div>
</div>