I have an unordered list and each list element contains a photo and a headline. My CSS sets up the grid to be a grid, where each row contains three photos. Sometimes the headline (or photo caption) is longer than the width of the photo and has to span two lines. In some situations, when the text spans 2+ lines, the list element below it gets pushed to the right and there is a big gap in the list. The only fix that works for me is adding the following HTML <div style="clear:both"></div> after every three <li></li> elements. The issue can be seen in the third row of the list elements. I've tried researching this issue, but have not found a CSS only method. In my example code, I applied the CSS clearfix class, but it doesn't seem to have any effect.
I'm using the latest version of Google Chrome.
Here is my code: http://jsfiddle.net/NVveP/1/
Having both float: left and display: inline-block will in effect nullify display: inline-block, because float: left forces display: block.
Hence, removing float: left allows display: inline-block to work, which combined with vertical-align: top is how you can achieve your desired layout.
See: http://jsfiddle.net/thirtydot/NVveP/3/
I also added a hack to make display: inline-block work in IE7, if that matters.
It would be more difficult to do this with floats. You'd need something to the effect of:
li:nth-child(3n+1) {
clear: both;
}
Which has the problem of not working in older browsers such as IE7/8. Fortunately, there's no need to worry about this because display: inline-block is the solution here, not floats.
Related
Bear with me, I will now post a dumb question. Being an amateur at web-design, I don't fully comprehend CSS. Specifically, how to arrange objects in the horizontal plane.
Right now, the dashed <'p>' box is below the empty <'div>' box. I want to put them next to each other, horizontally. How to go about it?
<html><head><style>
#div1
{width:400px; height:75px;border:4px solid;}
</style></head><body>
<div id="div1"></div>
<p style="border-style:dashed;border-width:2px;height:30px;width:396px;text-align:center;">Move me</p>
</body></html>
Don't feel bad that you haven't grasped CSS layout yet – it has been a long time coming in terms of standards support, so most methods today use slightly hacky methods to acheive it, and it's not always self-evident how they work or why.
Blocks by default stack vertically, so you want to change the flow to run horizontally for a specific part.
The proper "modern CSS way" would be to use flexbox, which is specifically a layout tool for these types of situations (and more). The caveat is browser support – IE10 and above, but otherwise most every browser supports it.
To lay something out horizontally with flexbox, you'd tell the parent to become a horizontally oriented container. In your case, it might therefore be a good idea to wrap the two elements in another element:
<div class="wrapper">
<div id="div1"></div>
<p>Move me</p>
</div>
You then tell the wrapper to become a "flex container", where the default mode is to flow boxes horizontally rather than vertically:
.wrapper {
display: flex;
}
There have historically been a couple of experimental flexbox implementations with different syntax, so that's something to be aware of too (see example later).
The next step would be to size the boxes, if you want them to be sized other than according to content – that would be the next step in learning about flexbox. :-)
The first thing you will need to know is that they will still react to the width property in this situation, and otherwise stretch to become equally tall.
If you want wider browser support, you can combine flexbox with other methods that aren't as fit for this exact purpose but still work – floats or inline block comes to mind. The nice thing about flexbox is that it ignores the display mode and float properties of its children. This means that we can combine old and new techniques.
Floats are originally intended to position images or other figures to the right or left in blocks of text, for example, but can be used to create whole layouts with a bit of work. They have some complex behaviors that take a while to grasp. For example, since floats stick out of their container vertically by default, you usually need to add something that makes the wrapper enclose the floats – the easiest way is probably to apply overflow: hidden to the wrapper.
Inline blocks are basically to allow block level elements in the flow of text, but since text flows horizontally (in English, at least) you can co-opt them to create full horizontal layouts as well. The downside is that any whitespace (including linebreaks) in the HTML source will create whitespace between the horizontal items.
If you go the float route, the example code could look something like this:
.wrapper {
/* various flexbox syntaxes, old */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
/* modern flexbox syntax */
display: flex;
overflow: hidden; /* contain floats */
}
.wrapper p,
#div1 {
float: left; /* will be ignored by modern browsers */
}
You can set display (inline, or inline-block)
An inline element does not start on a new line and only takes up as
much width as necessary.
CSS
#div1, p{
display: inline-block;
}
DEMO HERE
You should set display to inline-block for them. Check this fiddle.
Also you may set them vertical-align: top (look at fiddle again) and they'll be aligned to top.
Right now <p> a little bit below <div>. Set margin for p to 0 for change it.
Use float:left for the first div
{width:400px; float:left; height:75px;border:4px solid;}
The way I personally would do this is to add a wrapper to both of these elements and align them textually with text-align
<div id="wrapper">
<div id="div1"></div>
<p style="border-style:dashed;border-width:2px;height:30px;width:396px;text- align:center;">Move me</p>
</div>
and then add some CSS to that wrapper:
#wrapper {
text-align:center;
}
Is there a practical difference between whether a left-floated element (say, and image) has display: inline-block; applied to it, as opposed to leaving the default display: block; rule applied?
In other words, what's the difference between:
<div style="float: left; display: inline-block;">text</div>
and
<div style="float: left; display: block;">text</div>
?
An answer by #thirtydot might help you... Question's link
I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.
Yes, display: block is redundant if you've specified float: left (or right).
(What would happen if you tried to
specify display:inline and float:left?
)
display: inline will not make any difference, because setting float: left forces display: block "no matter what":
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float = display: block.
However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.
Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,
Some examples:
If you set position: absolute, then float: none is forced.
The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.
Is there a tool that can check for
such things?
I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.
You don't have to specify a float: left and a display: inline-block for the same element, you use one or the other, not both. Float is used to float text around elements, its not the best weapon to choose when doing a layout. Go with display: block, and inline-block.
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Block elements — form boxes according to the css box-model. They have width, height, padding, border, and margin and they stack vertically on top of each other.
Inline elements — don’t form boxes. They sit horizontally next to each other.
Inline-block elements — act like block elements on the inside where they form boxes. On the outside they act like inline elements sitting horizontally next to each other instead of stacking on top of each other.
A good resource: http://learnlayout.com/inline-block.html
According to SitePoint:
If you’re new to CSS layouts, you’d be forgiven for thinking that
using CSS floats in imaginative ways is the height of skill. If you
have consumed as many CSS layout tutorials as you can find, you might
suppose that mastering floats is a rite of passage. You’ll be dazzled
by the ingenuity, astounded by the complexity, and you’ll gain a sense
of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
When you use float: left; almost any elements behave as a block element. So there is no any difference in this particular case.
I used text-align: center to to position three divs. But there is a small gap between each and every div. Why is it so? the picture is giving below? The divs are displayed as inline-block.
Inline-block elements often have spaces in between them because HTML displays newlines in the code as a space character.
For example, this will have a space between each div:
<div>blah</div>
<div>blah...</div>
<div>blahblah...</div>
There are various workarounds for this such as getting rid of the space in your code:
<div>blah</div><div>blah...</div><div>blahblah...</div>
Or setting the parent element to font-size: 0 and then setting the child divs to whatever font size you want.
I personally thought this was an interesting post on the subject: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
If the div elements are inline-block display, then the reason there are spaces in-between them is because it is recognizing all the new lines and spaces between the div elements and trimming them down to one space character. That is the space you are seeing.
You can solve this by using float: left; if that is applicable to your situation. Of course, you may have to confine them to their own block formatting context due to the floats.
Another solution would be to get rid of the new lines and spaces in-between the div elements. You can do that like so:
HTML:
<div><img src="picture.jpg"></div
><div><img src="picture.jpg"></div
><div><img src="picture.jpg"></div>
Unless you absolutely have to use display: inline-block; then refer to the link at the bottom of my answer for a wide range of solutions.
The best solution would be to change display: inline-block; to float: left; since they will float right next to each other by default.
If they are inline-block you will need to add margin-right: -4px to offset the default margin-right.
This is based from the lack of HTML/CSS from your question.
Here are a few options of dealing with inline-blocks default margin, CSS-Tricks Inline-block
I am new to the world of coding as well as CSS and recently came across the property vertical-align. Having read a number of articles on what it is, I am still clueless on what it is for and when do you use it?
My understanding is that it is used for inline elements such as text, images, etc as well as text or other inline elements in a table. They cannot be used for block element such as div, h1, etc.
If my understanding is right, apart from aligning text vertically to say an image or using subscript or superscript, what other purpose does it serve?
It's used the vertical align inline elements indeed. Block level elements will ignore this property. So your understanding is right.
This blog gives some background information on vertical-align with some examples. It's mainly used to vertically position an image in a line of text. Or to replace the valign attribute on tablecells.
So it seems you are understanding it quite right. See w3schools for the details on the vertical-align property.
Just to be clear; do not try to use vertical-align to position a blocklevel element like a div. It will not work, as you already mentioned, it's for inline elements like images in a line of text. Using display: table-cell; and vertical-align on an element is a hack, please use other CSS techniques to vertically align stuff in an div whenever possible.
It's always worth reading the specs if you want to learn about a specific property:
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
A common use case is vertical centering (in combination with display: table-cell):
http://jsfiddle.net/7eTb2/
div {
background: #ccc;
width: 200px;
height: 300px;
padding: 5px;
display: table-cell;
vertical-align: middle
}
It's somewhat difficult to vertically center without using this technique.
Another common use case is when it comes to elements that are inline or inline-block.
See here for examples of what happens with different vertical-align values:
http://www.brunildo.org/test/inline-block.html
Another good link to read: http://css-tricks.com/what-is-vertical-align/
However, it's real use is getting me upvotes, see:
https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22
:)
Others have been mostly correct about vertical-align. The reality is that it works, just not how you think. It's for inline elements, not block elements.
In this case, a fiddle is worth a thousand words. :)
http://jsfiddle.net/JJfuj/
vertical align, by the W3C and by how most(tm) interpret it, is only used/takes affect in elements that are table-cells (<td>), and on some browsers, elements with the display: table-cell declaration.
The rest of the time, it is largely disregarded by browsers.
Vertical align is for just what it sounds like. It aligns the element vertically within the parent object; however, not all browsers interpret it the same.
Here's a little more in-depth information on the parameter values available.
I'm creating a tile-based game and am using block rendering to update a large list of tiles. I'm attempting to do this in the most simple manner, so I've been trying to work with HTML's default layouts. Right now I'm creating 'inline-blocks', omitting whitespace between the elements to avoid horizontal spaces in between them but when the blocks overflow and create a new line there is some vertical margining in which I do not know how to remove.
Example to make this a bit clearer:
http://jsfiddle.net/mLa93/13/
(Pretty much I just need to remove the spacing between the block rows while retaining the simple markup.)
In the effort of keeping your code as close as possible to how it was:
http://jsfiddle.net/mLa93/20/
Add line-height: 0 to #container.
Add the hacks to make display: inline-block work in IE7.
Use display: block and set float: left. See this fork:
http://jsfiddle.net/q5eSG/
Instead of using display: inline-block, simply float the div elements.
Then, you just need to clear the floats on your #container element, which I do so using overflow: hidden;
Check out the working example: http://jsfiddle.net/Ymz3m/