This question already has answers here:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
(6 answers)
Closed 8 years ago.
In this example I would be using 2 DIVs
<div>
<div class="element"></div>
<div class="element"></div>
</div>
With CSS
.element { float: left; }
Okay so the above is one method of displaying the blocks as inline. I recently came across another method:
<div>
<div class="element"></div>
<div class="element"></div>
</div>
.element { display: inline-block; }
Now the above also displays the blocks as inline.
Although, The First method would have another thing to worry about, i.e. When you use float, it disturbs the normal flow of the content.
So I wanted to know, Which of the above method is the best way to achieve an inline display?
And if its the second method, then does that mean I should not use the first one?
display:inline-block is the best way but keep in mind that when you are using display:inline-block, there would be some cross browser issues, the divs may display a little bit differently in various browsers such as some maybe aligned top while in other browsers it may be alignment bottom. A simple way to fix this is by setting the vertical-alignment
Benefit of using display:inline-block is that you can have your divs in the centre. If you want too of your divs to be displayed in the centre of the pages then this can be achieve by using display:inline-block and in the parent div you have to add text-align:centre. This cannot be achieved with floating and you can save those extra padding from the side which you will add to make them appear in the center.
Float:left has its benefits as well and should be used more then inline block, whenever and wherever needed
"display: inline-block;" is best method to achieve inline display accepted.
Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).
Additionally older version of Firefox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).
As per my knowledge, the best way to get a cross-browser "display:inline-block"
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
but "float:left" is also useful when you don't want blocks and you want it to align left
You can use both if you give display: inline-block,
the div will be placed next to each other,
And vice versa for a block element if we use float: left,
until we specify width it does not place next to each other.
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;
}
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 come from the world, and have been looking at resources on google about doing multiple wrappers to vertically align content -- however it seems like it's really ugly.
Is there an easier way now with HTML5? Is there some sort of implementation that uses something like the HBox/VBox mentality? I saw there are examples for non-ie browsers -- is there a compliant way?
How the heck does anyone in their right mind do HTML now? It's a mess!
//// EDIT
I've finally figured out how to vertically align an entire box over a screen, how I'm figuring out how to vertically center list items.
I've tried two methods to align this html:
<nav>
<ul>
<li>Home</li>
<li>Link #1</li>
</ul>
</nav>
one using display:inline, the other using float:left (within a container). When using inline, it seems the list items ignore the height: css, and when using float:, the links within the li do not vertically align. Do I need to place div's within the li's to get them to vertically center as well?
Why don't you try using display: box with box-align:center, this is CSS3, so not every browser supports it yet (only Chrome, FireFox, and Safari)
http://www.w3schools.com/cssref/css3_pr_box-align.asp
You can make the line-height property equal to the height of the LIs with display:inline-block for the LIs. When you do this the text will be in the middle of the line, the line being the same height of the LI, the text will be vertically in the middle.
HTML5 really doesn't have anything to do with element layout, such as vertically aligning content. As before, the markup is styled by CSS.
CSS is a totally different spec from HTML5, so no, nothing has changed.
If you're having trouble implementing a specific layout, then ask a specific question, and we can probably help out.
you can set an outer element to display:table and an inner element to display:table-cell. then, on the table-cell element, set vertical-align:middle; all its contents will be vertically centered.
It won't work on IE7 and earlier though, but hey, who cares??
I'm trying to find a way to place divs side by side without using floats or position:absolute. The divs will have a set width, and may have floated elements inside of them. This is for a CMS where the user will be able to drag content elements to organize them. They do not have to be divs, I just don't know of any other type of HTML tag that would work better.
Basically the end result is for a CMS in which the user can organize content elements by dragging them. Unfortunately with floats, if you want to do anything that involves putting divs underneath each other, everything will go down to below the tallest div above it, even if it could fit underneath something else. i.e. 3 elements, 2 of which should be stacked on the left with a third one on the right that has a height somewhere in between the two.
Inline-block is out as it isn't supported by IE (although I'd love to be a dick and just have chrome frame required...) and doesn't work for this purpose anyway.
I'm a little confused that you mention dragging elements, but your title states you do not want to use position:absolute as a solution... most scripts I am aware of use that for the dragging process, so why would you not use it for the positioning of it to place them side-by-side?
Do you have fixed number of columns ie elements horizontally arranged side by side ? If yes one thing i can think of is having those many floated unordered lists and each element will be an li
When an element is dragged and dropped inside the same ul, its index in the ul is changed. When its dragged across uls,its removed from this list and appended to the other and arranged as in case 1. Just have an idea right now... will have to try it
The only option I can think of that doesn't use the techniques you've mentioned (position:absolute, display: inline-block, and float) is to use a table.
<table>
<tr>
<td><div id="div1">...content...</div></td>
<td><div id="div2">...content...</div></td>
</tr>
</table>
It's possible that you could use:
<div id="container">
<div id="div1">...content...</div>
<div id="div2">...content...</div>
</div>
with css:
#container {display: table; } /* you might need another child div with 'display: table-row' but I can't remember off-hand */
#div1 {display: table-cell; width: 50%; /* other css */}
#div2 {display: table-cell; /* width: 50%; other css */}
This is the best I can think of, and I dislike using tables for non-tabular purposes. But to each their own. =/
Are you just looking for a way to drag/drop and organize content? Have you seen JQuery UI's "Sortable"?
http://jqueryui.com/demos/sortable/
What's the most common way to deal with a series of block elements that need to be on a line (if javascript needs to be able to modify their widths, for example)? What are the pros and cons to applying float:left to each of them vs. using positioning to place them?
Well, if you're not too concerned with older browsers (I'm looking at you, IE6) the best way here is to go with
display:inline-block;
Basically, it creates a box-model element without clearing before or after it, so it remains in the line. Every modern browser interprets it well.
Floating would be my choice, but it really depends on what you wish to achieve. If you can provide a more specific example I would be able to give you a clear reason as to what and why I think you should use. However here is a brief set of pros and cons that I have come accross (I'm assuming that by positioning you mean absolute positioning):
Positioning pros:
very precise positioning in relation to the next ancestor marked as position relative - allows for great flexibility
allows for elements to be in a different order visually than they are in the DOM
Positioning cons:
Harder to line up with other elements since the positioned element is no longer in the document flow and also because of the level of precision required.
Other elements ignore the absolutely positioned element which means you could have a potential overlap, unless you account for the minimum and maximum size of the positioned element
harder to implement a footer if you are using absolute positioning for your columns.
Float pros:
really easy to construct simple and advanced layouts
no footer problem
no worrying about precision, browser takes care of that for you
parent container stretches
Float cons:
Lots of pitfalls for those less experienced with float layouts that may lead to many questions being asked on SO :)
As to the clear:both element that Sebastian mentioned, There's a simple way around that. Lets say you have a container div and 2 floated divs inside.
Html:
<div id="con">
<div class="float"></div>
<div class="float"></div>
</div>
CSS:
#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }
if you were to run this code you would notice that the container div (the magenta coloured one) is only a single pixel high whereas the floated divs were correct - which is the problem Sebastian mentioned. Now you could take his advice and add a br or float the container which would not be very semantic - so here is a slightly more elegant solution. Just add overflow:hidden; to the container div like so:
#con { background:#f0f; overflow:hidden; }
Now your container should wrap the floated divs properly.
The parent container does not stretch with them unless it is also assigned a float tag or there is a br with clear:both; at the bottom.
I would go with the float:left instead of the positioning. The browser does all the aligning when one object stretches. So there is less for you to care about.
I think i wouldn't explicitly position the elements but rather instruct the browser to use an inline layout for the elements using display:inline and let the browser handle the positioning.
regarding float vs positioning i think the only way to line them up using positioning is by using absolute positioning, and that means you need to handle re-sizes(of the browser view port) in order to keep the elements in place.
I think that by using the float property the browser handles the re-sizing issues for you and re-renders the element in the correct place.
Only disadvantage to float in situations like this for me has been that you'll either need to left justify them or right justify them -- centering is not an option. However you've mentioned you're using absolute values for widths, so you could just nest all the floated elements in a DIV element and add either margin-right or margin-left to the parent DIV to simulate center alignment.