I'm using ::after to create shadow to decorate a element (say A).
In order to do this, I set the overflow: hidden for A to hide undesired part of the shadow.
It looks perfect, but there is a problem after I added a input box to A. If I click in the input and drag, the A layer will scroll, and the rest part of shadow will show up.
Here is the demo and the simplified code:
<div style="width: 200px; height: 30px; overflow: hidden; border: 1px black dotted;">
<div style="height: 30px; border-bottom: red 10px solid;">
<input style="width: 200px" placeholder="click and drag me downward" />
</div>
</div>
I'm looking for a pure CSS solution to fix this problem. Thanks ahead.
This isn't an ideal solution, but I don't think a pure CSS solution exists to this problem (unfortunately), it makes me wonder whether this has been logged as a bug with the Chrome team.
jQuery should be as follows:
$('input').on('mousedown', function(e){
$(e.target).focus();
e.preventDefault();
});
(I know I shouldn't assume you're using jQuery, if needed I can provide you a pure JS solution, it'll just be more complicated).
Fiddle: http://jsfiddle.net/jzb5a/
EDIT: Apparently this is a known bug (https://bugs.webkit.org/show_bug.cgi?id=114384) it's dissapointing that four months on there still hasn't been a fix though.
Finally come to an solution, which is not that perfect but fixed the problem anyway.
As the background overflows, and the input on the same layer would cause the problem. So just move the input to another layer which doesn't overflow. demo
<div style="position: relative; width: 200px; height: 30px; border: 1px black dotted;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden;">
<div style="height: 30px; border-bottom: red 10px solid;"></div>
</div>
<input style="width: 160px" placeholder="click and drag me downward" />
</div>
How do I create a div that has a fixed height and stays on the bottom of the page, and another one above it occupying the remaining vertical space?
Something like this should achieve what you're looking for.
Try like this
See Demo
Use height: inherit for your first div which takes the remaining height available
html
<div id='container'>
<div id='first'>
First Div content
</div>
<div id='second'>
Second div content
</div>
</div>
Css
#container{
width: 600px;
height: 450px;
border: 1px solid black;
}
#second{
position: relative;
bottom: 100px;
height: 100px;
background-color: green;
}
#first{
height: inherit;
background-color: red;
}
I don't think any of the other examples really work nicely when the page is resized.
This type of thing is best accomplished with a few lines of javascript, as its not something that CSS does a great job of generally speaking.
See here for a working demo. mod.it requires that you view the demo in chrome but the code in the demo is cross browser and will work anywhere.
https://mod.it/6hQaRsEL
I'm trying to position some icons inside a table cell <td>, but the result is that they are position top right of the screen (outside of the table cell).
Short version of my code is like this:
<td class="td_name">
<div class="actions">
<div class="floatLeft iconset_16px update_sprite_bw_16px" title="Update"></div>
<div class="floatLeft iconset_16px settings_sprite_bw_16px" title="Settings"></div>
<div class="floatLeft iconset_16px delete_sprite_bw_16px" title="delete"></div>
</div>
<div class="gal_name">
Some name
</div>
</td>
Where td_name position is set to relative and action is set to absolute. This should work, but not this time.
What am I missing here? Se full code example on jsFidle.
NOTE
I'm trying to position the action DIV inside the <td class="td_name">.
If your jsFiddle stills shows the iconset_16px divs in the top right corner of the HTML window in jsFiddle, then your example is not working either.
#sim_gallery .defaultList tr td.name { position: relative; width: 200px; height: 100px; }
#sim_gallery .defaultList tr td .actions { position: absolute; top: 0px; right: 0px; margin: 5px;}
NOTE 2
This is for everyone that is not familiar with the usage of tables.
In the early 90's it was very popular and very simple to use tables for page layout. But designers soon understood that changing layout was a pain in the a**. The use of tables also have several more disadvantages.
So yes, you can design anything without ever using tables.
So when do yo use tables? Tables are normally used for displaying tabular data. It's kind of Excel sheet for the web. My experience is that it's much easier to structure table data, than list elements and div's. So in some cases I use tables knowing that this will not have any negative effects on the website what so ever.
So please, do not start a debate about how bad is is to use tables. Use your energy to help me solve my problem :)
After some more testing, it looks like it's not possible to position a table cell. Which kind of makes sense. But I wasn't trying to position the table cell itself, but the content inside the cell.
After some more research on the web (and some useless debate here), I found this article. This basically gives me the short answer: No, it's not possible.
In their example, they use jQuery. But since I still want to do this using CSS, I came up with an alternative solution.
I simply wrap my content inside a DIV in the table cell, and make sure this DIV is as large as the table cell. Voila, all is good :)
.wrapper { width: 200px; height: 100px; line-height: 100px; position: relative; border: solid 1px #666; }
.actions { position: absolute; top: 0px; right: 0px; }
.iconset_16px { height: 16px; width: 16px; background-color: #87ceeb; margin: 3px;}
.floatLeft { float:left!important; }
<table>
<tr>
<td>
<div class="wrapper">
<div class="actions">
<div title="Update" class="floatLeft iconset_16px"></div>
<div title="Settings" class="floatLeft iconset_16px"></div>
<div title="delete" class="floatLeft iconset_16px"></div>
</div>
<div class="gal_name">
<a title=" Adventure" href="#"> Adventure</a>
</div>
<div>
</td>
</tr>
</table>
Don't know entirely what you're trying to do,
but have you tried setting position: relative on your <td> and then
adjusting the position of your icons as needed?
http://jsfiddle.net/Z3kpr/1/
Your div elements under actions are floating left with your !important flag (bad idea for this very reason) so they are ignoring the positioning of their parent.
Remove the float and they will be positioned properly.
Here's your updated fiddle with one of them fixed so you can see the difference.
http://jsfiddle.net/u9p4u/1/
I have to show a list of divs in a seamless order, thought their heights may vary.
Here's an example:
As you can see, when an element is floated to the left and is positioned next to another float it generates a white space until the next float. This doesn't happen the other way around. I can't seem to find a way around this and as I use javascript to filter out certain elements (divs) I can not create two different columns.
Here's the html/css:
<div style="width: 200px;">
<div style="float: left; width: 50%; background-color: green;">
<p>Float1</p>
</div>
<div style="float: left; width: 50%; background-color: blue;">
<p>Float2</p>
<p>expanded</p>
</div>
<div style="float: left; width: 50%; background-color: yellow;">
<p>Float3</p>
<p>expanded</p>
</div>
<div style="float: left; width: 50%; background-color: gray;">
<p>Float4</p>
</div>
<div style="float: left; width: 50%; background-color: red;">
<p>Float5</p>
</div>
</div>
Any ideas how to get it to look so that Float1 and Float3 don't have empty room between them?
In your example it might be possible using float:left for the uneven blocks and float:right for the even ones but in general this is not possible using just css. You will need javascript or 2 separate columns (or a combination...).
As you are using javascript already, it would be pretty easy to load all visible blocks in an array and divide them over two columns.
It seems that toggling float:left; and float:right; does what you want: http://jsfiddle.net/cELff/1/
Try using display: inline-block instead of float: left.
appreciate this q is old, for others that find this in a search ( like I was searching ).
the reason for the space is the heights. try setting a height on the floated items.
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.