Search code examples
csspositioningcss-floatcss-position

Basic CSS (Positioning vs Float) what I can't figure out

I'm looking for a solution. I have a CSS styled page. The page is generated with Rails. The layout contains a div id="wrapper for the fix site width and the margin: 0 auto thing.

Details of my problem:

There is a header section, a navigation section and the container (and oc. the footer). The container have two columns. The content and the rightSideBar.

Ok, I start to generate the dynamic thing in the content area. This page is about predictions. I have tarot cards in a spread then every card is cycled threw again to have the explanations of the meaning of the cards.

The spread box at the top of the content area:

div#spread_box {
 width:620px; 
 background-color:#392b3f; 
 margin: 15px 15px 10px 10px; 
 display:block; 
 overflow:auto;  
 position:relative; 
 clear:both;}

I have images in it what I want to be positioned perfectly one place, so I use absolute positioning.

div#spread_box img  {border: 1px solid #000000; display: block; height: 120px; position: absolute; width: 71px;}

div#spread_box #kelta1  {left: 115px; top:168px;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); z-index: 500;}
div#spread_box #kelta2  {left: 115px; top:168px;}
div#spread_box #kelta3  {left: 115px; top:45px;}
div#spread_box #kelta4  {left: 115px; top:291px;}
div#spread_box #kelta5  {left: 20px; top:168px;}
div#spread_box #kelta6  {left: 210px; top:168px;}
div#spread_box #kelta7  {left: 310px; top:395px;}
div#spread_box #kelta8  {left: 310px; top:270px;}
div#spread_box #kelta9  {left: 310px; top:145px;}
div#spread_box #kelta10 {left: 310px; top:20px;}

This is the spread box. As you can see, I used the positioning technique to have this at the right place. Than comes the Rails generated content data. Each block have a class="card_detail". In this there are 3 things: A short text in a <p> that details the position. Under that in two columns the picture of the card and the explanation of it.

Because this is database generated content, I used the float technique.

div.explanation_box     { width:600px; background-color:#392b3f; border: 1px solid #000; margin: 15px 15px 10px 10px; text-align:justify; padding: 10px; overflow:auto;}
div.explanation_box p   { width:475px; }
div.explanation_pos     { margin:5px; display:block;}
div.explanation_pos p   { width:575px; }
div.explanation_card    { width:100px; float:left;}
div.explanation_img     { margin:5px; width:100px; float:left;}
div.explanation_pos img { width:100px; }

There is a container box called explanation_box with a fixed width and an overflow:auto property. The explanation_box is in the normal workflow including float positioned elements.

Sympthoms of my problem

  1. If I give an exact height:600px; to the spread_box (the container element) than everything is fine. However if I display one and only one card, than there will be a huge unused area. enter image description here

  2. If I take away the height parameter of the spread box than the whole thing is gone! enter image description here

  3. And If the overflow:auto selector is removed, than the floating elements are going up, under the absolute positioned elements.

    enter image description here

  4. If I use overflow auto and the fix height with smaller px size than the appearing content, than there will be the slider on the right side and the content will be cropped.

The Question at last

So, how can I make the spread_box have a dynamic height included a fixed positioned spread?

The content of the spread_box depends on the FORM that sends the data. So there can be everything from a single card to a really complex spread. This is why I need this!

Solution

  • Firstly, change overflow: auto to overflow: hidden to remove any chance of scrollbars.

    Due to the fact that your cards are absolutely positioned, and the height of all the cards together is variable, you need to work out the combined height of the cards. Then, you need to set this calculated height on #spread_box.

    You can calculate the height in either of two places:

    • In your Ruby code. You know which cards you're outputting, and the height of each card and the top values are known to you. This might be difficult to get right, but has the advantage that it will work if JavaScript is disabled, which brings me to the next option..
    • Using JavaScript. This is the cleanest way to resolve your problem. Some JavaScript, or even just a few lines of jQuery can calculate the height of the cards.