I have a bunch of floating dynamic divs with different heights.
Fiddle
I want to float the divs nicely, so in the example 14,15,16 should come before 10, and then 17,18,19 should come after.
Any ideas on how I can achieve this?
Thanks :)
.blankspot div {
float: left;
border-right: solid 1px #fff;
border-bottom: solid 1px #fff;
box-sizing: border-box;
margin: 0;
padding: 0;
background: #fed;
display: inline-block;
vertical-align: top;
height: 50px;
width: 100px;
}
EDIT:
Sorry, can see my description is a bit off.
Here's a pic of what I want to achieve
My own research on this issue, tells me that a solution to the problem would result in third party code or some nasty ninja tricks.
If, like in your picture, you can control the width of the outer div to enclose 7 boxes per row then you can mess about with the margins to get the boxes to flow more neatly.
Updated fiddle: http://jsfiddle.net/g4o8rukz/3/
The reason you need to know the number of boxes per row is because you need to know which box will need shifting in the row below. If box 10 is selected to double in size then it's box 15 in the row below that needs dynamically updating with the class neighbourBelow in order to push its neighbours across in the same row.
You need to apply this +5 offset with JavaScript so you could number your boxes with something like this:
<label data-index="10">
<div>10</div>
</label>
Then it's selectedBox.attr('data-index') + 5 to determine the data-index of the box that needs its margin adjusting. This is jQuery syntax but I'm sure you get the idea.
Make the following change and your highlight box will fit the parent
width: 100px;
height: 50px;
background-color: #f0a;
I am not still clear what you wanted to tell regarding before after. If you want to appear 10 after 15 then move the rearrange just your divs. Something like the jsfiddle here http://jsfiddle.net/johirbuet/g4o8rukz/2/
Related
I am attempting to turn a CMS-generated page of four sibling elements stacked atop one another into a two-column layout. Here is the simplified generated markup:
<section id="element-container">
<header id="element-1">Text header</header>
<header id="element-2">Text subheader</header>
<div id="element-3">Text validation messages</div>
<form id="element-4">Form fields go here</form>
</section>
I need a left column with #element-1 and #element-2 stacked together, and a right column with #element-3 and #element-4 stacked together.
I cannot change the CMS-generated markup (such as to add more nesting levels of container elements).
In real-world usage, #element-4 will almost always be considerably longer than the total combined height of #element-1 and #element-2, though every so often we need to dump a bunch of text into #element-2, making it taller than #element-4.
A CSS-only solution is called for over something like jQuery manipulation of elements via detach() or wrap() etc, for the sake of avoiding an ugly flash of content being rearranged; and hiding everything until it's manipulated is very much undesirable as well. For our particular application, fast/clean loading is the absolute top priority. However, I'd be able to do some of that type of manipulation to (only) the #element-3 div, as it contains feedback to the user about a failed form validation, so it has display:none and height:0px at page load. So I'd be very happy with a solution that "only" stacks #element-1 and #element-2 directly atop one another at left/top, and #element-4 at right/top—from there I can find a way to deal with #element-3.
I spent all day today playing with solutions like the one in Floating 3rd element right while first 2 go left, which is so close to what I need, but all solutions to questions like these seem to assume fixed heights on the elements, and break when uncertainty is introduced to heights. For example, if you play with the codepen on the accepted answer on that question by making div3 200px high instead of 100px high, you get a big gap between div1 and div2.
Open to float, flexbox, whatever. Thanks very much.
You can pretty easily force a two-column layout by using column-count on your container element. This will make the browser automatically divide up the elements into however many columns you specify based on their heights, without leaving vertical space between them.
In your case, with two columns, this will basically automatically ensure #element-1 is on the left and #element-4 is on the right. The question becomes where do #element-2 and #element-3 fall in the auto layout. If the first two elements are pretty small, element 3 may end up in the left column; or if the first element is quite tall and elements 2, 3, and 4 are small enough, they may end up all together in the right column.
Sounds from your description like we probably don't have to worry too much about element 2 ending up in the right column, so I'll focus on forcing element 3 to the right column. (If the former is a problem, the easiest solution is a min-height on element 2, but you can experiment with different options.)
Since element 3 is display: none to start, one option you can do is to figure out how tall it should be right before you display it, and then absolute position it at the top of the right column while moving element 4 down by the same amount as element 3's height to prevent overlap. I'm using a simple top margin on element 4 in the example below.
In the example below, the height of element 3 is static, so the logic is simple enough, but in your real case you may have to do something like:
run form validation
add error messages to element 3
set element 3 to display: block; visibility: hidden
get the height of element 3
offset element 4 by element 3's height
set element 3 to visibility: visible
document.getElementById('element-4').style.marginTop = `${document.getElementById('element-3').getBoundingClientRect().height}px`;
body {
margin: 0;
}
* {
box-sizing: border-box;
}
#element-container {
column-count: 2;
column-gap: 0px;
position: relative;
}
#element-1, #element-2, #element-4 {
display: inline-block;
width: 100%;
}
#element-3 {
display: block;
}
#element-1 {
background-color: firebrick;
padding: 40px 10px;
}
#element-2 {
background-color: midnightblue;
color: white;
padding: 30px 10px;
}
#element-3 {
background-color: gold;
padding: 10px;
position: absolute;
top: 0;
right: 0;
width: 50%;
}
#element-4 {
background-color: mediumaquamarine;
padding: 160px 10px;
}
<section id="element-container">
<header id="element-1">Text header</header>
<header id="element-2">Text subheader</header>
<div id="element-3">Text validation messages</div>
<form id="element-4">Form fields go here</form>
</section>
So I'm trying to make a website where users are allowed to post posts, but I have 2 Problems.
The first one Being that those elements overlap, the elements are
automatically placed as divs using data from DB, so i wouldn't be
really giving each one a different id.
The second one being, how to only allow 3 of them to stay in the same
line.
Thanks in advance for any help.
It depends on how you structure every div, I recommend you to use CSS Box Model to avoid overlaping of divs
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
NOTE This is similar to this post, however there is a strict no-javascript requirement and the answer should be responsive (i.e there is not a fixed number of columns).
I would like to style several fixed width, variable height boxes using no javascript such that they form a kind of fluid grid. This jsfiddle yields the picture below. This is essentially just the following css:
div {
float: left;
margin: 1em;
border: 1px solid #999;
width: 150px;
}
I'd like for the only vertical empty space to be the margins. In terms of the screenshot above, I'd like for the tops of 5 and 6 to move upwards to 1em from the bottom of 1 and 2, respectively.
it's not possible by using pure CSS because any how you have to know the current position of div so if you really wanna do this then you have to re position the <div> either using " margin-top " property of css or using jQuery like these jqueryhouse.com/jquery-grid-plugins
I'm trying to create a country list with 3 columns. What I did so far is that:
HTML:
<div class="flagList">
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
...
</div>
CSS:
.flagList {
margin-bottom:20px;
width: 100%;
float: left;
font-family: Calibri, Verdana;
font-size:14px;
line-height:13px;
border:1px solid;
}
.flagColumn {
width: 33%;
float: left;
border:1px solid;
}
I don't want to leave any space between rows such as the space between Comoros and Cote d'lvoire. What I want to do is:
How should I change my code?
This is the downside of floating. When there are different heights, divs will start getting stuck on the edges of the bigger ones. There are 3 ways to fix this:
Use a jQuery plugin that equalizes all heights like what Foundation does.
Give .flagColumn a min-height that is bigger than the biggest one. This will make their heights all equal but might give more space than you'd like.
Switch these from a div grid to a table grid. Tables have their place and this situation might be right for it. Avoid this suggestion if the grid changes widths. Use this if .flagColumn is always 33%.
If it were up to me, I would use the 1st or 2nd option. Table properties can be changed to work with media queries too if that is needed.
You may consider looking into the overflow CSS property if you don't mind the end of the country name being hidden. With this, your CSS would become something like:
.flagColumn {
width: 33%;
float: left;
border:1px solid;
height:1em;
overflow:hidden;
}
This allows you to get rid of the spaces while still having them appear in alphabetical order in your code. I think this will also scale better across screen/window sizes.
There are ways to have the "hidden" content show when the user mouses over the box. Here's one example, but you can find others that might fit your goals better.
box sizing: border-box;
border-sizing: border-box; is your friend. Look at my jsfiddle:
http://jsfiddle.net/wr1zL2ax/3/
I am having trouble with a list which has items with alternating heights based on the content. This causes the rows to break as seen here: http://jsfiddle.net/PYRGb/ Try re-sizing the display view to see the effect.
What i would ideally like is for the list item to continue to the next row with space enough to make a row without hitting the edge of the above row. Is this possible?
I know i have mentioned 'rows' and a table could be a solution but I
am using lists to keep the display fluid and adaptable to a range of
devices.
Only solution i have found is to set a min-height that i am certain
content will not overflow like so: http://jsfiddle.net/PYRGb/1/ But i
really cannot predict the amount of content in the list items and
would like the list item to adapt height if possible.
EDIT: Just a note, if you see the resize the display to have 3 columns, you can see the effect I need but it doesn't work in other situations. (Not sure if this is the same in all browsers, I am using Chrome 26)
Thanks
remove the float and make the li display as inline-block with vertical align top.
http://jsfiddle.net/stevendwood/PYRGb/2/
ul li{
width: 100px;
padding: 10px;
margin: 0 0 20px 20px;
border: 1px solid red;
background: #eaeaea;
display: inline-block;
vertical-align: top;
}
You can set vertical align to middle or whatever you prefer.