ansaurus

Question

HTML, CSS: how can I merge these divs in order to use float:left property on their children ?

Answer 1

A:

If you're looking to add properties to a selectors children use

.field-items *
{
    float: left;
}

The wildcard selector * will select all of the field-items class' children. Now this may not be a final solution to the problem, but it's at least a start.

Alex Larzelere 2010-06-01 11:49:03

yeah, this is the starting point. The difficult point is how to merge the 2 divs.

Patrick 2010-06-01 11:55:14

If you remove the borders around everything, visually they will be merged. if you want a border around both divs so that they appear merged, then that's just some fancy border footwork. (top, right, bottom on one and top, left, bottom on the other)

Alex Larzelere 2010-06-01 12:05:39

this doesn't solve the issue, I guess. I copy paste here part of the question: "In other terms, if in the last row there are only 2 thumbnails and the last 2 columns are empty, the thumbnails of the second set should fill the 2 empty columns of the last row of the first set".. and not start a new row leaving the previous row empty.

Patrick 2010-06-01 13:29:34

The only thing I can think of is to change them to `display:inline;` and see if that works, but honestly you're likely going to have to manually position them to fit together. Why can't you change the html?

Alex Larzelere 2010-06-01 13:52:28

because my CMS (drupal) is grouping fields by groups (images and videos in this case). My customer needs to upload files from the back-end. But in the front-end these 2 fields should be merged.

Patrick 2010-06-02 08:46:58

Ahhh.... Wouldnt' it be more practical in the long run to change how Drupal presents the fields, rather than use CSS to fake it? I'm running into a similar situation where I used some CSS to hide some structural faults in the html, and now that we want to make changes it's turning into a nightmare.

Alex Larzelere 2010-06-02 11:35:06

Answer 2

A:

Is this what you're looking for? I don't fully understand but I'm thinking this might send you in the right direction...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Example - Thumbnails in 4 columns</title>
        <style>
<!--
.field-items {
    width:380px; /* 4 columns x 95px columns...
                    each column is an 89px thumbnail and 6px of border  */
}
.field-items a {
    float:left;
    text-decoration:none;
}
/* Just for demo purposes */
.set-1 img {
    border:3px solid red;
}
.set-2 img {
    border:3px solid green;
}
.set-3 img {
    border:3px solid blue;
}
-->
        </style>
</head>
<body>

    <div class="field field-type-filefield field-field-image set-1">
        <div class="field-items">
                <div class="field-item odd">
                        <a href="#" class="lightbox-processed"><img width="89" height="89" title="" alt="First image" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
                <div class="field-item even">
                        <a href="#" class="lightbox-processed"><img width="89" height="89" title="" alt="Second image" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
                <div class="field-item odd">
                        <a href="#" class="lightbox-processed"><img width="89" height="89" title="" alt="Third image" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
         </div>
    </div>


    <!-- second set -->
    <div class="field field-type-filefield field-field-video set-2">
        <div class="field-items">
                <div class="field-item odd">
                        <a href="#" class="lightbox-processed"><img title="" alt="Video Number 1" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
                <div class="field-item even">
                        <a href="#" class="lightbox-processed"><img title="" alt="Video Number 2" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
                <div class="field-item odd">
                        <a href="#" class="lightbox-processed"><img title="" alt="Video Number 3" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
                <div class="field-item even">
                        <a href="#" class="lightbox-processed"><img title="" alt="Video Number 2" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
        </div>
    </div>

    <!-- third set -->
    <div class="field field-type-filefield field-field-video set-3">
        <div class="field-items">
                <div class="field-item odd">
                        <a href="#" class="lightbox-processed"><img title="" alt="Video Number 1" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
                <div class="field-item even">
                        <a href="#" class="lightbox-processed"><img title="" alt="Video Number 2" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
                <div class="field-item odd">
                        <a href="#" class="lightbox-processed"><img title="" alt="Video Number 3" src="http://richard.jp.leguen.ca/images/lenna.jpg"&gt;&lt;/a&gt;
                </div>
        </div>
    </div>

</body>
</html>

In-browser you hey something like this:

alt text

This working, however, rests upon the assumption that all thumbnails will be 89px by 89px. Aditionally, you have to make sure that any element of class field-items does not have the CSS property overflow-y:hidden.

LeguRi 2010-06-01 23:34:22

hi, thanks for the answer. The issue is that the parent divs have not the same number of thumbnails, so I cannot assume parent div = row. (if I understood well your code).

Patrick 2010-06-02 10:36:47

The issue here is that I need the children of the second parent to continue the float:left property effect of the children of the first parent div, in order to fill the empty cells on the last row of the previous parent div.

Patrick 2010-06-02 10:37:46

Have you looked at it in a browser? This still makes 4 columns if I change the number of items per row.

LeguRi 2010-06-02 11:52:30

I'm sorry it looks like what I need.. I will implement it and let you know thanks

Patrick 2010-06-02 14:09:59

np. The catch is you need some kind of parent element (a `<div>` perhaps?) around all the 'rows', and you need to give that element an `overflow-y:hidden;` property, and it can't have a `height`.

LeguRi 2010-06-02 14:20:26

ok it worked, I didn't know you can float elements even if they belong to different divs (!). Unluckily I cannot test it on IE yet, the website is offline. Is your solution cross-browser??

Patrick 2010-06-03 08:22:09

It should be, but I don't guarantee it ;)

LeguRi 2010-06-03 11:55:34

ansaurus

tags:

views:

answers:

HTML, CSS: how can I merge these divs in order to use float:left property on their children ?

related questions