Jon 0

Hi all... just found this place and it looks totally great! On to the question:

I have a piece of markup that looks like so:

<div class="subsection">

     <div class="category">
         <p>Block of text here</p>
     </div>

     <div class="category">
          <p>Block of text here</p>
     </div>

     <div class="category type">
         <p>Block of text here</p>
     </div>

     <div class="category type">
          <p>Block of text here</p>
     </div>

</div>

Now, without wrapping the first two and last two sets of <div>s in their own wrapper <div>s, can anyone tell me if there is a way i can use floats to position them so that they will naturally fall into two columns? So, the first two <div>s would make up column one, and the second two <div>s would float up next to them and make column two.

9 answers

UnDash 23
0
points
This was chosen as the best answer

Jon, here's some CSS for you to try out:

.subsection {width:604px; border:1px solid yellow; overflow:hidden;}
.category {width:300px; border:1px solid green; float:left; clear:left;}
.type {display:inline-block; float:none; clear:none;}
* html .category {margin-right:-3px}
Answered over 7 years ago by UnDash
1
point
.category{
float:left;
clear:left;
}
.category.type{
float:right;
clear:right;
}

You will have to mess around with width/margin/padding to get them to fit into your design properly (remember that width is required for floating elements in IE /overly helpful). Also, because every element inside .subsection is floating, that div will have a height of zero so you may need to give it a height or add an element that has clear:both; after the floating divs if your results show a less than desirable layout.

Answered over 7 years ago by Kurt Zenisek
1
point

You could try a non-float solution: display: inline-block;

See Cross-browser inline-block for more info.

Answered over 7 years ago by Olly Hodgson
0
points

I'd also recommend looking at YUI as it has a ton of flexibility in these multicolumn layouts. And it's been cross-browser tested thoroughly.

Answered over 7 years ago by Daniel Ryan
0
points

This can be done, but can be a bit tricky and won't always work depending on how you are trying to use it. It is basically done by setting a height on .subsection to 100px and overflow hidden. Then set .category to 25px tall. Add a class to the last 2 DIV's and using that class relatively position them up -100px and to the right half the width. I'm sure you can imagine how messy this could get. If we absolutely need to create this we usually attempt to use the jQuery Columnizer plug-in found over at http://welcome.totheinter.net/columnizer-jquery-plugin/

Answered over 7 years ago by Efficient Pixel
Jon 0
0
points

Kurt,

Yours was the answer I was totally looking for, but it seems that while it will align the two divs into the right columns for me, div.type will only float up next to the second div in the left-most column, and not all the way up to the top. Does this sound like an expected behavior?

BTW, you guys rule for answering this question like ten minutes after I posted it :)

Answered over 7 years ago by Jon
0
points

Oops, should have tested this before posting. It seems the clear:left; is also affecting the divs that are floating right.

It seems that the only solution I can come up with at the moment involves knowing the height of the first div.

.category{
float:left;
clear:left;
width:200px;
height:40px;
}
.type{
position:relative;
bottom:40px;
float:right;
clear:right;
}

The width and height for .category is being applied to each div and bottom is offsetting the right aligned divs to match up with those on the left (to match the height). These dimensions will vary depending on your layout.

Technically you don't need to set a height for .category if know the height of the first div, because you can simply use bottom to offset the difference. The sake of a simple layout I've included the height, and made it more grid-like.

Answered over 7 years ago by Kurt Zenisek
0
points

I think it works (according to the CSS spec, anyway) if you make the first two columns wider than 50%, e.g.

<style type="text/css">
    .category {
        float: left;
        width: 51%;
        background-color: #ccc;
    }

    .type {
        float: none;
        width: auto;
        margin-left: 51%;
        background-color: #fcc;
    }
</style>

Haven

Answered over 7 years ago by Paul D. Waite
Jon 0
0
points

Olly and UnDash, you guys nailed it with display: inline-block. Thank you!

Answered over 7 years ago by Jon