We Keep Coding

To float or not to float... your layout [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I recently got into the discussion that float can be used in layout design, but should not be used for layout design. To specify, it can be used to float certain elements, but not position entire semantic sections and containers with respect to each other. Although the individual cited a couple sources (source 1, source 2) that could lead one to believe that float is hard to work with in some layout situations, I don't see any evidence linking to a specification to support the claim that it should not be used for layout.
If you can use float to position small portions of your layout, why not extend this technique for the big picture? i.e. the whole layout.
I know there are new techniques coming out like the flexible box layout and some others, but they are still drafts and are not supported currently. inline-block seems like a good candidate but sometimes you just need that float fix, and there are hacks to get this to work in older browsers as well.
So I guess my question is... is it true that float should not be used for layout? Is it a non-semantic or outdated technique nowadays, akin to the table layouts of yesteryear?

Semantics in the jargon-sense are simply a way of formatting HTML so that search engines can parse the data with some sort of context. Semantics in a broader sense is how you code your site so that other developers can pull meaning from your coding style.
Floats are simply a tool in your tool belt and have no semantic context whatsoever. Additionally, floats are so widely used that it would be incongruous to say that they shouldn't be used. There are plenty of frameworks that rely on floats as part of their integral structure (Bootstrap, Gumby, Foundation, Skeleton, etc).
I can speak, however, to the difficulty of using floats. For someone just starting with CSS it can be hard to understand what exactly is going on with floats. In addition, you have clearing and in-flow and out-of-flow elements. It can certainly be confusing. However, floats are absolutely a cornerstone of the CSS specification and I couldn't imagine doing my job without them.
Hope this helps!

Bootstrap is heavily dependent on floats, and its probably the most used CSS library. That being said, for every fan of bootstrap, theres someone there to say that its not best practice.
Do what works for you

Is it good to use tables in HTML 5? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I need to display post and related data in column-wise grid and certainly require table for those as aligning divs in single line, using floats is a time consuming thing!
Will appreciate your reviews on Do's and Don't for Tables in HTML5!

Simple rule - Use tables for tabular data, use other elements for presentation(designing layouts using css) like div, section, aside, nav etc . which provides meaning to the content they hold rather than using table for everything
The fact is, developers used tables in 90s for drafting their layouts, but now, new CSS3 spec is amazing, it gives you so much hold on designing layouts like Flex Box, column-count, behavior of the box model can be altered by using box-sizing property, responsive designs are getting better and better using #media queries, grids etc., which you cannot achieve with table element... and hence, table is only used for storing tabular data.
I've seen many developers having an impression that table should be completely ignored, and instead they use a whole lot of div with 100 lines of CSS, applying display: table; table-cell table-row properties just to get a single table straight.
So even in HTML5 it is COMPLETELY OK if you use tables for tabular data.
From W3 Org : (v4.01)
Tables should not be used purely as a means to layout
document content as this may present problems when rendering to
non-visual media. Additionally, when used with graphics, these tables
may force users to scroll horizontally to view a table designed on a
system with a larger display. To minimize these problems, authors
should use style sheets to control layout rather than tables.
From (HTML 5)
Tables should not be used as layout aids. Historically, many Web
authors have tables in HTML as a way to control their page layout
making it difficult to extract tabular data from such documents. In
particular, users of accessibility tools, like screen readers, are
likely to find it very difficult to navigate pages with tables used
for layout. If a table is to be used for layout it must be marked with
the attribute role="presentation" for a user agent to properly
represent the table to an assistive technology and to properly convey
the intent of the author to tools that wish to extract tabular data
from the document.
There are a variety of alternatives to using HTML tables for layout,
primarily using CSS positioning and the CSS table model. [CSS]

According to the specifications, <table> represents data with more than one dimension and "must not be used as layout aids."
If you need to display tabular data with more than one dimension, then you should definitely use a table. If you just need columns, don't. There are many CSS frameworks out there like bootstrap that can simplify the styles you need to build a grid.

Using table or div [duplicate]

This question already has answers here:
Why not use tables for layout in HTML? [closed]
(66 answers)
Closed 5 years ago.
What is the best practice when building our web page div or table?
Someone says the div is recommended, but I found it is not easy to control the size and alignment with div.
What is your opinion?

It depends entirely on what you're wanting to display:
<DIV> and <SPAN> is for page layout
<Table> is for displaying tabular data (such as data points etc)
The days of using <table> for whole page layouts is gone - and you should be discouraged for using them for this reason.
HTML tags are meant to be semantic. This means describing the data it contains - not how to display it (this is for stylesheets to handle)

There's nothing fundamentally wrong with TABLE - it's just that it was historically overused for the wrong thing. In general, try to use TABLE for true tables of data, use DIV and SPAN for logical block or inline containers of content.

Tables should only be used to display data in a tabular way. For layout and design it is best practise to use divs and stylesheets.
Controlling the divs using stylesheets can take a while if you're not used to it, but it's quite easy to pick up.
You'll be thankful you did it later when the client wants the whole site redesigned and it means you don't have to undo the entire page in order to make the required changes.

First read this: http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
In my opinion (which I'm sure some people will groan about subjective questions being asked on Stack Overflow), but I prefer using div's. A div tag is one tag, a table takes many tags to create a correctly marked-up table element.
A lot of websites in the 1990s were built with tables, but the thinking nowadays in to use divs.

I would say that div is definitely the industry standard for website layouts. They can be quite cumbersome to work with at first but once you get your head around how they are positioned then you will never look at tables again.
Try this tutorial for moving from tables to divs. http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

Are tables replaced by DIVs? [duplicate]

This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
Why not use tables for layout in HTML?
I know everyone is all about DIV's and css and against tables now days, I have always used tables because they are so easy for me to visually see what I am doing while building, I am just now ventruing into the DIV world.
So my question are tables completely replaced by div's generally? I notice on the source of stackoverflow it is mostly DIV's but still uses tables as well, so I am guessing that tables must be used sometimes?
Below is an image of something I am trying to accomplish, most of it is coded but some of it is added in on photoshop, so far I have it all done in div's however what I have is only the background cells which are a list item and the photos, what I am missing from my code is all the text areas and it would be super easy for me to position the text areas within a table cell but since like 80% of the object is done with just css and divs I am not sure if I should just try to finsih it with just div's or if a table inside the comment div's would be the way to go.
I noticed on this page that the ansers are a table inside of a DIV
alt text http://img2.pict.com/e0/4e/de/1486585/0/screenshot2b15.png

To be semantically correct, tables should only used for tabular data and not for laying out a page.
David Dorward brought something to my attention in a comment. According to the HTML 4.01 Specification's section on Tables in HTML Documents:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Theres a lot of fervent zealotry regarding this notion of semantic content, which is fine and all but the only problem is that it's hopelessly naive.
Fact: there are some things that can be done trivially with tables that either can't be done in "pure" CSS, are extremely difficult in "pure" CSS, have some nasty side effects in "pure" CSS or have serious cross-browser issues.
I did my CSS3 Wish List and in compiling that list I realized some things I've been able to do with tables since HTML 3.2 a decade ago I still can't do with divs.
I'm all for having a semantic layout. Nice ideal. But until it can do everything it's trying to replace then the thing it's trying to replace will have valid use cases.

divs are used instead of tables in most of the sites. But you can use tables in some situations where design using div will be complicated in a cross browser way.
For eg vetical aligning contents inside div will be a big problem as compared to that in table cells.
In this page also you can find table tags being used.
Tables will only be rendered to the screen after all the cells are finished processing.
Take a look at the following questions also.
Why not use tables for layout in HTML?
DIV’s vs Tables or CSS vs. Being Stupid
Yet Another Divs vs Tables Question: Forms

I think a lot of people will argue that "tabular" data, or data that can best be expressed in rows and columns, should be kept in a table, but that divs were invented to replace tables as large layout elements. In my personal opinion, tables were always used as layout elements in a way that went beyond their intended purpose. That's not to say that people don't still misuse divs, for example
<div align="center">To replace a <center> tag</div>
I'd say check out A List Apart, specifically Their section on layout for tips on how to use modern compliant css-based design.
edit : My point was that this is the INCORRECT use of a div tag. In this example, you would use a style such as "text-align:center" or apply that style to the tag itself, but in this case there is no reason to wrap your text in a block-level element, because text by default is inline, so you would be better off with something more like this...
<p class="center">This is a centered paragraph</p>
and then in your stylesheet
.center { text-align:center; }
Thus, the following:
<div>Monday | Tuesday | Wednesday | Thursday | Friday</div>
<div>Work | Work | Work | Work | Play</div>
May be compliant but it looks terrible, and you'd be better off doing :
<table>
<th>
<td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>
</th>
<tr>
<td>Work</td><td>Work</td><td>Work</td><td>Work</td><td>Play</td>
</tr>
</table>

Tables are appropriate for tabular data, but divs + CSS is preferred for general page layout.
http://css-discuss.incutio.com/?page=TablesVsDivs has many good reasons why, as well as some counter arguments.

Like Korey and Thomas said, it's better to use table to represent tabular data.
If you want to make website layout in pure CSS, you can take a look on these CSS frameworks, which ease the task :
http://elements.projectdesigns.org/
http://960.gs/
http://www.blueprintcss.org/
http://elasticss.com/
http://www.yaml.de/en/
http://bluetrip.org/
http://devkick.com/lab/tripoli/
There are a lot of css frameworks out these, just find the one which fit your needs..
Update : Here is a more complete list of css frameworks.

Tables should only be used for tabular data. To figure out if what I am dealing with is tabular I ask myself "would I put this in Excel or Word if it?"
Bill Merikallio & Adam Pratt wrote a funny and informative article Why tables for layout is stupid. They also detail where tables should be used and when.

Tables as means of describing the structure of tabular data have not been replaced.
Tables as means for describing presentation have been replaced, but not with divs. They have been replaced with stylesheets in associate with whatever element best describes the semantics of the content. A div has no semantics associated with it, so it is used if there is nothing better.

It certainly depends. The Golden Rule you must remember is that the XHTML/HTML document file it's meant to describe content and flow.
Everything that is design should be (whenever it's possible, there are some certainly some case scenarios where we can't control it, like when CMS appear on the game) controlled using a CSS file.
Now, how can we reach the most semantically and pragmatical result? As with everything, it depends. Using XHTML/HTML tag elements instead on just relying on for correct content display it's the recommended way.
Notice that I've said tag elements. DIV is just one of them, but just replacing with whenever a or / tags exists is not enough. In fact, that will push you over "divitis" (the useless employ of divs for everything!) and WILL make your job hard. Try checking most tags and use them whenever seems correct.
Sometimes it's a pretty subjective matter as to what qualifies as a content or another tag. Just in this question someone asked if this content would be considered tabulated data (the one that tables are supposed to be used for), but I think that whatever content you must order and filter (and you can copy and paste on Excel without worries) it's worthy material.
Everythin else, it's mostly always just some interesting layout display that should be worked on with CSS and other tags.
Some people will say it's too much work and not worth it. I disagree. Though learning how to work with CSS/divs nuances it's somewhat different at first, you'll soon learn the twist of it.
Good luck and remember that we are always learning new stuff, so don't worry on question everything.

My recommendation would be to really learn HTML. Use the element that actually relates to the content. If it is a list of items, use one of the list tags. If it is data entry, use a fieldset tag. There aren't that many tags to chose from yet so many are neglected. If you simply replace all your table layout formatting with DIVs, your tag soup might be a little less chunky but you can still choke on it.

In terms of performance side, table(s) will only get rendered once the end tag () is reached, so if it is a table contains 100s of rows, you will see that table appears in the browser little later. This is not true for DIVs.

I posted on meta-SO about their tables: https://meta.stackexchange.com/questions/3110/when-did-so-start-using-tables-for-layout/3547#3547
In short, I think it's fine since it is tabular data.

You should check Elastic CSS Framework you can layout an unlimited combination of columns very easily and position them with its helpers, check out the documentation.
cheers

CSS is great and all, but I mainly use it for styling, not layout. I and countless other developers still use tables every day for building web pages, and will for the foreseeable future.
If you want to use absolute and relative positioning for layouts, go for it. If not, you are not evil or stupid for not doing so. The main thing to look out for when using tables is preventing table nesting hell IMO.

Horizontal Rule: Good or Bad design decision [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I have a custom control I built that contains a list of items to be selected.
I was concerned that these items would run together seeing as how there can be many different types of actions in this list.
Create
Edit
View
So I made the ability to separate these into groups by using a horizontal rule.
Someone I work with thinks that horizontal rules are a terrible design choice, and wants me to change it to a stylized DIV. I do not really have an opinion other than they are simple to implement. The HR I implemented is styled nicely and looks good.
Thoughts? Are horizontal rules a good or bad design choice?

Bad, and so is using a div simply for adding a horizontal div. Instead, consider putting the line which looks like horizontal rule as a border to the element you want to divide. This will be semantically correct as you are not affecting the structure of the HTML document you are creating.
This article goes in to depth about how div's can be abused by using them as presentation elements only. While sometimes there is no avoiding it, this is not one of those times.

I tend to agree with altCognito on this point, because they're purely presentational (at least they seem to be in every instance in which I've seen them used so far) they should be applied via the css.
There may well be a :after {content: /* hr */;} option, but, honestly, when there's border-bottom, which visually serves (or at least can serve) the same purpose, why bother with the <hr /> anymore?
They can, of course, be styled if you do decide to go with it, although W3 Schools suggest that all the potential styling options are now deprecated. If this is so, and it can't be 'officially' styled, it'd be best to avoid it, I think. Even if only from a purist mentality to maintain validity of your stylesheets.

The only problem with the HR is that it's always there. I'm assuming your co-worker believes that you might not always want the HR to be displayed, and using the DIV and a css solution let's someone remove or change it in one global css file. (although, the HR could be controlled by css also)
The div+css solution isn't a bad one, but for what you describe, the HR solution isn't bad either. I'd just go with whatever is convenient in this case.