Something that I was wondering while styling my latest HTML5/CSS3 baby: Do some elements inherit their sibling's parameter's values if we won't specirfy the parameters and values for these elements? Basically I had a situation in which 3/4 of the website's home page elements have been styled already in stylesheet and what was left was the footer section.
Last element that I've styled was a boxcontent with two columns. The columns have been styled with a float:left parameter and value. Upon that when I've reloaded the page, the footer section which is not styled like I've mentioned before, have moved up and to the extreme right from column2 of boxcontent section.
I'm wondering why the footer section has inherited some of the sibling's section's parameters and values if the footer is not even inheriting this data straight from it's parent element - that is body.
Children inherit parent's values, but siblings do not inherit each other's parameters. Your layout was changed, because you've used floating, which can affect positioning of elements that are below the floated blocks. When using floating for positioning it is a good idea to clear floats.
Elements don't inherit siblings styles, but do inherit their parent's styling. I've ran into layout issues that I've traced up many levels on a parent. Chrome's developer tools are a great way to inspect where styling is coming from for any selected element.
What I'm trying to achieve:
Two plus rows with each containing three columns. For the rows, I have specified relative positioning containing three images per row, for two rows. This works fine.
I want layered divs beneath those images, using position absolute and negative z-index, which also works fine for the first row. The second row, the images line up fine, but the absolute positioned divs within appear on the first row.
jsFiddle here:
http://jsfiddle.net/Ajdin/tNGCM/
I've read a few questions on the board, and googled css absolute positioning since that's where I'm thinking I may be misunderstanding something. Please help :)
Since the div ".hireBioImg" set "float" property, it wont be extended the height to its parent. so in hireBioRow, you need to add "clearfix" to wrap float elements inside.
Please see updated here:
http://jsfiddle.net/tNGCM/1/
And more about clearfix:
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
http://www.webtoolkit.info/css-clearfix.html
How can I group two divs inside a span (one below other and the div contains text and has a fixed width) and display multiple span like this in fixed width td tag. I am able to do so, but my span are overlapping. If the space in a line is full then the next span should come in next line.
You need to correct your markup.
You are not allowed to place block-level Elements (like div) into inline elements (like span). Doing so will make your markup invalid and mess with the layout, since inline elements have restriction regarding width and margin.
Either declare display:block or display:inline-block on your spans, or even better convert them to divs. This should most likely fix your issue.
In many places I have put elmeents nested in other elements. I can't deduce when a child element causes the parent element to expand. I don't have any code to post as this is a general conceptual question so that I can design as needed.
The first thing that you should understand is the CSS Box Model. That will help you understand how properties of an element cause it to have the size and dimensions that it has. Another good resource is here.
To answer your main question in the most simple manner (and being very general):
Block level elements take up as much width as possible (obeying their CSS width rule). Their height is dependent on their content and the CSS height property.
Elements like div, p, and ul are all block.
These will generally cause your parent element to expand.
Inline level elements will continue to flow together in a line, filling up only as much width and height as necessary.
Elements like span, em, strong are all inline.
These will cause your parent element to expand only when there are enough of them on the same line to warrant another line.
There are many ways to tweak the display of elements with CSS.
Get firebug for firefox. You can browse the DOM (the HTML structure of the page) and it will highlight elements according to how the "browser's eye" sees them (versus how they look aesthetically).
A few general rules of thumb:
Children will expand their parent's height as long as they're not floated or absolutely positioned, but...
You can "clear" a series of floated images http://www.quirksmode.org/css/clearing.html to make the parent element expand
If you use top positioning for a relatively positioned child element, the browser will still see that element in the exact same place. In other words the height of the parent element will stay the same regardless of where the child is relatively positioned to.
Using positive or negative margins on a child that is display: block will add or subtract height from its parent
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
What is the difference between HTML tags DIV and SPAN?
I know when coding HTML, I'm supposed to keep semantics in mind, e.g., h1 needs to be a main header, h2 needs to be a subheader, tables need to be tables, use <em> for emphasis instead of <i>, etc. Is there a proper difference between divs and spans except one is a block and the other is in-line?
When I was learning I was told that <span>'s were for styling text mid-line. If I had a small blurb of text that I needed positioned at a certain point in my webpage, one that doesn't warrent a <p> tag, would I use a span should I stick with div's? What if that text needs to cover two lines (i.e., it needs a width) if it contains nothing but text, what should I use?
Semantically, neither <div> nor <span> has any intrinsic meaning. They're "catch-all" tags meant to be used with stuff where no existing tag really fits. Use divs and spans as a last resort, if you care about semantics.
The only difference between them is that divs are block-level elements, and spans are inline. Meaning by default, a div will start a whole new block, and technically only inline elements and certain CSS would be allowed inside a span. Most browsers seem to process the tags regardless of the rules (assuming "tag soup"), and you can actually make either act like the other with CSS, but don't do any of that if you care about validation or cross-browser compatibility (which you DO care about, right?).
The primary difference between a span and a div is that a span is an inline element whereas a div is a block element, like a p or paragraph element. So, in essence
span { display: block; }
Is essentially turning all spans into divs. You use a span for just a line of text, like to apply effects or padding or something. Divs are generally for dividing up your web page, so if you had to position a piece of text somewhere I would recommend using a div.
Div is a division block, span is for spanning inline text.
So Div is a box/block with height and width, span is inline. Basically.
If you want to read the spec, here's a link.
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
<span> and <div> are both very generic elements. In themselves, they have no meaning.
The main difference is that <span> is an inline element. That means if you have something like:
<span>Some text.</span> Some other text
You don't have "Some other text" on a new line. If you replaced the spans with <div> (a block element), there would be newlines. Note that it is not proper syntax to have a block element inside an inline element. Therefore, you can have <span>'s inside <div>'s, but not vice versa.
See here for more:
Wikipedia - Span and div
About.com - Span vs. div
There is a fundamental difference: <div> is a block-level element, while <span> is an inline element. The difference is that block-level elements start and end with line breaks, and inline elements don't.
Perhaps even more importantly, depending on the HTML version, there are different rules for what other elements are valid inside block and inline elements.
Well, to give you a fast and simple answer, DIV is a division! The goal is to use it when certain elements are in need to be treated as a group!
Ex:
Use a div to have a login panel, lets say, hidden # the left side of the screen, that show's up when the mouse hovers the div :)
You've got it. Span = inline, Div = block. That's all.
If a blurb of text needs it's own layout, (You want to put it somewhere on the screen) then it's a div.
If a blurb of text participates in the layout of the other text right next to it, then it's a span.
An inline element can't have its own layout -- then it wouldn't be inline.