I'm trying to set an h3 tag to be inline, but no matter what rule I use in CSS, the box model in Inspector is displaying display: block.
.widget_title {
display:inline;
float:left;
}
Any ideas to why this is?
That looks simple: you use float property on inline element which forces inline element to become a block element.
Read this CSS specs to learn more.
Essential part is here:
left
The element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top
(subject to the 'clear' property).
When you use float, position absolute or fixed on an element you force this element out of the normal flow. When an element is out of the normal flow, display: inline or inline-block for that matter, do not make any sense. This is why elements out of the normal flow are considered as block elements, whatever their display css property is.
This is an old but interesting article about floats.
Related
I am wondering why img tag accept margin top property?
isn't this an inline tag? and inline tags does't accept top and bottom margins?
It's because img is an inline replaced element and it does accept margin-top. It behaves differently than inline non-replaced element (like span for example).
Related part of the specification detailing this: https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height
Note that there is no restriction or special behavior related to margin unlike with non-replaced inline element where you can read:
The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.
Same logic for width/height. They work with img but not with span.
Another related question dealing with transform where the same logic apply: CSS transform doesn't work on inline elements
I don't know why but when I set my CSS for an <img> to display: inline it works fine.
But then I wrote display: block; and it was stretching the link wrapped around the element, across the entire screen.
Block elements take up the full width available, with a new line before and after since the anchor tag is enclosing it it is also going full width.
Inline elements take up only as much width is needed and doesn't force new lines.
To fix it, you should wrap your "my work on instagram" anchor tag and image in a div, which is a block element, and it will not stretch the internal elements. Also, remove the display:block from your instawork class in your css. JSFiddle Example
<div><img src="http://www.pauldewar.me/imgs/instawork.png"></div>
Reference: CSS Blocks vs Inline CSS Display Styles
I'm sure this has something to do with position:absolute and that overriding the css display property to block.
As you can see in the image below (and this fiddle) the div on the left (absolute) doesn't vertically center it's text but the one on the right does (it's relative). If seen in chrome debugger, the former has display:block and the latter display:table-cell.
Question: I know positioning something absolutely 'removes it from the flow of the document' but does that imply that it will NOT override display and everything will be defaulted to it's default display (i.e. block for divs, inline for spans etc.) Why? Is there a specific reason for this behavior?
This is required by the spec:
if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below
In the table shown in that section of the spec, any of the table-related values for 'display' computes to 'block' instead.
As you say, absolutely positioning something will remove it from normal flow; as such, it no longer has a table to display in and therefore it no longer makes sense to display it as a table cell. In order for an element to be displayed as a table cell, it needs the proper container, and it would seem that these can only be generated implicitly in normal flow.
Any element with position:absolute will be treated as display:block. It will not be treated with its default.
'removes it from the flow of the document'
Means that it will be treated as it's own graphical entity, not in relation to any other entities. An element can only be displayed as a table-cell in relation to a table. Most of the display modes only make sense in relation to other elements. The main exceptions are 'block' and 'none'
I made a very rough fiddle that shows a sample of relative vs absolute for various display types for both div and span elements. Notice that display:none works for both relative and absolute positioning, but display:inline only works for relative.
Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div's width. How do I make the hyperlink's clicked length equal to the text of the hyperlink only without specifying width for each link ?
JSFiddle here
Use
#links a {clear:left;float:left}
The float will allow the link to be sized, and the clear will prevent the links from being on the same line.
You may need to add a clear:left to the #links container depending on your design.
EDIT
A little tutorial since you asked:
There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.
Inline elements can't have their width or height styled. Blocks can.
<a> is an inline element. By setting its display to block, you tell it to make a new line every time.
float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It's sort of a mix between the two.
The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).
You won't need display:block and float: at the same time.
Another solution would involve display:inline-block, but this is not supported in several browsers so isn't encouraged (although I find it pretty handy).
set the link style to display:inline-block; (not supported in elder IE6) or float it with float:left; or float:right;
display: block; is what makes the link elements expand to their parent width. By default, link elements are in-line elements, not block elements.
Simply remove that declaration and your problem should be gone.
JSFiddle example
Do you mean something like this:
Foo
width:auto?
Or try
display:inline;
on the links
it shouldnt get the divs width then
I'm having a few problems trying to position some divs in my website layout. All of them is related to the div's size. I'm using Chrome's developer tools to inspect the divs and when I mouse over some divs it is just 1px-high, but it has content inside and its content has some height. Shouldn't it have at least the same height of its content?
I don't know if I explained well, so I'm posting some images. I'm using Blueprint CSS Framework and it happens when I use class="span-XX" and inside it I don't use neither class
Here is some images (click to zoom)
The parent div
The div with problem (no height)
The child div
The parent div has class="span-XX", the div with problem has only #search
which is this one
I suspect it is some float or positioning issue with css but I don't know what it is and how to deal with it. I have also a list containing the social networks on the top of the site which ul has the same problem.
If you have floats inside, you need to clear them. Apply overflow:hidden; zoom:1; to the parent containing the floats and it should resolve it.
If you have negative margins / position + relative and negative offset and cant use overflow hidden use a clearfix... http://work.arounds.org/clearing-floats/
Your child div has the float property set, so the parent div will not expand height-wise to contain it. To get the behavior you expect, set overflow: hidden on the parent div.