My HTML looks like this:
<div class="tier-label">Foo</div>
<div class="tier-row">
<!-- dynamic drag/drop zone -->
</div>
This is my CSS:
.tier-label {
width: 50px;
float: left;
min-height: 90px;
overflow: hidden;
}
.tier-row {
margin-left: 50px;
min-height: 90px;
overflow: hidden;
}
The image shows what I want to do and already got working
Yet comes the problem:
The right part tier-row is drop-zone where one can drop items (images). When the space is used it will break and start a new row. This works fine. The problem is, that the left part tier-label is not growing with it.
How can I adjust my CSS to get the left part growing with the right part?
The better solutions is that you should add a <div> around these two elements. Then give that div display: table;width:100% and these elements as display: table-cell
<div class="tier-wrapper">
<div class="tier-label">Foo</div>
<div class="tier-row">
<!-- dynamic drag/drop zone -->
</div>
</div>
JSFiddle: https://jsfiddle.net/9ttfkw5t/6/
I've followed #ralph.m 's suggestion and came up with this solution which was pretty easy
.tier-container {
display: -webkit-flex;
display: flex;
}
.tier-label {
width: 50px;
float: left;
min-height: 90px;
overflow: hidden;
}
.tier-row {
min-height: 90px;
overflow: hidden;
-webkit-flex: 1;
flex: 1;
}
I just had a very similar issue. I solved it with jQuery. Just after the break of the right tier:
$(".tier-label").css("height",($(."tier-row").css("height"));
Related
I'm trying to create a new theme in Wordpress. So far I only used child themes or messed around with some php, html and css seperately. I downloaded _s starter theme and right now I'm somewhat failing with the css. I'm trying to move the widget-area/sidebar to the left side, but no matter wat I try it will stay at the bottom of the page, and the content-area will just get decreased to 75%.
This ist what I tried:
.content-area {
float: right;
margin: 0 0 0 -25%;
width: 100%;
}
.site-main {
margin: 0 0 0 25%;
}
.site-content .widget-area {
float: left;
overflow: hidden;
width: 25%;
}
I know this is pretty basic stuff and I feel kind of dumb right now, but no matter what I do the sidebar won't come to the side. I also tried setting pixel width of 200px for content and widget-area. I'll keep trying, but if somebody might know the answer and could help me I would be really happy! I would prefer not to set a z-index.
Thanks in advance,
Carlos
EDIT: this is how it looks like in chrome site inspector
<div id="primary" class="site-main">blabla</div>
<div id="secondary" class="widget-area">blabla</div>
EDIT2: Could it have something to do with the dummy data that I imported? I mean all the dummy content in the widget area should not be a problem, as I set overflow: hidden; am I right?
It’s hard to say without seeing your HTML, but I think your problem is that the content area width needs to be set to 75%.
FWIW, here’s a simple example of a fixed-width sidebar layout using flexbox:
.content {
background-color: lightBlue;
padding: 10px;
}
.sidebar {
background-color: yellow;
padding: 10px;
}
#media all and (min-width: 600px) {
.wrapper {
display: flex;
}
.content {
flex-grow: 1;
}
.sidebar {
flex-shrink: 0;
margin-left: 30px;
width: 260px;
}
}
<main class="wrapper">
<div class="content">
<p>Main content</p>
</div>
<div class="sidebar">
<p>Sidebar</p>
</div>
</main>
I built a theme with underscores and for some reason, they have get_sidebar() outside of the closing tag. They also do not have it inside of tags. What I did was first put get_sidebar() inside of aside tags and move that into after the closing tag. I didn't want to set the main tag to display: flex so I added a wrapper tag (div.sidebar-page) around and , then I set that to display: flex. And since you want the aside\sidebar on the left you can just set the flex-direction to row-reverse.
.sidebar-page {
display: flex;
flex-direction: row-reverse;
margin: 0 auto; /* optional */
}
With this HTML structure:
<div class="site-content">
<div class="site-main">
Main content here.
</div>
<div class="widget-area">
Sidebar content here
</div>
</div>
And this CSS:
.site-content{
width: 100%;
}
.site-main {
float: right;
width: 75%;
}
.site-content .widget-area {
float: left;
overflow: hidden;
width: 25%;
}
You'll have it.
Running example here: https://jsfiddle.net/6a3ow5xq/
I want to make the footer stay at the bottom of every page without making so many classes.
What I need is a footer that stays at the bottom of every page, no matter if the content is too scarce, without being "sticky," or using position: fixed.
I've done my research and looked at other answers on other questions but they've either got so many classes, they use position: fixed, or they use JS.
Here's the code for the layout.pug file:
.footer-wrapper
footer © 2018 Demo Website
And the code that I tried in SCSS is here:
.footer-wrapper {
// min-height:100%;
position: relative;
display: flex;
flex-direction: column;
flex: 1;
}
footer {
background-color: #0A0A0A;
color: white;
// height: 60px;
bottom: 0;
text-align: center;
position: absolute;
width: 100%;
padding: 1.5rem;
// display: grid;
// margin-top: auto;
// padding:10px;
}
Thanks a lot!
Something like this should work. Let flex-grow property handle the height of the .content container.
<div class="main">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
<style>
.main {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100vh;
}
.content{ flex-grow: 1; }
</style>
There's a really cheap way of doing this, which is actually quite good.
Assuming you're using a header as well, you could do something like this:
<header>
<div id = "body">
<footer>
...
<style scoped = "scss">
#body {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
margin-top: <header_height>;
margin-bottom: <footer_height>;
}
</style>
Basically it sets the body content to fill up the entire page, but leaves room for the header at the top of the page, and room for the footer at the bottom of the page (if there is no flexing). When there is not enough room to fit the body content on the page, the body div will flex in the column, automatically moving the footer with it.
Hope this helps!
I am using a template that was purchased to develop a site, and need to insert an image on the page without pushing the content down. Below is the link to the page I am working on:
http://www.onepropertyway.com/WorkOrder/default.aspx?woid=26&code=8lPRt3hxtg&vid=7
I recently added the following div with the logo:
<div style="margin-left:-20px; display:inline; *zoom:1;text-align:center">
<img src="/uploads/logos/8_100h.gif">
</div>`
As you can see, the content of the page is being pushed down. I'd like this image to appear in the middle just between the main green menu, and the horizontal line without pushing any content down. I tried using z-index as well, but that did not work either. I am sure this is pretty simple for a seasoned CSSer, but that's not me unfortunately!
Here is a link to the desired look:
desired look
Give this css to imgContainerclass.
.imgContainer {
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: -23px;
}
.row_6 {
position: relative;
}
use this for image set in center
.container{
position:relative;}
.absolute_logo{
width:200px;
height: 70px;
position:absolute;
left: 0;
right:0;
margin:auto;
top: -27px;
}
.absolute_logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
<div class="container">
<div class="absolute_logo">
<img src="/uploads/logos/8_100h.gif" />
</div>
</div>
Here is the img container:
<div class="imgContainer">
<img src="/uploads/logos/8_100h.gif">
</div>
Here is the css. This will center the img below the menu and above the horizontal line:
.imgContainer {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
}
Take the padding off of the h2 "Word Order #26" and header like so. The padding is adding space above the h2 and below the menu. This removes the padding.:
header, h2 { //probably better if you make classes for these elements so you can target them
padding: 0;
}
You may want to add a class like this:
<header class="headerClass">......</header>
<h2 class="workorder">Work Order #26</h2>
.headerClass {
padding-bottom: 0;
}
.workorder {
padding-top: 0;
}
I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?
.container {
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
* {
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
}
.main-el {
box-sizing: border-box;
padding:0 2em;
width: 70%;
}
.side-el {
box-sizing: border-box;
width: 30%;
}
<div class="container" style="background-color: blue; height: 100px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
Here's a way to do this inspired by bootstrap:
.fixed-top {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
}
This gives your flex-box room to breathe and do it's flex-box thing. If your flex-direction is column, you could use top, left, bottom instead.
This works because when you give an element a fixed position and a left and right of 0 or a top and bottom of 0, the element is stretched to fill the space from left to right, or top to bottom. That in turn allows a flex-box to use the amount of space you would expect without position fixed.
You can't.
As explained by the CSS2.1 spec:
Absolutely positioned boxes are taken out of the normal flow.
And the Flexible Box Layout spec confirms that:
An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.
(Emphasis mine)
#Daniel , I know this is very late but ... while the accepted answer is correct, I don't feel it's very helpful.
I had the same question (which is how I came across this post), and the solution I think I'll go with is to wrap the position fixed element within the flex element.
Here's a (very ugly) example
Relevant Markup
<aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl">
<div class="Layout-aside-inner">
<button ng-click="collapsed = !collapsed">
<span ng-show="collapsed">></span>
<span ng-hide="collapsed"><</span>
</button>
<ul class="Layout-aside-content">
<li ng-repeat="i in items">{{i}}</li>
</ul>
</div>
</aside>
Relevant CSS
.Layout-aside {
order: 0;
min-width: 140px;
width: 140px;
background-color: rgba(0, 255, 0, .4);
transition: width .4s, min-width .4s;
}
.Layout-aside.isCollapsed {
min-width: 25px;
width: 25px;
}
.Layout-aside-inner {
position: fixed;
}
.Layout-aside.isCollapsed .Layout-aside-inner {
width: 25px;
}
.Layout-aside.isCollapsed .Layout-aside-content {
opacity: 0;
}
position:sticky was mentioned by Juozas Rastenis above but without code example.
Here's a minimalist example:
* {
box-sizing: border-box;
}
body {
display: flex;
margin: 0;
}
nav {
width: 20%;
height: 100vh;
top: 0; /* this is required for "sticky" to work */
position: sticky;
background: lightblue;
padding: 1rem;
}
main {
height: 3000px; /* cause scroll */
background: lightpink;
flex-grow: 1;
padding: 1rem;
}
<body>
<nav>
sidebar here
</nav>
<main>
content here
</main>
</body>
You can achieve it with a css alternative position: sticky
It acts great but the only problem is browser support (June 2018):
https://caniuse.com/#feat=css-sticky
Hope it gets better soon.
A far simpler solution would be to use overflow-y:scroll and height: 100vh on the main-el container. This will give the appearance of fixed position to the side-el container without resorting to position: fixed.
You are saying you want position:fixed;-like behavior that plays together with flexbox. As mentioned in the accepted answer, applying this property to an element drops it out of the normal flow, so this isn't really possible.
If what you want is to have a fixed sidebar .side-el and a scrollable content box .main-el as the items of a flex container, here's how you might do this:
Disable scrolling in the flex container's parent; let's assume it's
<body>, as you don't provide div.container's parent. Also, hard-set
it's height to viewport-height (100vh) so that no part of the body's
box remains outside view (imagine the body's box normally extending
beyond your screen to contain the entire document; you don't want
that, if you are to disable the ability to move the viewport via
scrolling).
Set the flex container's (.container) height to that of it's parent.
Selectively re-enable scrolling for the content box (.main-el).
In CSS:
body{
overflow: hidden;
height: 100vh;
}
.container {
display: flex;
height: 100%;
}
.main-el {
overflow-y: auto;
}
You can achieve this without position: fixed; by just adding overflow: auto; and height: 100%; to the flex-item that contains the long content:
.container {
display: flex;
}
.main-el {
padding:0 2em;
width: 70%;
overflow: auto;
height: 100%;
}
.side-el {
width: 30%;
}
<div class="container" style="background-color: blue; height: 300px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
I had the same issue, I actually just found a way to have flex-box, a width for the nav bar, and center it while in a fixed position.
nav {
display: flex;
height: 50px;
width: 90%;
left: 5%;
position: fixed;
}
I wanted to be able to have a flex-box nav bar in a fixed position but centered. So what I did was do the left 5% since that's equal to half of the 10% width left over. Try it out, it might help you! :)
For some reason my divs won't center horizontally in a containing div:
.row {
width: 100%;
margin: 0 auto;
}
.block {
width: 100px;
float: left;
}
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
And sometimes there is a row div with just one block div in it. What am I doing wrong?
To achieve what you are trying to do:
Consider using display: inline-block instead of float.
Try this:
.row {
width: 100%;
text-align: center; // center the content of the container
}
.block {
width: 100px;
display: inline-block; // display inline with ability to provide width/height
}
DEMO
having margin: 0 auto; along with width: 100% is useless because you element will take the full space.
float: left will float the elements to the left, until there is no space left, thus they will go on a new line. Use display: inline-block to be able to display elements inline, but with the ability to provide size (as opposed to display: inline where width/height are ignored)
Alignments in CSS had been a nightmare. Luckily, a new standard is introduced by W3C in 2009: Flexible Box. There is a good tutorial about it here. Personally I find it much more logical and easier to understand than other methods.
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block {
width: 100px;
}
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
Using FlexBox:
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
.row {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center; /* for centering 3 blocks in the center */
/* justify-content: space-between; for space in between */
}
.block {
width: 100px;
}
The latest trend is to use Flex or CSS Grid instead of using Float. However, still some 1% browsers don't support Flex. But who really cares about old IE users anyway ;)
Fiddle: Check Here
Another working example, using display: inline-block and text-align: center
HTML:
<div class='container'>
<div class='row'>
<div class='btn'>Hello</div>
<div class='btn'>World</div>
</div>
<div class='clear'></div>
</div>
CSS:
.container {
...
}
.row {
text-align: center;
}
.btn {
display: inline-block;
margin-right: 6px;
background-color: #EEE;
}
.clear {
clear: both;
}
Fiddle: http://jsfiddle.net/fNvgS/
Although not covering this question (because you want to align the <div>s inside the container) but directly related: if you wanted to align just one div horizontally you could do this:
#MyDIV
{
display: table;
margin: 0 auto;
}
If elements are to be displayed in one line and IE 6/7 do not matter, consider using display: table and display: table-cell instead of float.
inline-block leads to horizontal gaps between elements and requires zeroing that gaps. The most simple way is to set font-size: 0 for parent element and then restore font-size for child elements that have display: inline-block by setting their font-size to a px or rem value.
I tried the accepted answer, but eventually found that:
margin: 0 auto;
width: anything less than 100%;
Works well so far.
I've use this two approaches when I need to handle horizontal div alignment.first (Center Aligning Using the margin Property):
.center-horizontal-align {
margin-left: auto;
margin-right: auto;
width: (less than 100%) or in px
}
Setting the left and right margins to auto specifies that they should split the available margin equally. Center-aligning has no effect if the width is 100%.
and the second:
.center-horizontal-align {
display: table
margin-left: auto;
margin-right: auto;
}
Using the second approach is convenient when you have several elements and you want all of them to be centred in one table cell(i.e. several buttons in one cell).
instead of float use flex
.row {
display: flex;
flex-direction: row;
}