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.
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 am trying to float divs horizontally, however its falling into a new line.
http://jsfiddle.net/nyCrY/4/
It works only if I set width of the #holder higher than its content.
Is there a way to do this without setting the fixed width on #holder?
Thank you!
Not really with pure CSS.
You can use a static width (which you don't want to do), you can use floats + whitespace (which is unreliable), or you can dynamically calculate the necessary width with javascript and set the style's width to that number.
According to this tutorial: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
I spent some time playing with the float property and the white-space
property to see if I could find a way to fight browser auto-wrapping,
but I didn't have much luck. Page elements which are floated but do
not have a width exhibit a property where they expand to the width of
the content inside them. I thought perhaps if I put a bunch of float
elements inside of that, it might just keep expanding beyond the width
of the browser window. No dice. There is also a white-space: nowrap;
property in CSS which I thought might be able to be exploited to fight
the auto-wrapping, but it only works for text elements, not blocks or
just any old thing you set to inline. Oh well.
So, he basically is saying, no its not possible with just css.
But he goes on to say that you can do some javascript magic to achieve it:
JavaScript clearly has the ability to manipulate page elements and do
calculations on-the-fly.
I am attempting to set-up my homepage with three columns (each could be different heights depending upon the content) and for some reason the columns within my 'content' div do not respect it. This causes the columns to overflow onto the information below. I have tried to create the same layout using positioning since i understand its the better way of doing things; however i've had no luck.
I tried to use the 'overflow' element which does take the columns into consideration but it then puts a scroll bar on the content element.
Please see an example of my work here
Why does it does this? (edit) - Understood
How do i get it so the columns sit inside the
content element and respect the flow of the document? (edit) - resolved
Could you advise a better way of doing this maybe using positioning? Is the method I'm using the best way of positioning, or should i be using relative, static, etc?
Content will overflow its bounding box unless you use overflow: hidden (or similar) in some cases; see overflow and clipping in the CSS2 spec
Since you are floating your three columns, you need to use something like Clearfix so that content that comes after the columns' container will clear past them. (Alternatively, you could set clear: both on the <p> containing the footer content.)
Floating is the common way of approaching multiple columns, so you're headed in the right direction. Positioning almost certainly won't help you here.
Try adding overflow:hidden to your content div and removing the height restriction, like below:
#content
{
background-color:Blue;
width:800px;
overflow:hidden;
You are floating those columns, and you don't clear the float so what is happenings is that those 3 divs are "floating" above everything else, so the browser doesn't include them in the main html. You must clear the float with the CSS clear value.
See the jsFiddle here
Also check out this tutorial
Basically I have a parent div with height and width and overflow:hidden and then within that some more divs with it.
We are dealing with fluid content and some of the divs go over the corners so get hidden.
But one is half and half.
Is there a way to make that completely hidden?
CSS would be best.
I don't think you can know if a child from an overflow:hidden parent is in the hidden or visible section without using Javascript (I might be wrong here).
What I suggest is that you set all the child divs to a fixed dimension d and set the parent div to a multiple of d so every child is either completely visible of not.
This solution won't work if you fill your divs with different-length content
If I understand your post, you have a wrapping div that has overflow:hidden and you want to make any child element hidden unless it can be completely displayed within the wrapping div.
There may be a better way to do it, but I would use a CSS media query. If you're unsure of how they work this is a good place to start:
http://css-tricks.com/resolution-specific-stylesheets/
Using this method, you could determine how many blocks of each type should be displayed on any given set of resolutions. I'd be interested in seeing how it goes, or if you end up using a different approach. Best of luck!
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.