Div resize based on contents - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Div resize based on contents

shrink-wrapping?

burns

5:53 pm on Nov 10, 2010 (gmt 0)

10+ Year Member

I have a problem. I have a layout similar to this [layouts.ironmyers.com...] where the left column contains a tree menu like sample 3 on this page [jquery.bassistance.de...] the trouble is the menu can go down several levels and I thought it would be possible for the div to resize its width when the menu expands.

I know could set a fixed width and have scrollbar (as this is what I have in place) but I was wondering if there is a way for he left column to expand based on its contents and to make the main content contract, does that make sense?

I thought it would be possible to have to divs side by side, both without widths and for them to expand and contract accordingly but I can't get this to work.

I have looked at shrink-wrapping and display:inline on the divs but I'm really struggling to get a result.

The problem seems to be getting to divs side by side without setting a width for either div.

If the only option is a fixed width with a scrollbar then so be it.

Thanks in advance.

SuzyUK

8:22 pm on Nov 10, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

hi burns and Welcome to WebmasterWorld!

it should be possible, and shrink wrapping is the clue, however there would be a couple of gotchas.. one would depend on how your layout HTML source is ordered - to achieve the flexible width you're describing you would need for the left column (or menu holding div) to come before the main content in the source another is possibly how flexible the existing layout is (pretty) design wise, i.e. if you want full height "columns".. this will need a bit more thought or creativity with background images!

<style type="text/css" media="screen">
html, body {padding: 0; margin: 0; border: 0;}
#header, #footer {height: 100px; background: #ccc}
#contentwrap {overflow: hidden; width: 100%;}
#menu {
float: left;
background: #ffe;
padding: 0 10px;
}
#main {overflow: hidden; padding: 0 0 0 20px;}

</style>
</head>
<body>
<div id="header">The Header</div>
<div id="contentwrap">
<div id="menu">
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>item 2.1</li>
<li>item 2.2
<ul>
<li>item 2.2.1</li>
<li>item 2.2.2</li>
<li>item 2.2.3</li>
</ul>

</li>
<li>item 2.3</li>
</ul>

</li>
<li>item 3</li>
</ul>

</div>
<div id="main">
<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>

</div>
</div>
<div id="footer">the footer</div>

the

overflow: hidden;

and width on the contentwrap div is to make it stretch vertically to contain the floated left div if the left div was longer than the main content div.. maybe it could be used to hold a background image, however as mentioned above with the unknown width of the left column it would be hard to use "faux columns" on this..

the

overflow:hidden;

on the main div is to make it "shrink wrap" horizontally so it doesn't wrap around the left column even without a width..

nae perfect but an idea or two, hopefully it helps

Major_Payne

9:13 pm on Nov 10, 2010 (gmt 0)

Might look into using this Animated Nav Menu [javascriptbank.com]. Uses a JQuery JS file and seems to be rather smooth in operating. Con is that it is JavaScript, but using the "noscript" tags is a must on any site that uses scripting anyway to warn those with JS turned off.

burns

10:12 am on Nov 11, 2010 (gmt 0)

10+ Year Member

SuzyUK - I can't thank you enough this is exactly what I was looking, thank you so much.

burns

3:34 pm on Nov 12, 2010 (gmt 0)

10+ Year Member

Ok, I think I may have spoke to soon. As you said, I find it really difficult to get faux columns working, do you think thats it even possible with a variable-width layout?

thanks

burns

5:15 pm on Nov 12, 2010 (gmt 0)

10+ Year Member

Actually I think I have finally nailed it, min-height saved the day \o/

SuzyUK

5:19 pm on Nov 12, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I just knew you were going to ask that ;)

Yes it's possible, but only in some cases. It really depends on the actual type of background required, if it's two plain columns with the "split" being the full height between the menu and the main content then that is likely only possible if the content is always longer than the sidebar, as the content part would also have to contain part of the image to make the illusion of columns complete. In some cases it's possible by overlapping the sidebar and content columns by a few pixels and giving them both the same adjoining "border" so that no matter which ones longest it looks as it it's one full length.. it all depends on the effect to be achieved

I'm thinking it can't be a true faux image i.e. on the background container as there is no way of knowing where the "join will be once the content renders..is that the problem? if so some creativity with the actual column backgrounds may be called for

any chance you could describe or link to the type of background image/effect you would like to use? I find it really difficult to visualise all scenarios and images..

ta

SuzyUK

5:20 pm on Nov 12, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Actually I think I have finally nailed it, min-height saved the day \o/

Cool!.. just shout with that link image if you need to then, glad it's working out :)