If you can read the Headings ... one's called JWT, the other Alela Diane.. how do I get "Alela Diane" to fill up the space between them ( no puns intended )
The CSS property for these div's is set to display: inline-block.
The HTML - >
<div id="shastra_display">
<div class="shastra_post">
There are multiple div's like this containing the Alela Diane's and JWT's etc.
</div>
</div>
The CSS - >
#shastra_display
{
width: 880px;
}
#shastra_display div
{
display: inline-block;
vertical-align: text-top;
}
.shastra_post
{
width: 270px;
background-color: light-grey;
}
Is it always going to be just two
columns? – thirtydot
It's two columns because the width of
the parent box allows only two to fit.
– Zach
So, the number of columns changes depending on the browser width.
That means you can't "cheat" and do it like this (as suggested by #Stefy):
http://jsbin.com/atimu4
Other than a fixed number of columns, CSS can't do it. See this answer for a comparision of the ideas:
CSS Floating Divs At Variable Heights
You will have to use JavaScript. There's already a convienient jQuery plugin: jQuery Masonry
Some interesting demos:
http://masonry.desandro.com/demos/animating-jquery.html
http://masonry.desandro.com/demos/adding-items.html
You should probably use a 2-column template in order to display the items properly.
Related
I have two columns in my web app when the screen is large enough.
http://i.imgur.com/FL7lgjj.png
The issue is the space between the first element to the left and the one below it is bothering me.
.thumnnail {
display: inline-block;
width: 400px;
float: right;
}
is the CSS of the little boxes. I am not sure how to get them to stack. more closely. Let me know if more details are required!
EDIT: HEere is the JS Fiddle
http://jsfiddle.net/hkLXZ/
This requires one of two things:
Use CSS columns (e.g. .your-element { column-count: 3; }), in which case your columns will not stack left to right, but top to bottom.
Use a JS layout engine like Masonry or Isotope, which offers a lot more control with regard to how elements are laid out, but requires JavaScript.
I have a dynamic form of sorts that I'm laying out with a css flexbox. I'm using flex because I don't know until runtime how many or what type/width the components are in the form. I'd prefer for the first "column" to have left-aligned labels and every subsequent column to have right-aligned ones, but I can't really think of any way to do this. Any suggestions?
Basic example of this form (with everything right-aligned). Be sure to pull the divider left to make the rendered output as large as possible to see what the form looks like with more than just one column: http://jsfiddle.net/27Gfd/
//basic markup for one form component (called a row). See JS fiddle for more
<div class="container">
<div class="row"> //I might stack next to another "row" because I have fixed width based on component type
<div class="miniflex"> //I'm another flex container to layout label/input
<div class="label">Label 1</div>
<div class="input">
<input type="text" />
</div>
</div>
</div>
at the moment no, you can't
example pseudo code (just an idea, it doesn't work!)
.flexContainer::first-flex-line > div {}
.flexContainer::last-flex-line > div {}
.flexContainer::nth-flex-line(odd) {}
.flexContainer::nth-flex-line(3n+1) {}
this doesn't exist yet for a precise reason
.flexContainer::nth-flex-line(3n+1) > div {width:100%}
changing the size of the flex-items may affect the container's wrapping. so that's a circular loop. not a nice thing! :P
if you can think of a solution and you want it implemented you could ask to the CSSWG using the newsgroup, or even on chrome's and firefox's bug trackers
Change the css:
.ex3 .label{
text-align: right;
/* ... */
}
to:
.ex3 .label{
text-align: left;
/* ... */
}
Or, if you're not certain that the first column is a label, use:
.miniflex div:first-child {
text-align: left !important;
}
(You should probably avoid using !important but I can't offer a precise alternative without knowing the logic behind the markup.)
Or if you might have labels in places other than the first column
.ex3 .label:first-child {
text-align: left;
}
I've got a container which sometimes has three elements, sometimes four. The height of the container is constant.
Are there any bright ideas out there for a CSS-based method for a vertical liquid layout like this?
That is, so the children are either 25% or 33% height, but they figure that out by themselves? (smart kids.) EDIT of course it doesn't necessarily have to be percentage based...
I can do something PHP-based pretty easily, but a more elegant solution would be nice.
Here is a little Sass to make your life easier:
$height: 200px
ul
height: $height
#for $i from 1 through 6
.list-#{$i} li
height: $height/$i
You can also do it with straight CSS:
.list-1 li {
height: 200px;
}
.list-2 li {
height: 100px;
}
...
With PHP, add the .list-# class to the parent element based on how many children there are.
You could also accomplish this in pure CSS with flexbox, but it will not work in the browsers you require.
Well, I've just ended up using a table as the outer container. Table rows added dynamically vertically scale the layout automatically.
Elegant enough, and prevents any PHP processing. Any other solutions welcome, of course (and maybe accepted).
Here's a fantastic CSS menu:
The only disadvantage its not stretched to 100%... if it has 2 elements, it should be 50%/50%, if 4 items then 25%/25%/25%/25% just like they were table cells. How to do that? I'm new to CSS.
Use display: table/table-cell (for modern browsers and IE8+) and display-table.htc (for IE6/7).
Modify its width as 100% will make the menu span to full width.
#myfantasticmenu { width: 100%; }
I simulated the change with firebug and the needed Style defination was
#nav {
overflow: hidden; /* To clear the div */
width: 100%;
}
And about the part, where you need 50/50 for two and 25 each when the item are 4, you will require some javascript to do so.
If you consider using jQuery then it will something like
childs= $("#myfantasticmenu").children('a'); //grab the list items
childs.css('width', (100/childs.length)+%);
If avoiding scripting is your MAJOR target, then bring tables into the games, they automatically do the behavior you need.
I actually wanted the two grids in one div , I mean one grid in right, other in the left .....but for now the grid is appearing down. Its same as you split in a table with two rows !! same as that I need to split a div and add two grids side by side . Hope you get my point . Thanking you all in advance for your awesome support and replies
Create two divs inside your main div
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
With CSS, fix each one to the correct side
#left { float:left }
#right { float:right }
It all depends on the design you want to achieve for that table. There are multiple approaches, each of them yielding slightly different results.
You can change the display CSS property on the divs. The best value to use would be table-cell; however, this value is not supported by any version of IE. You can also try inline or inline-block values.
You can make the divs float to the left in their container.
You can use absolute or relative positioning of the divs in their container; however, that approach doesn't work well with fluid designs.
You can switch to span.
This is an expansion of Omar Abid's accepted answer. I started with that and had to make further modifications so it would work in my example of the stated question.
I made this work with class names instead of IDs so I could call the same CSS in multiple instances. This gave me the the ability to simulate two equal size cells. In my example, I set fixed size with ems so that it could preserve its appearance cross a range of table and desktop browser sizes (in my mobile CSS, I have a different strategy).
To align an image in the left div, I had to make a separate block (the last one in the CSS code).
This should address the question in most instances
<div class="BrandContainer">
<div class="BrandContainerTitle">
<h1>...</h1>
</div>
<div class="BrandContainerImage">
<img alt="Demo image" src="..." />
</div>
</div>
CSS:
.BrandContainer
{
width: 22em;
}
.BrandContainerTitle
{
vertical-align: top;
float: right;
width: 10em;
}
.BrandContainerImage
{
vertical-align: top;
float: left;
}
.BrandContainerImage img
{
width: 10em;
}
Use a table. It makes more sense to use tables where they are more efficient. Things like that is what tables are made for, and div is not made for.