Collapsing units

[Stefan Frede]

Hi!

I got a problem and don't know how to solve this in a proper way. Perhaps someone can give me a tip.

I've got a grid with two cells and I need to position the content of one cell relative to the parent element of the grid. Problem is that when I do this the cell with the positioned content is collapsing. The other cell floats over the cell with the positioned content.

My solution right now is to add some more or less invisible markup (<span>&nbsp</span>) but I don't like this. But till now I didn't find another working solution which I like.

I hope this is somehow understandable. I add a code example which explains it hopefully a little bit better.

Stefan

<div class="mod">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="bd position_relative"><!-- parent element -->

<div class="line">
<div class="unit size3of4">

<div class="mod position_absolute"><!-- needs to be positioned on the bottom of the parent element -->
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="bd">
... lorem ipsum ...
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>

</div>
<div class="unit size1of4 lastUnit">
... lorem ipsum ...
</div>
</div>

</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>

[Marco M. Jaeger]

is the parent of your mod in a .lastUnit div in the grid?

> --
>
> You received this message because you are subscribed to the Google
> Groups "Object Oriented CSS" group.
> To post to this group, send email to object-or...@googlegroups.com
> .
> To unsubscribe from this group, send email to object-oriented...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=
> .
>
>

[Stefan Frede]

No, the grid starts in the mod.

[Murray Nuttall]

Hi Stefan,
Can you zip this up or show us an example online? I can't quite picture what you're trying to do with it. Do you really need to use position absolute to achieve the design? Or is there an easier way?
m.

[Stefan Frede]

I'm sorry, it is not live so there is no example online, but I packed to screenshots and the relevant code together. I hope this helps to understand what the problem is.

Stefan

[Murray Nuttall]

I wonder if that's too much markup for what you're doing? Like navigation, your header is a special case. You could get away with constructing it like this:

<div class="header">
    <div class="branding">
        <img src="/images/deu/icoLogoBig.gif" alt="experteer.de - Sie verdienen mehr." />
    </div>
    <div class="site-tools">
        <div class="nav">
            <ul>
                <li>Home</li>
                <li>the Vorteile</li>
            </ul>
        </div>
        <div class="login">
            <form action="">
                <!-- form stuff -->
            </form>
        </div>
    </div>
    <ul class="register">
        <li>Register</li>
        <li>Forgot Password?</li>
    </ul>
</div>

Or something like that?

m.

On Fri, Nov 20, 2009 at 11:00 AM, Stefan Frede <ste...@frede.biz> wrote:

I'm sorry, it is not live so there is no example online, but I packed to screenshots and the relevant code together. I hope this helps to understand what the problem is.

Stefan

[Stefan Frede]

I'm playing around with the OOCSS stuff and try to find out how to use it in a proper way. Perhaps I've overdone it a little bit (^_~)

I just found out that it do not help to wrap the navigation which is positioned absolute in a size1of1 grid. IEs don't like it and they still collapse. I do have to enter some textual content.

Stefan

[Nicole Sullivan]

I don't usually use OOCSS components for the header, footer, and navigation. They tend to be so site specific that you end up adding a lot of cruft into your little legos in order to get pixel perfect display.

Cheers,

Nicole

--

Nicole Sullivan

Object Oriented CSS  http://wiki.github.com/stubbornella/oocss

Smush it  http://smush.it

Website  http://stubbornella.org

Tweet!  http://twitter.com/stubbornella

Book  Even Faster Websites with O'Reilly