Forums

dejota

Hi I have the following problem, I have 2 divs. one with 75% and another with 25%.

I want that when the div with 25% collapse, 75% will be enlarged to 100%.

lyleyboy

Use Javascript.

dejota

do you have any link? or how could I search?

TheDoc

<div style="width: 100%;">
	 <div style="float: right; width: 25%;">
	 	 <p>Not wide content</p>
	 </div>
<p>Wide content.</p>
</div>

You have to make the 25% one go first in the HTML, but here it is.

dejota

that is a div inside another.

i need something like this.

<div style=""float: left; width: 100%;">
         <div style="float: left">
         <p>Without width, to take 100% when the div of 25% collapses</p>
         </div>
	 
         <div style="float: right; width: 25%;">
         <p>Not wide content</p>
         </div>
</div>

TheDoc

You can't float something that doesn't have a width because it will just take up 100% of the space. So unless you want to use my example, you'll have to have some sort of logic involved.

wolfcry911

dejota, in the future please give better detail - I was amazed that anyone even attempted to answer given the O.P.

try not floating the first div, but place it after the float div in the markup.

noahgelman

<div>
    <div style="float: right; width: 25%;">
         <p>25% div. Collapsible. On the right</p>
    </div>
         
    <div style="float: left">
         <p>This div will be 75% width and to the left of the 25% content. If the first div collapses this div will be 100%</p>
    </div>
</div>

TheDoc

Funny, Noah. I did that exact thing as my first demo, but it didn't work locally (no my shock) and went with the other example.

Copy and pasted yours and it works, so clearly I was having a slow morning!

noahgelman

A typo perhaps :)

dejota

I try to use divs for that part of the template, but not collapsing the div right when I wanted.

The only way I could do to collapse and was maintained with tables.

			<table width="800" border="0" cellspacing="0" cellpadding="0">
                <tr>
                <td>
				<jdoc:include type="message" />
				<jdoc:include type="component" />
				<?php if($this->countModules('user2')) : ?>
      			<jdoc:include type="modules" name="user2" style="none" /><?php endif; ?><br />
					<table width="600" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                    	<td width="200" valign="top">
						<?php if($this->countModules('user6')) : ?>
            			<jdoc:include type="modules" name="user6" style="table" /><?php endif; ?>
                   		</td>
                        <td width="200" valign="top">
                        <?php if($this->countModules('user7')) : ?>
                        <jdoc:include type="modules" name="user7" style="table" /><?php endif; ?>
                        </td>
                        <td width="200" valign="top">
                        <?php if($this->countModules('user8')) : ?>
                        <jdoc:include type="modules" name="user8" style="table" /><?php endif; ?>
                      </td>
                        </tr>
                        </table></td>
                        <?php if($this->countModules('right')) : ?>
                        <td width="200" valign="top"><jdoc:include type="modules" name="right" style="table" /><?php endif; ?>
                      </td>
					</tr>
					</table>

you can see the website here (is in spanish), if you want to inspect the code with firebug.

btw, I use joomla.

http://www.tresarroyosweb.com.ar

bhagavan

hey,
suppose 25% is not there; than another column occupied by 100% itself...

bhagavan

hey,
suppose 25% is not there; than another column occupied by 100% itself...


<div>
    <div style="float: right; width: 25%;">
         <p>25% div. Collapsible. On the right</p>
    </div>
         
    <div style="float: left">
         <p>This div will be 75% width and to the left of the 25% content. If the first div collapses this div will be 100%</p>
    </div>
</div>

dejota

Why put the right div before the left div?

treehouse : what would you like to learn today?

Forums

Help with div collapse.