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.
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>
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/
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 more of a designer than a coder, so apologies if this question seems bone-headed and the answer obvious.
Anyway, with that caveat out of the way... I'm trying to create a page where the images are in a row that extend off the right edge of the screen, so that the user can scroll to see more images. Other interface elements like the logo and nav are fixed in place.
You can see the page here: http://werewolf.phantomlimb.net/
and the CSS here: http://werewolf.phantomlimb.net/wolf.css
To remove the spaces between the images I have floated them left.
My question is that in order to prevent the images from wrapping, even with a height attribute on the container div and display: block I have to give the div a width value, in this case 4000px. A width of auto for example makes the images wrap onto a new line, which is what I don't want!
As I may not always know the exact width of the combined images, is there a width value I can use that will force the images to stay in a single row, or some other CSS trick?
Many thanks.
J
I would use inline-block for this kind of stuff.
Something like this:
#imgHolder{
font-size: 0px; /* Remove the spaces between the images */
white-space: nowrap; /* Prevent the images from wrapping */
}
#imgHolder img{
display: inline-block;
vertical-align: top;
height: 654px;
width: auto;
}
Here's a working example:
http://jsfiddle.net/155ukfwp/
So, I have this layout looks like this
As you can see there, the div is floating/aligned to the right side perfectly but on the left side there's a gap between it, how do I clear the gap?
DIV CSS:
.thread-list{
width: 40%;
background-color: #fff;
padding: 10px;
border-style:solid;
border-width:1px;
border-color:#F0F0F0;
margin-bottom: 3px;
margin-right: 10px;
margin-bottom: 10px;
overflow: auto;
float: left;
}
NOTE: The div is showing content dynamically (from database), and I can't make the div in 2 separated columns.
Sorry, if I'm being not clear enough.
DEMO
If you float multiple elements & one of the div has larger height then others, then these types of effect are created (the one you showed in your screenshot).
Solution 1: clear float left from 1st element of each row using :nth-child(2n+1) in your case its ..2n.. cuz you have 2 elements in one row.
Add this css in your style-sheet:
.thread-list:nth-child(2n+1){
clear:left;
}
Solution 2: Solution 1 will align all the div's but there will still be a negative space beneath, if you dont want that then you have to use plugins like Masonry Layout, this effect can not be achieved with pure css.