What's the best way to obtain three texts on the same line: one to the left, another in the middle, and the third one to the right?
+---------------------------------------------------------------------+
|Page generated in 1 ms Copyright 2010 Email me|
+---------------------------------------------------------------------+
One text may be longer than the others, but their position must not change. The one in the middle must always be in the middle, regardless of the length of the others.
Doing it with tables would be easy, and I already know how to do that, so "correct" solutions only (using tables for layout is wrong).
EDIT: many people assumed for some reason that I needed to display tabular data over several rows. I'm not sure why they thought it was the case, but:
It will have only one row
It's not tabular data
For this reason a table is inappropriate, and the solution only needs to work with one line.
Taking your question literally, here's how I'd do it.
<div style="position:absolute;text-align:left">Text 1, a bit longer</div>
<div style="position:absolute;width:100%;text-align:center">Text 2</div>
<div style="text-align:right">Text 3</div>
Whether this will work for you in practice, depends on what the texts actually are. Note that if the divs' container is too narrow, the texts will overlap with one another, and not wrap like they would if they were in table cells.
If you want table-like layout behaviour, you have two choices. You can use tables, or you can use the CSS display:table, display:table-cell etc properties. Sadly, the latter is not supported in IE6 or IE7, so probably isn't really usable on the web just yet.
I found a very good way to do this that works even if one or more of the paragraphs will span over multiple lines.
<p style="float: left; width: 33.3%; text-align: left">Page Statistics</p>
<p style="float: left; width: 33.3%; text-align: center;">© 2010</p>
<p style="float: left; width: 33.3%; text-align: right;"><a>Email me</a></p>
you can do this with a unordered list and some CSS, if you want to stay 'semantic' that is
<ul id="text_block">
<li class>Text 1, a bit longer</li>
<li class>Text 2</li>
<li class>Text 3</li>
</ul>
and the CSS
ul#text_block {display: table; margin: 0; padding: 5px;}
ul#text_block li {list-style: none; display: inline; margin: 0 40px 0 0;}
hope this helps
So you want to display three pieces of data, over and over, stacked in a vertical pattern that represents some sort of data, options, etc?
Sounds to me like that's exactly what tables are for.
/* Removed box comment, OP fixed it */
Maybe you need to look at grid design system?
http://www.subtraction.com/2004/12/31/grid-computi
http://www.subtraction.com/pics/0703/grids_are_good.pdf
Or, you always can use float div's, playing by float, width and poisition CSS properties.
Related
I have the following HTML:
<ul class="baseList">
<li>
<ul class="baseListColumn">
<li>10.09</li>
<li>My title is here</li>
<li>Author</li>
</ul>
</li>
</ul>
with the following css:
.baseList {
border: 1px solid #F00;
}
.baseListColumn {
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
}
My problem is, that this centers the content of every li of baseListColumn and gives every column the same width. I would like to make the columns fit it's content apart from the last li element (Author) and float the content of the last li element right.
This is what happens with the current code: http://jsfiddle.net/aLGRJ/1/
10.09 My title is here Author
asdfasdfasdfasdf My title is here abababa Author
In fiddle you can even see what happens if the width of the root li is big enough while the equal splitting of the columns is too small to contain some of the content.
This is what I would like to have:
10.09 My title is here Author
asdfasdfasdfasdf My title is here abababa Author
I can't guarantee that all the columns will always have the same length otherwise I would use absolute positioning and at the same time I don't want to reserve too much unnecessary space for the first column for example. Note I'm planning to use this for lists with more columns than just 3 as well.
Is this one of the cases where a table would be the better solution? Anyways I hope someone can help me, and if there is a better solution to this, I'm always open for suggestions.
It looks like a table would be a better solution, not because of the display properties, but because of the nature of your content (remember, organizing content is still the responsibility of HTML).
Take a look at this page.
While most of the points are generally agreeable, I tend to focus on two things:
Don’t Use Faux Tables (<p>, <div>, etc.)
Tables Should Be Filterable & Sortable (If more then just a few rows)
You can generate all of the CSS yourself... or, use your favorite ECMAScript library to make short work of styling.
I'm running into a weird issue that I've never noticed before. I have the following code:
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li>
<li>
No
</li>
<li>
No
</li>
</ul>
</div>
Very simple block of code. Ignore the second no, as it's literally only there to give me a third li to help me figure this out. Now, here's the CSS...
div.feedback {
position: relative;
}
span {
float: left;
}
li {
display: inline-block;
padding: 0;
margin: 0;
border-left: 1px solid #000
}
Now, here's what's happening:
See the extra spacing that's seemingly coming from nowhere? I moved to border-right just to test it, and got even more inconsistent results:
Now, the 3rd LI has 0 padding and margin, as it should. The other two still have a spare space.
Lastly, the browser comprehends the proper height and width of the li, and attributes no margin or padding to it. According to the browser, the text should be smashed up against the border, as I also expect.
Can someone please explain what this extra 3-5 pixels of spacing is on the right of the text?
That's because linebreaks are treated as a space in HTML. You've specified your inner elements to be inline-block, which means that spaces between them are displayed.
You can either:
Set the font-size on the parent to 0, and then back to normal on the <li>,
Simply eliminate the linebreaks between <li>s.
A third (lesser) option exists, it's the use of float.
float was originally meant to allow for elements to be pushed to the edges of the container, while having text flowing around it freely (like images in a newspaper). That feature was exploited used for layout as well, when people discovered it would make block level elements stack horizontally.
Using float would mean you need to clear after yourself, by either using a clearfix, or having an element with clear: both set on it.
This option is lesser, because much like tabular layouts, it's not the original purpose of float, implementation may differ between browsers and between time periods, but most importantly, it adds the overhead issues of clearing. (So stick with display: inline-block if you can help it!)
It's from white space in your code. See this jsFiddle example
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li><li>
No
</li><li>
No
</li>
</ul>
</div>
Somewhere you have a display:inline-block.
The inline-block display behaves like this. It shows any space in the code and newlines as spaces.
You have to either manually remove spaces and returns in the HTML or to change the display to something else.
On a website i'd like to show products in the following structure:
[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]
Resulting in a product display such as:
Now, the thing is that there are multiple products on display, just like this one, but sometimes they are aligned next to one another.
The problem is that i would like to make the price appear at the same position (vertical wise) in all blocks. Of course i see only one solution at first - overflow:hidden on the detail text / feature listing. But then i'd end up having content cut off, right?
Another problem is that there should also be a more>> button (expander) that appears if the UL/LI-listing is longer than 4 entries. Just like this:
I thought this through quite often, but i seem to find no proper solution. For one i will never know if an LI will be multiline, as the content might be longer or shorter - and i cannot calculalate this serverside, as the font width/height might vary.
I'd appreciate any constructive input here.
Thank You!
As long as you have a fixed width you could use inline-block mixed with negative margins : http://jsfiddle.net/bymaK/11/
The sad thing is that it works in Chrome, Opera and IE 9 but completely break Firefox as it's management of with:0 and negative margin seem buggy (Added issue #709014 to Bugzilla following this post). The solution is to detect this browser and set the width to 1px for it...
It create a small bug as when you resize there is 1 pixel where the price warp to the next line but not the block but it's a lot less visible that the result otherwise :
<div id="container">
<p>texttexttext</p>
<ul>
<li>texttexttext</li>
<li>texttexttext</li>
<li>texttexttext<Update/li>
<li>texttexttext</li>
<li>more »</li>
<li class="more">more text</li>
<li class="more">Even more text.</li>
</ul>
</div><p class="price">$3993.99</p>
.price
{
height:40px;
display:inline-block;
margin-left: -200px;
margin-right: 200px;
vertical-align: bottom;
font-weight: bold;
}
#container
{
display: inline-block;
margin-right:10px;
position:relative;
width:200px;
padding-bottom:40px;
vertical-align: top;
}
ul
{
list-style-type:disc;
margin-left:30px
}
li.more
{
display: none;
}
$(function(){
$('a.more').click(function(){
$(this).parent('li').hide().nextAll('li').show(200);
});
});
Maybe have the containing div set to position: relative, and then price set to position: absolute; bottom:0? That way, no matter how much text is in the box, the price is always at 0 (or whatever number you set).
Here's a rudimentary example: http://jsfiddle.net/PFwJ6/1/
You might want to use javascript to find the height and display a "click to view more link".
First, create a div over the price div that would contain your "click to see more" link and set it to display:none. Then you can use offsetHeight in javascript to find the height of the div. If the height is over what is acceptable then you would set the div to display:block. That means you can set all of your containing divs to the same height with the price div pinned to the bottom using positioning.
I'm sorry I don't have concrete code for you. I might be able to put some together shortly. But this should point you in the right direction.
Suppose we have an old-style six to eight products which enclosed in a table with borders (so called leaders or special products). Is it tabular data? Is it worth to replace this with div? If yes then how can I do this?
Thank you.
I think about the following:
These products are not correlated. And from this point of view this is NOT tabular data.
And also this table has borders which I cannot simulate with div (or maybe don't know) because of a liquid layout (width in %).
This table is on the main page. And I want to be more accessable for those devices like mobile gadgets.
So I should use div but don't know the best way. By the way, I think is it the main cause modern sites do not use borders but "blockes" with no border collapsing.
Thank you everybody.
Added: Simply put we have a table with two rows, six cells, and border=1. This is an old-scool design which I want to keep.
There are problems:
- borders
- border collapsing
I just wanna know how seasoned designers work around this. What an approach?
Sorry for so many words. And yes I know about screenshot but there is nothing special just table that has an image in each cell.
There is nothing wrong with using tables for real tables, just set up the table structure in your code and format it how you like using pure css. (Tabular data essentially must have at least two rows and columns inclusive of headings.) You only need to avoid tables when structuring your [entire] page layout.
If you want to highlight some products, by showing them as 'blocks' instead of table rows, I would put them in divs, yes.
<div class="product">some product<br /><img src="product.jpg" /></div>
<div class="product">some other product<br /><img src="product.jpg" /></div>
<div class="product">yet some other product<br /><img src="product.jpg" /></div>
CSS:
div.product {
width: 100px;
height: 100px;
float: left;
}
To 'clear' the floating of the divs, you need something like this just below the last product div.
<div style="clear: both;"></div>
Otherwise, your next element will be positioned under/over your products.
It is possible that I misunderstood (you could give a link or screenshot), but this sounds like NOT tabular data. What you are describing is a LIST of products, so it should be placed either in an <UL> unordered list or <OL> ordered list (latter if order matters a lot).
So your products would look like:
<ul id="lead-products">
<li>
Amazing Product - $10.65
...
</li>
...
</ul>
Then with CSS you could give it some style:
#lead-products { //the list
list-style: none; /* make it not display list markers */
overflow: hidden; /* used to clear up floats */
margin: 0;
}
#lead-products li { /* these are your elements/products */
margin: 5px; /* some space around it */
float: left; /* float them to the left so they are besides each other */
border: 1px solid black; /* border around the products */
width: 20%; /* dynamic width as you needed */
}
I actually wanted the two grids in one div , I mean one grid in right, other in the left .....but for now the grid is appearing down. Its same as you split in a table with two rows !! same as that I need to split a div and add two grids side by side . Hope you get my point . Thanking you all in advance for your awesome support and replies
Create two divs inside your main div
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
With CSS, fix each one to the correct side
#left { float:left }
#right { float:right }
It all depends on the design you want to achieve for that table. There are multiple approaches, each of them yielding slightly different results.
You can change the display CSS property on the divs. The best value to use would be table-cell; however, this value is not supported by any version of IE. You can also try inline or inline-block values.
You can make the divs float to the left in their container.
You can use absolute or relative positioning of the divs in their container; however, that approach doesn't work well with fluid designs.
You can switch to span.
This is an expansion of Omar Abid's accepted answer. I started with that and had to make further modifications so it would work in my example of the stated question.
I made this work with class names instead of IDs so I could call the same CSS in multiple instances. This gave me the the ability to simulate two equal size cells. In my example, I set fixed size with ems so that it could preserve its appearance cross a range of table and desktop browser sizes (in my mobile CSS, I have a different strategy).
To align an image in the left div, I had to make a separate block (the last one in the CSS code).
This should address the question in most instances
<div class="BrandContainer">
<div class="BrandContainerTitle">
<h1>...</h1>
</div>
<div class="BrandContainerImage">
<img alt="Demo image" src="..." />
</div>
</div>
CSS:
.BrandContainer
{
width: 22em;
}
.BrandContainerTitle
{
vertical-align: top;
float: right;
width: 10em;
}
.BrandContainerImage
{
vertical-align: top;
float: left;
}
.BrandContainerImage img
{
width: 10em;
}
Use a table. It makes more sense to use tables where they are more efficient. Things like that is what tables are made for, and div is not made for.