I am lost on this one. I'm trying to set up a Javascript scroller where the content in the container needs to be inline, so it can be scrolled. If I use flex and flex-wrap:nowrap, it pushes the content out as it should, and I can scroll, but then the content in other areas of the form also follow suit by going out of their container. I only want the content in the flex container to overflow out of the element. How can I achieve this without bothering the rest of the content?
Here is the code I'm using:
#scroll-years {
width: 80%;
max-width:75em;
display: flex;
flex-direction: row;
justify-content:flex-start;
flex-wrap:wrap;
overflow:hidden;
margin:auto;
}
<div id="scroll-years">
<span>2009</span>
<span>•</span>
<span>2010</span>
<span>•</span>
<span>2011</span>
<span>•</span>
<span>2012</span>
<span>•</span>
<span>2013</span>
<span>•</span>
<span>2014</span>
</div>
EDIT:
I just noticed that if I use overflow:hidden on the parent container of #scroll-years, everything looks good. I'm not an expert with CSS so I have to ask, can this be right?
Edit
#ap-container {
max-width:75rem;
width:95%;
overflow:hidden; <-----Adding this pushes all the content back into place
}
Is this correct behavior or is this more of a hack? My objective is to learn how to code CSS better than I have been, so that's my concern.
Related
In my attempts to understand flex i decided i want to make a grid. Here's a general layout image for that:
The idea is that there's
a) a sidebar
b) a sticky header under which the main containers crolls
c) a main container that holds the main data
d) items that are sized depending on their content placed on a grid
To implement the sticky header i created did the following:
<div>
<div class="stickyHeader"></div>
<div class="contentscroll"></div>
</div>
Where
.stickyHeader{
position:absolute;
width:100%;
top:0px;
left:0px;
height:200px;
background-color:rgba(128, 128, 128, 0.178);
}
and
.contentscroll{
overflow: scroll;
height:100%;
display:flex;
box-sizing: border-box;
/* justify-content: flex-start; */
flex-flow:row wrap;
}
The issue is that the flex elements are trying to fill the 100% of the main container and therefore the page looks very different if i've got one item element vs 6 ( meaning that the space between the item elements and the sticky header seems variable when i really want it to be a specific distance.
Thanks a lot, you can find the entire code here:
https://jsbin.com/wivudiqisa/edit?html,css,output
I am not sure, what you mean with "sticky header seems variable" but you can distribute the flex Elements like this:
.contentscroll{
...
justify-content: space-between;
...
}
.contentitemcontainer {
...
width:20%;
...
}
I found this guide helpful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The support for Css Grid has greatly improved and you don't need to hack you way into building a grid! It has more than 90% browser support, so let's start using Grids
I have put together an article that covers precisely that and where to use grid and when to use flex here if you want to know more info
I have a flexbox in a side navigation that is overflowing it's granparent's height. The basic structure is:
<div class="holder">
<div class="block-item">content</div>
<div class="flex-nav">
<div class="flex-row"><img src="#"><img src="#"></div>
<div class="flex-row"><img src="#"><img src="#"></div>
<div class="flex-row"><img src="#"><img src="#"></div>
<div class="block-item">content</div>
<div>
.holder { height: 100vh;}
.block-item { display: block;}
.flex-nav { display: flex; flex-flow: column;}
.flex-row { flex: 1 1 0; display: flex;}
img { max-width: 100%;}
Somehow the flex-rows are not shrinking to fit their grandparent's 100vh. Instead, the images are going outside of the view port. From the articles I've read, I'm not sure if a grandchild takes into consideration it's grandparent's height restrictions, though I'm assuming it would. The actual code is slightly different and can be seen in the following codepen:
http://codepen.io/strasbal/pen/zNEMpj?editors=1100
However I'm not sure the exact specifications of Codepen's viewport, it may not show when changes are put into place, so the site url is http://www.webhosting-issues.com
I forked your pen.
Comments are included in the new pen that say /* NEW! */ to help you keep track of what changed, but, basically, since you had already set the height of the overall container at 100vh, I simply assigned a height in vh units to the header and footer that let them maintain the heights they already were, and then did the math to fill in the heights of other child elements.
Overall container is 100vh
Header logo and contact footer are 19vh each
That leaves 62vh for the middle section, made up of three rows
That's 20.666vh per row in the middle section
From there, just set explicit heights for the images and their wrapper links for the inner rows, and you’re was good to go.
One problem you run into is that the text in the links by the images can run out of their container on smaller screens. You could fix that by putting them inside spans and positioning them on top of the images, perhaps with a semi-transparent background.
Hope that works for you.
Hello I am new in designing and I I want to set the div sequence But When I give margin to the specific div it apply to all div I used unique class but problem is same
here is link of site
I want align special offers like express shipping
You can add another property (display: flex;) in your css for .footer-top-inner.container-width (DIV containing your blocks)
<div class="footer-top-inner container-width">
//your footerblocks
</div>
CSS:
.footer-top-inner.container-width{
display: flex;
//if that doesn't work, you might want to use display: flex !important;
}
But the best way would be to add another class to this container, just to prevent our override messing your website :)
EDIT: To keep your website looking good, you can add another property within display: flex;
justify-content: space-between;
This should automatically align your footerblocks
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
I am building a Windows 8 App in HTML5 and I am trying to center my app menu right in the middle of the screen. I know there are new CSS3 to apply this functionality, by using flexible boxes, however I am not able to recreate that. Here is my HTML
<body>
<div id="playControl">
<button>Back</button>
<button>Play</button>
<button>Forward</button>
</div>
</body>
There is some information here, but looks like isn't working properly (I guess they changed the property names)
Thanks
Here's how I do that. I use a grid instead of a flexbox at all. Let's say your div is inside a div called "parent". I would use...
#parent {
display:-ms-grid;
-ms-grid-columns:1fr;
-ms-grid-rows:1fr;
height:100%;
}
And then on your div I would use...
#yourDiv {
-ms-grid-column-align: center;
-ms-grid-row-align: center;
}
Notice that you need to give the parent div a single row and column and a height of 100%. Then you need to set the alignment for the child div (the initial value is 'stretch').
Hope that helps.
Brute force example... use css styles in real implementation...
You can fill the page with a flexbox like this... (note I used the default ms-flexbox css style to get things started and overrode with inline styling to get what I wanted)
<div class="ms-flexbox" style="width: 100%; height: 100%; -ms-flex-direction: column; -ms-flex-align: center; -ms-flex-pack: center;">
<button>Back</button>
<button>Play</button>
<button>Forward</button>
</div>
or your could create a 3x3 grid and put a smaller flexbox inside the middle cell.