Two columns of boxes, and sometimes, left-column boxes can be larger than the column, and have to move down rigth-column boxes to avoid collision.
Boxes of right or left column can be contained or not, but I don't know # of larger box. Anything can be floated, block or inline, etc.
I have this:
I want this:
Is this somehow possible with CSS only?
JSFiddle (first screenshots)
Thanks!
Got it! Setting greens to inline-block and float: left on blues (and not their parents) works as expected. No JS ;)
JSFiddle (I inverted blue and green in my attemps)
Related
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...
I have 6 floating divs (align to left) on a page. These divs has 2 different widths (depending the image () ). One div has 295px and the another has 216px. The height is calculated automatically by HTML. The container has 1050px, so in one "line" of the container I can insert 3 divs, and the another 3 on the second "line".
The CSS rule is working, all divs are floating to the left, each div has 20px margin, but the problem is the alignment of them. I want to align these divs proportional. At the moment if some pictures has different heights, on the second "line" are some blank spaces (because the height of the pictures above).
I want something to float these divs on the Y coordinate (proportional).
Look at this pictures:
Make a jsfiddle for people to play with.
But, you will probably want to make a container div for each row. This encapsulates the 3 inner divs, being as high as them and allowing the next container to fit nicely underneath
See my fiddle: http://jsfiddle.net/TJxmT/
Wouldn't a min-height at the floating divs solve the problem?
Try to use jQuery plugin called Masonry to fix that layout... You will be surprised!
EDIT:
You can always clear the 1st item in the row and every third item using css :
li:nth-child(3n+4) { clear:left; }
Have you tried putting a clear: both; on every first div of a new line?
I would like to know if I can float the div like this using CSS. What I would like to do is to move the DIV which is CSS DIV 2 under the CSS DIV 1 to the right when reducing the windows size. See the screenshot below:
This is how three DIV would display on bigger windows size. First DIV is at the top left corner, the second DIV is under the first DIV. Then the third DIV is on the top right.
When I resize the browser windows, the third DIV which has wider width will drop to the botton under the first DIV, and the second DIV will automatcially move to the top right corner to fill in the space.
Anyone think that this is possible to do it by using CSS, and might not need to use JS or others?
Thanks
I'd say that change is achieved either by changing from a columnar layout to a row layout, or else by swapping the order of the two elements. Either way, it requires JavaScript.
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
We overlap two Divs using "postion:absolute" and z-index.
http://jsfiddle.net/z5GXV/
The text in the green zone (div id="Zone2") is hide by text in the yellow zone (div id="Zone3"). Any help on how to display the text?
Edit1: We can't use nested divs.
I'm not sure what all the absolute positioning is good for, but you might want to put the yellow zone into the green-zone div, and use a float.
Solution with a float within the green zone
Solution with padding
Simplest way I can possibly think to do this:
Uses one nested div inside the Zone2 to wrap your text and make it appear as if it's wrapped to Zone3.
This is similar to using a <p> or <span> with display: block;.
jsFiddle example.