Is thee any benefit to wrap Main content and Context div in a content div?
Column can be increased. like 1. Main content 2. left sidebar 3. right sidebar.
My main question is is there any benefit to wrap all in another div?
(source: wpdfd.com)
There can be. So the answer is... it depends.
Generally I will wrap adjacent divs like this, particularly if there is a semantic reason to do so. But even if there isn't there's next to no overhead. Often you will find it much less awkward if you have this kind of nesting. For example, it would make it much easier if you wanted to float one or both child elements.
In this case you could argue your document consists of:
Header
Content
Footer
On this page there are two columns to the content but on other pages there might not be. Other pages might be a single column or have five. Whatever the case, having that content div wrapping all the columns will make a general layout (for all cases) much easier.
Is it necessary? Absolutely not. You could make it work either way. Both approaches are fine and work.
Use it if you intend to "group" the positions of main content and context together, so that you for example can position them relative from each other without influencing the other elements such as header and footer negatively. In semantic/SEO terms that extra div has in fact no impact.
If the sidebar and main-content divs are always together, I think the second option is smarter, because you can use the id for the outer-content wrapper for both css and javascript to manipulate the entire area at once.
The only reason to NOT do it, other than a strong minimalist attitude (which I tend to have) is if you want each area of the page to be truly modular and independent. Experiments like csszengarden are founded on such a principle. This philosophy, in a nutshell, thinks that divs and other elements are chunks of information that should have the ability to be arranged in any way a designer wants (putting your header at the bottom, for instances, or swapping the main-content with the sidebar div, etc). By using a wrapper div, you are forced to use techniques like fixed positioning to break that inner div out of the wrapper (maybe to put it in the upper left corner, for instance).
But aside from that, semantically the two chunks seem to go together, so wrapping them is not a hack. Look forward to the HTML 5 element <aside> which is explicitly meant for side notes like the one in your example.
Related
I have a design I'm working on that is almost complete, but I'm having trouble getting the CSS to do what I want. What I am trying to do is something like this:
However, when the page is generated, this is what the output looks like:
How can I get the third box to float up under the first and next to the second? I have tried every trick I know, but can't get it to work. I should also mention that each block is added to the page by a loop in PHP pulling from a database, so I'm kinda limited by not having static content, and have no way of knowing ahead of time how tall a particular block is going to be.
If the number of columns is variable, CSS can't really do it (if you want it to work in all common browsers), so instead use jQuery Masonry which is designed to solve exactly this problem.
Here's me saying the same thing, but with more words: CSS two columns with known children width
Per the second layout, a good option is using three primary columns. There are several grid systems available including Twitter Bootstrap and 960 Grid that will help you get the basic framework laid out quickly and sans quirks. When divs (block elements) fall within any of the three columns, they'll stack up, top-to-bottom, naturally.
Regarding the bottom of the divs lining up perfectly, you'll be able to use JavaScript to calculate the overall height of the parent of the columns (which will naturally inherit the height of the tallest column), calculate the total height of the block elements within each column, and use javascript to add the difference in height to the lowest block element for each.
Be sure to account for padding and margin in the JS height calculations.
Try putting the divs into 3 columns instead of stacking them in the order they appear.
That behaviour is because of the float rules. The top of a floating element cannot be over the top of another element that came before it in the normal flow of the page. I don't know exactly how you position your elements but you might want to look into that.
Here is the Css Specs for float: http://www.w3.org/TR/CSS2/visuren.html#float-rules (It's css2 but the rules still apply)
Look at rules 5 and 6
I'm working on making a redesign of my college newspaper's website and got the design to fit nicely on an iPad. I'm now trying to switch it to a one column layout (for smart-phones).
The problem is that, in a single-column layout, the the right column must go above the left column. I would know how to do this if the code for the right column was written before the left column, but unfortunately it isn't.
How can I move the left column under the right column? Do I need to use Javascript to switch the column orders in the HTML code? Thanks!
EDIT: I realize that I can have a DIV that is invisible when the width > someNumber. I'd prefer not to have to be redundant though...
The CSS only solution is to start with the smallest screen as your default design then enhance as the screen size increases using media queries. Starting with the smallest screen first puts your markup in the correct order - for the image above Banner, Primary Navigation, Main Content (right-hand column), Aside (left-hand column) and (presumably), Footer. As the media queries apply additional CSS you can then float Main Content right and Aside left - the elements are positioned correctly for smaller or larger screens.
The easiest way I can think to do this is with jQuery (a javascript library) to remove the right column content from one div to another in the DOM. This allows you to create and remove the div's on the fly so there is not redundancy in the end.
If this is too vague, comment and I'll add an example.
CSS can take elements out of the document flow and put them anywhere, in any manner you want. But it cannot create a new document flow (ie it can't reorder elements). You need to position one element relative to the other or position them both absolutely.
If you have access to Javascript and are not concerned about graceful degredation you could also swap the .innerHTML of the two divs.
I have a bunch of blocks I'm floating left. They're of varying heights; some short, some tall.
Now, these blocks are dynamically generated, so there's no predicting how tall each block will be (or how many there'll be). Needs to be flexible, though, so if those blocks don't all fit one one row, well, I need a second row.
Problem: since the blocks are of varying height, any block that spills over onto the next row gets "nestled" among the existing floats:
I need the spillover-blocks to form their own row:
I know this is proper behavior (floats favor higher positions over left-er positions), but what's the best solution for this? I can change the HTML structure (and obviously any CSS), but I can't hardcode in a clear: left.
Here's a jsFiddle.
Use display: inline-block on the blocks; save float for situations where you actually need to wrap text around an element.
Results: http://jsfiddle.net/EQyVy/18/
First see http://jsfiddle.net/b2BpB/15/
3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.
When you shrink the width of the browser window - the columns start to stack down the page.
Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?
Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)
--added 19 April 2010 am UK--
This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.
It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.
One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.
Thanks in advance...
--added 19 April 2010 13:44 UK--
#RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:
http://jsfiddle.net/qr7WB/
I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.
If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!
In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.
First off: This isn't an answer, however I have several points and it's more readable as an answer.
I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.
You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.
The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.
Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.
As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.
BTW I can't see how iframes would have to do with problem at all.
Do You mean like this?
Example Fiddle : HERE
if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help
It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!
Updated fiddle per comments : HERE
I sometimes find myself creating a div which serves no other purpose than to hold another element.
For example when creating a menu, I would create a div and assign it a background colour, position etc. Then within it I would create an unordered list.
I could surely assign all the properties I assigned to the DIV to the UL and not use a div at all.
Any ideas of what is best practice and reasons for it.
Thanks
Zenna
DIVs can be useful for grouping semantically related elements. If you are simply wrapping a single element that is also a block element, then you are simply adding bytes to the file.
No, they are not. The purpose of a div element is to create block level structure in the document. If you can lose them just lose them. Never use divs to solve design purposes, css is for that. Use html elements each like list, data definitions or tables (which were overabused in the past and used as the divs are now for css purposes). The more diverse your HTML knowledge is the less you are using divs all over the place.
I use often divs to keep child-padding/margins from ruining parent-width. But you need to be careful with this type of stuff - you could end up adding a bunch of nonsense.
The real issue is that we are using HTML in ways that its creators had never imagined. The need for 'all those divs' is because some really smart people have found some very creative ways to take a very old standard and do some very modern things with it.
Best practice should be to use as few div elements as possible. If you've got a div elements with only one child, chances are it's a useless div. The div element should really only be used when you need a block element and there is no semantic pre-defined element at hand. This includes grouping elements as Renesis suggests.
In the case of a UL, yes, the DIV is unnecessary. They are both block elements, so anything you can do with a DIV wrapped around the outside you can do directly to the UL itself.
However, because of the Box Model problem with some IE browsers, some people tell you to add these DIVs as a workaround. When you combine padding and width, IE6 disagrees with other browsers about what the final size of the element will be. So one workaround is to put padding but no width on an inner element, and width but no padding on an outer element.
Div's are really a necessary evil without a more semantically rich set of tags.
Their purpose is to server as a generic container. Therefore, I suppose you could say they do their job well.
If you can do what you're trying to do without the additional div, then leave it out. If it's an important part of your design that you can't fix with some clever CSS, then it's still a whole lot better than using tables...
I use DIVS primarily for at least one of two main reasons:
I need it to provide a new physical level of CSS in some way (either child padding inside a fixed width element, a shadow or a double border around an image, etc.)
It logically groups the elements it contains (for future portability and semantics in both HTML and CSS - I.E. "div#menu .label". This way I can use the "label" class several places but have a specific style applied to labels within the "menu" div).
For example, if you were to transfer all attributes to the UL, but then decided you wanted a caption or image above or below the menu but in the same location, you would have to create the DIV again to place the new element inside, and transfer half of the attributes back to it.