In addition to the question stated in the title, I also conversely would like to know how is display:inline different from clear:none?
EDIT: I had a hunch this question would be unpopular... let me elaborate.
Both seem to involve putting elements onto their own line. "display:inline" flows elements inline, which strikes me as very similar to the behavior of "clear:none", which allows elements to float next to you.
Conversely if you want your div, perhaps a footer as in this example https://css-tricks.com/all-about-floats/, to stand on its own then you can say "clear:both" indicating that nothing may float next to you.
But this behavior seems very similar to "display:block".
Hence my question, how are these different in behavior or expected usage?
I'm sure it's obvious by now that I'm a total amateur in CSS, but after 15 years in backend programming I'm trying to face my fears and learn it. I hope someone might answer the question rather than downvoting me for trying to learn something new...
display:block -> Displays an element as a block element (like <p>)
clear:both -> No floating elements allowed on either the left or the right side
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
An inline element does not start on a new line and only takes up as much width as necessary.
Related
I have coded a little bit of my website, but I'm noticing I have to make stupidly big adjustments to get things to fit nicely together, I believe its because I have 2 floating elements and the float is carrying onto the next set of divs even though there not nested!!
Does anyone know why this is happening to make things simpler I have made it live so far what I have done in this example you will notice (if your monitor is wide enough) that the text
"Do you have special requirements?" has the "Do" about half way up the page?
I think the problem lies around the div tags "bannerleft" and "bannerright" after that I think the float carrys on and breaks everything? I could be wrong
Here is the live example Here
It's because you haven't cleared your floats (the two divs in question) .. simply add
<div style="clear: both;"></div>
after the bannerright/bannerleft divs to clear the floats and allow the rest of your document to respect those floated elements .. when you float something you take it out of the "flow"
Read this link from MDN for more info on clearing floats ..
P.S. (There are many different ways to clear floats, some cleaner ways than the method I provided, I just did it for simplicity)
Try:
.clearfix {
clear: both;
}
On the last floated element
Nat, this is not happening in firefox. Try placing a either a max or min width on your body tag, maybe 980px and also include overflow: hidden on the body tag.
In this fiddle http://jsfiddle.net/dAHqe/2/ I've created examples for the 2 main uses (that I've seen) of border-radius for lists.
Apply border-radius (and therefore background-color) to the container (a div or a ul).
Apply border-radius (and therefore background-color) to the first and last content items (lis or nested divs) via the :first-child and :last-child pseudo-classes.
At first glance, it looks like the first way (applying it to the container) is much more concise, yet I see the second way all the time.
Is there any good reason (i.e., scalability) to use the second way?
Update: This is for a mobile app, so I won't need the :hover pseudo-class.
Personally, in the examples you've given, I'd always just go with the simple option and put it on the container.
However, reasons for doing it the other way:
Maybe you don't have a container, and you can't change the code to add one.
You have some reason to want the flexibility to change individual list items in a way that having a single container wouldn't work. eg Maybe you want to make them semi-opaque on hover?
You have to work around an awkward HTML structure. I had a case like this a while back where I had to add rounded corners to cells in a complex table. The cells in question were sub-heading rows and columns in a bigger table, but the way it all fitted together meant I had to put the rounded corners individually into separate cells. It was fiddly and awkward but ended up looking how they wanted it.
The coder doesn't know CSS all that well and simply cribs it from somewhere else that does it that way.
Those are the only reasons I can think of. But I suspect most cases fall into one or other of those.
Hope that helps.
So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.
I was able to get three div's in a row, no sweat. Where the problem lies when the site is done some pages have text in the center column, however when i start typing the text spills over into the other divs..... The text doesn't wrap (stay in that div)
I'm sure I am probably missing one little dumb thing but any help would be greatly appreciated!
I uploaded a test of it for you guys to see:
http://graves-incorporated.com/test_sites/solera_new/test3col.html
and with the text spilling onto the next div:
http://graves-incorporated.com/test_sites/solera_new/test3col_2.html
I think you worry about nothing. Words like
Stufffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
are not found in many languages. You will see if you put normal language in your div, the text will not overflow at all
You could always use CSS's word-wrap CSS Word-Wrap example.
Or PHP's wordwrap() function PHP Word-Wrap example.
There are various ways you can approach it, but that should set you off in the right direction :)
I Think you must use a proper language then it will not go out of Div's Width , Becase your DIV is already in a Fixed Width.Just use another the good words instead of stuuuuuuuuuuuufffffffff. It will work fine then :).
overflow: hidden will help prevent it from breaking the layout, although some content may be hidden. I would suggest word-break: break-all, but that has a tendancy to break words unnecesarily.
I'm trying to build a 2 column layout with a consistent vertical rhythm (aligned baselines). The calculations for this are pretty straightforward, and I have them working fine. My question is this:
When two columns of text sit side by side, is it possible to have vertical rhythm maintained (or regained) when the vertical-margins in the columns are not 'whole lines'.
In this example: http://jsfiddle.net/beejamin/PMCXt/ I have an unordered list, where both the list, and the list items have 'half a line' of margin-bottom. When there are an even number of list items, the margins add up to a whole line, and the rhythm is kept (that's good!). When there are an odd number though, the baselines are thrown out, and can't ever join up again (unless I get lucky and another odd-numbered list comes along).
Setting whole-line margins on list items is too much (especially with a long list), and setting no margin is not enough.
Is there any way I can avoid/mitigate this? I won't know the number of lines in advance, and I don't want to use javascript for this (I'm trying to build a generic scheme that I can re-use).
OK, so here's a pure CSS solution. It relies on :nth-child and :last-child selectors, so only browsers that support those selectors will do it. That's good enough for me, seeing as it's really just a nice piece of polish. It would be easy enough to apply for older browsers with some javascript, too.
Here's the working example: http://jsfiddle.net/beejamin/DpSzW/
The key is this selector:
li:nth-child(odd):last-child { margin-bottom: 1.6em /* One full line */}
This adds a full line's margin to the last-child of a list, whenever the last-child is also an odd-numbered child. The full line margin replaces the half-line the item would normally have, and so the vertical rhythm is restored. Basically, it makes any list always take up an whole number of lines.
When a list has an even number of items, the selector does nothing, and everything stays nice.
Not 100% sure, as I didn't test in all conditions, but this seems to work.
Keep the line-height the same.
keep the margins the same as the line-height.
keep the font-size the same.
Example: http://jsfiddle.net/jasongennaro/PMCXt/1/