Elastic column Problem

23 views
Skip to first unread message

ronit salaan

unread,
Feb 29, 2012, 3:09:41 PM2/29/12
to Elastic CSS Framework
Hi

I am new to this framework. I am facing one issue. May be i dont know
how to fix this or this is not an issue. My problem is

I need three column layout. Middle one will be fixed and left and
right will be elastic.

I put the code like this..

<div class="unit columns">
<div class="columns">
<div class="container" style="width:1300px; background: #F0F0F0;">
<div class="column fixed" style="width:900px; background:
#F0F0F0;"><div class="container"><p>sd sjakdjas kdjsdklj asldkj
askldjas dlkjas dklasdj askldjasl dkjasdkl jasdkl asjdlkasj dlkasjd
askldjas kldjasdkl asjdlkj asdklasj dklasjdalskdj askl djaslk djkla sd
sjakdjas kdjsdklj asldkj askldjas dlkjas dklasdj askldjasl dkjasdkl
jasdkl asjdlkasj dlkasjd askldjas kldjasdkl asjdlkj asdklasj
dklasjdalskdj askl djaslk djkla</p></div></div>
<div class="column elastic"><div class="container"
style="overflow:scroll"><p>sd sjakdjas kdjsdklj asldkj askldjas dlkjas
dklasdj askldjasl dkjasdkl jasdkl asjdlkasj dlkasjd askldjas kldjasdkl
asjdlkj asdklasj dklasjdalskdj askl djaslk djkla sd sjakdjas kdjsdklj
asldkj askldjas dlkjas dklasdj askldjasl dkjasdkl jasdkl asjdlkasj
dlkasjd askldjas kldjasdkl asjdlkj asdklasj dklasjdalskdj askl djaslk
djkla</p></div></div>
<div class="column elastic"><div class="container">&nbsp;</div></
div>

</div>
</div>
</div>


Total Width = 1300
Middle Fixed Column 900

but when i put text in left column, rather than to adjust
automatically, it shifts middle column down to next row.

Why it is like this?

I thought, framework will auto calculate 200 - 900 -200 (left-middle-
right) column sizes.

Is it not like that ???

ronit salaan

unread,
Feb 29, 2012, 3:09:08 PM2/29/12
to Elastic CSS Framework

fernando trasvina

unread,
Feb 29, 2012, 4:24:27 PM2/29/12
to elastic-cs...@googlegroups.com
use this code
<div class="columns" style="width:1300px;">
<div class="elastic column"></div>
<div class="fixed column" style="width:900px;"></div>
<div class="elastic column"></div>
</div>

> --
> You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.
> To post to this group, send email to elastic-cs...@googlegroups.com.
> To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/elastic-css-framework?hl=en.
>

Reply all
Reply to author
Forward
0 new messages