OK, I’ve been playing with the CSS for awhile, and while I am getting close, I know there must be an easier way. Basically I am trying to get a layout that was previously done using tables, rewritten to properly utilize CSS. I’m beginning to wonder, if maybe at least a small part of this should remain as a table?
It’s a navigation type of page, header and footer (no problems there as they span the entire page width). But the center part, I am attempting to get a narrow left column (for some icon based “master” navigation). And the content to the right of that would be in a 3x2 (different heights for all 3 columns) layout. I’m still getting myself comfortable with CSS but figured out that the only way to really get my head fully into it, is try to get things like this to function.
Would I be wrong to use a table in the right hand side of the content section? (the 3x2 area) or is there a way to get CSS to nicely handle all this.
Here is basically what I have at the moment:
Single div for the icon navigation floated left followed by 6 independent div’s, all floated left, with their width’s defined so that they stack 3 on top of each other.
Any suggestions feedback would be greatly appreciated!
No, none of this should be a table. Tables are for tabular data. Period.
I’m not quite clear on the layout you want, but if you could post a screen shot, with a description of how the sections should behave, we can suggest how to code it. If you have a bunch of divs as part of a sidebar, make sure to wrap them all in one container that is floated, rther than trying to float all the individual sidebar elements.
That is the basics of it, header and footer are pretty straightforward, it is the section between. And the SubMenu sections (1A, 2A, 1B, 2B, 3A, and 3B) can all be fixed width’s, but their lengths will float based on the number of navigation items held in each section. And to be completely honest, at the moment, sections 2B and 3B are actually empty, but thought I would leave it setup so they could be utilized in the future without having to reconfigure.
I am trying to get a layout that was previously done using tables, rewritten to properly utilize CSS.
The problem with this approach is that you are basically copying a table layout instead of starting from scratch using css. It is better to create a new design with different dynamics that suit css rather than tables.
Although your wireframe approach gives you an idea of the layout it misses out the most important part of the process which is content. Creating little blocks all over the place does not take into account what content you may have in those sections and in the end you end up squeezing content into little blocks when in fact its the content that should dictate how the end result should look - not the other way around.
In reality a mixture of those approaches is required but content should be the priority. Design without content is just a drawing - not a website.
Looking at your wireframe it is basically just 4 separate columns floated left. In each column you can stack as much stuff as you need so the icon nav is the first column; 1a and 2 a would be stacked in the second column; 1b and 2B would be stacked in the third column and so on. I would float the nav column to the left and then float a main column to the right. The main column would then hold your subheader and three more floated columns as mentioned above.
Where CSS will differ from tables is that the end of all those columns will be in a different place and not all automatically align at the bottom. If its a fixed with you can imitate this affect with background images (faux columns) and other clever tricks but the best approach is to design without needing these tricks if you can and just let the columns finish where they will. After all its the content that should dictate where things finish and not the design.
For ie8+ you could use the display:table properties and create the same equalising behaviour that tables have if this is a pre-requisite of your design.
That’s perfect! And thank you for the education, what you said makes a LOT of sense and I will keep that in mind as I continue to advance my skills. Since this is for a business application and not a public website, I do have some browser control and can dictate that a particular browser be used. One item I was dealing with is that with the re-write they want to try to make it as transparent to the employees as possible that it has changed, as they have learned from many past experiences, change brings confusion. Even something as simple as a menu option being moved to a slightly new location makes employees become confused.
