A <div> element has text-align:left; width:500px; and, inside it, a child <div> has more than 20 other <div> elements with width:20px;.
My question is, without using float:left how we can put all elements side by side from the left?
Screenshot:
I would guess that display: inline-block will get you pretty close to what you want. It will generate a block box for the contents (allowing you to specify block level properties such as width), which will then be flowed inline.
You can use the CSS3 Columns Module column-count property for this. You will also need to include the -moz and -webkit version for compatibility reasons:
#container {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
Unfortunately, this property is not available on all versions of IE, so you'll need a Javascript alternative.
A good method would be to check for column-count support with Modernizr, then create two additional container elements each one-third the width of the parent, then using Javascript we can watch for expansions and pull the necessary number of elements to the other two to maintain even sizes.
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;
}
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.
I have such url: http://xn----7sbabhi8cwaajmue5o.xn--p1ai/cars/search/by_man_and_model?by_manufacturer=115
there you could see that i have three columns
i have such troulbe: id="manufacturers-list" if i delete min, and height, i see that my li is separated in different colums
, but how to prevent this?
i didn't get why i get this separation(( why it slice my li?
css:
width: 690px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
overflow: hidden;
The thing that's separating your content into different columns is the CSS column-count property (including the vendor prefixes.)
To explain both your images, the first looks like you have a set height with overflow: hidden which is going to conceal every single list item that flows past that height. If you have 50 list items but your container only has height enough for five, you're not going to see more than five.
The second looks like you've removed your height and given a column property.
I just looked at the site and you might want to remove the display: inline-block style from .man-area, remove overflow-hidden from the outside container (#vip-offers)
And SOMEWHERE you have inline javascript (or styles) giving that parent container a fixed height. I would definitely not recommend giving a fixed height with a hidden overflow. It just doesn't bode well unless you're trying to achieve a specific effect.
I'm working with WP 3.5.1 ATM. My goal is to make the articles 300px in width, then float them to the left, then the rows stack directly underneath each other in vertical & horizontal alignment. The issue I'm having is that when it get's to the second row, it doesn't line up directly underneath the first row vertically, but does horizontally. This sometimes leaves huge vertical gaps between the first and second row, if one article in the first row is long, while the others are short.
I have never tried doing this layout before, so I'm wondering if I can get some pointers from those that have. How can I make this happen? Or perhaps a tutorial site? I googled it, but didn't find anything on the method.
Examples of my goal are mysocialcloud.com, new.myspace.com, so.cl, and this one in particular: http://www.eleventhemes.com/gridly/
Thanks.
Alternatively, if you are looking for JS-based method which offers better cross browser compatibility, try jQuery Masonry.
Float your elements as per normal, but Masonry will then reposition your elements according to the available space by absolute positioning.
If you are happy to use CSS3 then you can wrap all of your content in a div and then use the column CSS:
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
I have made a Fiddle http://jsfiddle.net/DVfGP.
I created a div with the column css and then a div to contain each element. I applied the following css to the elements:
display: inline-block;
width: 100%;
this keeps the all of the element in the same column. Hope that is what you were after.
I want to do a list of a bunch of items. The height is fixed. So when the list hits the bottom, I want it to wrap around and start a new column. Is there a way, without knowing the height of each item, to do this in css? That way the overflow will occur horizontally.
I can't think of a way using css to accomplish this but if you're not opposed to jquery, check out this: http://welcome.totheinter.net/columnizer-jquery-plugin/
Check this CSS Trick
the key is this CSS:
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
It will do exactly what you ask.
You could use CSS3 columns.
Here's a fiddle: fiddle and here's the WC3 spec
There is a proposed CSS 3 property for multicolumns (see Quirksmode.org -- Columns for examples using the proprietary properties), but that's not supported in all modern browsers yet. Even so, I'm not sure the support is as repeatable across the browsers that do support it as one might hope.
why don't you for JavaScript. It is simple and compatible with all browser
If you go for CSS3 then IE (The Useless browser) Will not support it.
I will just give you a hint for javascript
just Calculate Height of your Parent Div
var height = document.getElementById("ParentDiv").style.height;
Create Child div with same height and add your Divs inside it new child div.
If height of child div is get exceeds that parent div
Create another child div and continue the process.
This process is hectic but will support to all browser
When jQuery-plugins are Good option but I personally feel that if they can do it you can do it.
All the best