Im trying to build something like this in my wordpress site using elementor pro. i want the slider to show 1 recipe and also a little bit of the next one so you can see there are multiple recipes and that u need to scroll to the site.
example of how it should look
I already have a custom loop template. and use the widget post as of right now.
this is how it looks right now
i dont know the css behind this and cant seem to find it anywhere on the internet. hope someone can help me here.
Seems like you want to put the widgets in a row and display scrollbar.
I believe there are a few options how to do it, but basically what you need to add to your css is overflow: auto - that means to show a scrollbar when there is not enough space to display all the widgets together.
An example with overflow: auto and display: flex:
.widgets-container {
display: flex;
overflow: auto;
}
.widget {
flex-shrink: 0;
/* visual styling */
width: 300px;
height: 200px;
line-height: 200px;
border: 2px dashed green;
margin: 10px;
text-align: center;
vertical-align: middle;
display: inline-block;
}
<div class="widgets-container">
<div class="widget">Widget 1</div>
<div class="widget">Widget 2</div>
<div class="widget">Widget 3</div>
</div>
im attempting to make a grid-style Tumblr theme using inline-block, but there have been some... complications. The posts are automatically aligning with each other vertically. That wouldn't be a problem if they were all the same dimensions, but the posts vary between heights. To sum it up, Im looking to create two columns of posts [of varied heights] that do NOT have any kind of vertical alignment. I've tried a number of different solutions, but nothing seems to work.
The first link is the JSFIDDLE.
This is how it currently looks versus how I would like it to look.
CSS
#entries {
width: 600px;
{block:PermalinkPage}width: 630px;{/block:PermalinkPage}
position: relative;
padding: 0px;
margin: 10px 0px 0px 0px;
}
.posts {
position: relative;
text-align: left;
background: {color:Posts};
width: 250px;
{block:PermalinkPage}width: 500px;{/block:PermalinkPage}
margin: 20px;
padding: 0px;
word-wrap: break-word;
display: inline-block;
clear: right;
}
.posts nth-child(even) {
float: right;
}
Any tips or possible alternatives would be excellent because I cannot for the life of me figure this out. Im starting to think the vertical alignment is just inherent to inline-block?
Only css is hard but you can use a javascript plugin gridalicious here is the link to github https://github.com/suprb/Grid-A-Licious
<div id="container">
<div class="item">
<img src="../">
<p>Text </p>
</div>
<div>
Here an example http://jsfiddle.net/wqfoku85/
Please do not mark this as a duplicate as i have got all of the correct code (as far as i can see) in and i think something is somehow over riding it. Used Chrome Inspector but it isnt picking up any problems.
I am trying to vertically align the text in the boxes (i dont want to id them all separately and pad them as if the text needs updated then so will the css).
Here is the code:
CSS:
.draggable{
color: #ffffff;
background-color:#EE3C96;
display:table-cell;
vertical-align:middle;
font-size:12px;
font-weight:bold;
text-align: center;
width: 90px;
height:90px;
float: left;
margin-left: 10px;
padding: 5px;
}
HTML:
<div class="draggable">
Lost time - employee absence
</div>
<div class="draggable2">
"Safe Place" to work
</div>
<div class="draggable">
Lost resources - employees leaving
</div>
<div class="draggable">
Financial penalties
</div>
And here it is on Codepen:
http://codepen.io/lbarnes/pen/vkrib
draggable and draggable2 are essentially the same (need them separate as it is used in the jQuery :)
Thanks in advance, hopefully someone can find something as i have tried everything lol!!
I recommend you to use the double span tip to vertically align your multiline text.
First, a simple exemple
And now, adapted to your needs :
<div class="draggable">
<span><span>
Lost time - employee absence
</span></span>
</div>
<div class="draggable2">
<span><span>
"Safe Place" to work
</span></span>
</div>
You can keep your current HTML markup, and add these spans via jQuery (I won't recommend it) :
$('.draggable, .draggable2').contents().wrap('<span><span></span></span>');
Then, add this CSS to get your vertical alignment :
/* Vertical align */
.draggable, .draggable2 {
display: block;
width: 90px; height: 90px;
line-height: 90px;
}
.draggable>span, .draggable2>span {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.draggable>span>span, .draggable2>span>span {
line-height: 20px;
}
Your CodePen forked
You can put the text in the box between <p></p> tag than add in your css the following lines:
.draggable p {vertical-align: middle;}
.draggable2 p {vertical-align: middle;}
You can add the following code to the draggable classes to solve the issue.Remove the display:table-cell
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
This would center the text inside the div both horizontally and vertically
This works for webkit browsers.For Mozilla
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
and IE
display:-ms-box;
-ms-box-pack:center;
-ms-box-align:center;
More info on browser support
When i select Dreamweaver cs4 layout: 3 column liquid, header and footer, the sidebars don't touch the footer at the bottom. If i apply different color to the sidebar1, it appears to be just hanging on the side. How to make it touch the footer?
Ah I see, the reason there's a gap is because the content inside the middle column is pushing the parent div downwards, but not the side columns. The side columns will only grow to fit the content inside them.
What you're after is called Faux Columns. See this A List Apart article
I had the same issue with a site I had created in Dreamweaver and here is the way I solved it:
I used four div tags - one main container which contained the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar_left {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
.sidebar_right {
width: 220px;
float: right;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both." The footer doesn't even have to contain anything if you don't want it to, it just needs to be there.
Then, simply set up your web page like this:
<div id="container">
<div class="sidebar_left"></div>
<div class="sidebar_right"></div>
<div class="content"></div>
<div id="footer"></div>
</div>
If you want more information, you can read my blog post about this at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Let me know if you have any questions. Hope this helps!
I was wondering if there were any simple examples that did the following
* A right and a left fixed column with a fluid center.
With full height and width and a header and footer.
* A single left fixed column with a fluid content column 2.
With full height and width and a header and footer.
* A single right fixed column with a fluid content column.
With Full height and width and a header and footer.
I've tried some methods (such as the ones listed on listapart) but they seemed really complicated and they used a lot of divs, or they just didn't support padding.
Thanks in advance
Check this site out:
http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm
Other layout examples from the above:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http://matthewjamestaylor.com/blog/perfect-3-column.htm
The examples you found in alistapart.com are as complicated as they need to be, and every serious example that you can find about those layouts supports padding. You will find (and already found) a lot of good examples about it in the internet, just spend some time trying to understand them and you will see that they are not so complicated, in the end.
Anyway, I have a good demo layout similar to the second you are looking for, here:
http://www.meiaweb.com/test/BMS_DM_NI/
Basically, the html is this:
<body>
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<div id="navigation">
<!-- navigation content -->
</div>
<div id="content">
<h2>Content Title</h2>
<p>
<!-- main content here -->
</p>
</div>
</div>
</body>
And the css is:
html {
overflow: auto;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
line-height: 1.5em;
}
#head {
height: 20px;
background-color: #666;
color: #AAA;
padding: 20px 20px;
}
#navigation {
width: 210px;
padding: 20px 20px;
background: #efefef;
border: none;
border-right: solid 1px #AAA;
float: left;
overflow: auto;
}
#content {
margin-left: 250px;
padding: 20px 20px;
}
I think it's simple enough, and it works in all modern browsers.
I know that it's badwrong to do, and I'm a semantic coder through-and-through (that wasn't meant to rhyme), but I still use a single layout table to do columns.
Why? It's interoperable and simple. It doesn't require ridiculous CSS hacks that just barely hold things together (seriously, floats are meant for typography, not layout). It displays identically in every browser in current use. It. Just. Works. It's a semantic hack, but sometimes you just gotta do what you gotta do.
However, there is light on the horizon. The table-* display values for CSS make equal-height columns trivial, though they can still violate source order (you still need your left-most column to be before your center column, even if it's a nav section and should come near the end of your page code). IE8, and all non-IE browsers, support these already.
CSS3 Grids and CSS3 Template Layout will both solve this issue properly, but they're still quite a bit away from being usable. A coder can dream, though, right?
You can also look at Layout Gala - 40 examples of different two and three percent and fizxed-sized column layouts.
I have reworked my sample template so you can see all three of your requested formats in action.
This is a CSS solution, no tables involved. I have set this up so the side columns are fixed width the header/footer are fixed height. Everything else is fluid.
With all modern browsers, excepting for IE7, the content is centered both vertically and horizontally. IE7 has issues with its box model. I believe IE8 have these resolved.
The center box does center vertically in IE7 because I nested a 1 cell table in the center div as a hack around IE7 box model problems. I know this is dumb and ugly but it was just to show it worked.
See it in action - Three Column Full Screen Layout
I am a bit surprised this answer did not garner a single vote or capture the bounty. It works, its simple, and it fulfills everything the OP asked for. Oh well.
The CSS
DIV { text-align: center }
#h0, #f0 { float: left; clear: both }
#h1, #f1 { height: 100px; float: none; width: 800px }
#l0 { float: left; clear: left; }
#c0, #r0 { float: left; clear: none }
#l1, #r1 { width: 150px }
#c1 { width: 500px }
#l1, #r1, #c1 { height: 350px }
#h0, #f0 { background-color: orange }
#l0 { background-color: red }
#r0 { background-color: blue }
#c0 { background-color: yellow }
#h1, #f1, #l1, #r1, #c1
{ display: table-cell; vertical-align: middle; }
The HTML
<div id="h0"><div id="h1">
header
</div></div>
<div id="l0"><div id="l1">
left column
</div></div>
<div id="c0"><div id="c1">
<img alt="dilbert (3K)" src="../gif/dilbert.gif" height="82" width="80" />
</div></div>
<div id="r0"><div id="r1">
right column
</div></div>
<div id="f0"><div id="f1">
footer
</div></div>
http://www.alistapart.com/articles/holygrail
That should be exactly what you need.
Take a look at Yahoo's YUI: Grids builder.
I found the Liquid two column layout at Floatutorial extremely helpful when setting up a full height two column layout - fixed left column with a stretchy right column, with a header and foot row to boot. In their example, they suggest the left column is used as navigation, but it could be anything.
With Floatutorial, not only do you get a sample HTML structure and CSS out of it, but when you're done, you understand why you have what you end up with.
I briefly tried the YUI: Grids builder as suggestd by #JohannesH, and had some small problems with it, but the worst problem is that it was so convoluted that I had no idea why it wasn't working, or why it was supposed to have done.
Edit: there's also a tutorial for a liquid three column layout (which I've not used), and a whole bunch of other tutorials that use floats.
In response to a message from the original poster, here's how I would do the first request with a <table> (the others are trivial modifications):
<style>
body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
border-collapse: collapse;
}
#top, #left, #center, #right, #bottom {
border: 1px solid black;
text-align: center;
vertical-align: center;
}
#left, #right {
width: 200px;
}
#top, #bottom {
height: 200px;
}
</style>
<table id="container">
<tr>
<td colspan=3 id="top">header</td>
</tr>
<tr>
<td id="left">left</td>
<td id="center">center</td>
<td id="right">right</td>
</tr>
<tr>
<td colspan=3 id="bottom">footer</td>
</tr>
</table>
There is a pre-fabbed css grid system that is based on the Golden Rule, and implements all types of column formats quite readily. Check out 960 Grid System. You can accomplish your goals without the use of tables. The nice thing that by using a pure CSS solution you can alter your layout more rapidly.
There is also a jQuery fluid implementation that has a fluid layout that you may be interested in.
This should have all you need:
http://maxdesign.com.au/presentation/page_layouts/
And a more general solution to all your CSS problems:
http://www.blueprintcss.org/
you should check out Elastic CSS Framework:
http://elasticss.com/two-columns-based-layout/
Cheers.