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/
Related
I have a common header that consistently gets generated for all site web pages and which uses a div element to wrap a table element that contains one row with three cells.
The table and its cells are used to hold three images, one that shows up a the top-left of the page, one that shows up in the top-center of the page, and one that shows up in the top-right of the page.
The code currently looks like:
<div class="div_Header">
<table class="table_Header">
<tr>
<td class="td_Left"><img src="./IMAGES/Logo_Left.png" alt="Left Logo" /></td>
<td class="td_Center"><img src="./IMAGES/Center_Title.png" alt="Center Header" /></td>
<td class="td_Right"><img src="./IMAGES/Logo_Right.png" alt="Right Logo" /></td>
</tr>
</table>
</div>
In the above, CSS styles are used to do things like align the left image to the far left, the right image to the far right, and the center image to the center of the page.
My question is: Is this the best practice for achieving this or is there a better way? And, if there's a better way, how would that code look?
a 3 floated div solution in a wrapper is usually what would be used.
<div>
<div id="d1">left</div>
<div id="d2">right</div>
<div id="d3">center</div>
</div>
#d1 {
float: left;
border: 1px solid red;
}
#d2 {
float: right;
border: 1px solid blue;
}
#d3 {
margin-left: 100px;
margin-right: 100px;
border: 1px solid green;
}
see: http://jsbin.com/evagat/1/edit?html,css,output
set display:inline-block for all the div's
div {
display: inline-block;
width: 100%;
text-align: center;
}
div > div {
width: auto;
}
div > div:first-child {
float: left
}
div > div:last-child {
float: right
}
<div>
<div id="d1">content 1</div>
<div id="d2">content 2</div>
<div id="d3">content 3</div>
</div>
i believe what u want is to have a table with a bg for the row ,sadly this is not doable out-of-the-box ,instead u can do a couple of things
don't use the html table tags as they are not good for many reasons ,and browsers treats them differently (specially FF) ,so instead use the css declarations.
for each cell use the background-image: url('') along with its properties to have better control of how the image will look (specially if u r going with a responsive layout), if u dont want to give a class for each cell u can use the :nth-child(1,2,3,etc..) if u will stick with the html tags or :nth-of-type(1,2,3,etc..) if u will use a class for the 3 divs.
as a 2nd option u can use #briansol float trick but again floats are not meant for the web.
How do i get rid of the horizontal scrollbar on this code: codepen? I'm seeing it in Safari and Chrome, but not Firefox.
I'm using bootstrap, and I've got roughly the following markup:
<div class="container">
<div class="row">
<div class="messages span6 offset1">
<table class="table">
<tbody>
<tr>
<td class=timestamp>[2:22 PM]</td>
<td>echo|</td>
<td>zot: Got a paste or gist of the code?</td>
</tr>
<!-- many more rows… -->
</tbody>
</table>
</div>
</div>
</div>
And styling:
.messages {
height: 200px;
overflow: auto;
}
.messages .timestamp {
min-width: 75px;
}
The problem seems to be the min-width constraint, but I need that to keep the first column from wrapping. I also need to limit the height of messages to 200 pixels. I can't set overflow-x: hidden on .messages because it'll cut off content.
How about this:-
Use word-break on the last column to avoid it cut off.
word-break
Demo
.messages {
height: 200px;
overflow-y: auto;
}
.messages .timestamp {
min-width: 75px;
}
.messages td:nth-child(3) {
word-break:break-all; /* or use word-break:normal; if you don't want to get the word cut in between*/
}
This will adjust the word-break based on the width available, without hiding the contents.
Use the following css:
.messages {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.messages .timestamp {
min-width: 75px;
}
You could change the height property for .messages to "auto" instead of 200px.
You could increase the width of the table by changing its span6 to a span7, or use a span class to force a width on the message tds that is consistent with the Twitter bootstrap grid structure context.
I couldn't tell you exactly why this is necessary; I actually don't know much about how tables get laid out. But this seems like a solution you could deploy.
A completely alternate thought: why are you using tables to do this? You're not laying out tabular data; you have some semantically related pieces, but they're not tabular in their relationship. Given that, you're breaking one of the cardinal rules: don't use tables for layout! It looks to me like you could probably make this work much more sensibly using div elements, using either float or inline-block with specified widths on them. In that case, your markup would look something like this:
<div class="container">
<div class="row">
<div class="messages span6 offset1">
<div class="message">
<span class="timestamp">[2:22 PM]</div>
<span class="author">echo|</div>
<span class="messageContent">zot: Got a paste or gist of the code?</div>
</div>
<!-- many more rows… -->
</div>
</div>
</div>
Then, your CSS would be fairly straightforward, since you've defined the width value for the span6 (I looked at the actual CSS on the CodePen):
.message {
display: block;
clear: both;
}
.timestamp, .author, .messageContent {
display: inline-block;
vertical-align: top;
}
.timestamp, .author {
width: 75px;
}
.messageContent {
400px; /* You'd obviously need to tweak this down to account for any padding */
}
You shouldn't have the nasty overflow problems, and the divs should fill up their heights in perfectly normal ways. You can also bound them. And there's no overflow issue anymore.
(Perhaps you're where you are because it's something that bootstrap defaults to, in which case: UGH. Break it, or do whatever is necessary to get away from using tables for layout. It will always, always be more pain than it's worth, and it's unsemantic to boot.)
I'm trying to display on one line:
a H1 element aligned to the left of the containing box
several "buttons" (A elements here) aligned to the right of the containing box
all being on the same baseline
Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.
<div id="block1">
<h1>What a great title</h1>
This link can kill you
Click if you dare
</div>
The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically):
http://jsfiddle.net/GlauberRocha/bUsvX/
Any idea?
I did this to my site a quite ago: a h2 on the left, and a button on the right. Screen shot:
Code:
<div id="side_bar" class="clearfix">
<h2 style="float: left;">Charity Map</h2>
<button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
You have a potential problem with that layout - what if your H1 is too long and so are the buttons? They will run in to each other. Because of this, no simple CSS will do - CSS doesn't do magic like that - it would have to imply some sort of solution to the above problem.
However, what you want can simply be accomplished using absolute positioning:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right">
This link can kill you
Click if you dare
</div>
</div>
If you are really afraid that the header and the anchor container might run in to each other depending on generated content, you can use CSS max-width and overflow properties to restrict their containing boxes to some sensible values. The overflowing content will be hidden but at least the layout will not break visually. I assume the following modification of the above code (pardon the duplicate) would serve the purpose:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
This link can kill you
Click if you dare
</div>
</div>
To round off, you cannot achieve this using a straightforward CSS property combination, because with CSS (and HTML), content flows from left to right and top to bottom, or it becomes absolutely- or fixed- positioned which interrupts the flow. Anyhow, it does not want to remain on the same line, and you as the layout designer are left with resolving ambiguities such layout would introduce, such as what to do when the two trains running from each direction front-collide with each other :-)
It's hard to achieve without any wrapping elements or fixed values...
Adding a fixed line-height to both the Heading and the Links would solve your problem rather quick.
Align your Links with 'display:block; float:right' to the right.
Now Set "line-height: 40px;" to both the heading and the links
Should work, but only when the size of the heading doesn't change....
One potential approach to this, depending on your exact needs, is to use a table layout:
#block3 {
display: table;
width: 100%;
box-sizing: border-box;
}
#block3 > * {
display: table-cell;
}
#block3 > *:last-child {
text-align: right;
}
JSFiddle: http://jsfiddle.net/bUsvX/39/
If you want the buttons strictly aligned right, I think this solution requires another element to wrap them:
JSFiddle: http://jsfiddle.net/bUsvX/40/
I had the same issue.. Add display:inline to the h1, then for buttons: float:right; display:inline;
example (with use of Twitter Bootstrap):
<h2 style="display:inline">Users</h2>
<i class="icon-download-alt"></i>XLS
<form style="display:inline; float:right;">
<input type="text" class="input-medium search-query" name="search">
<button class="btn" type="submit">Search</button>
</form>
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.