WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > div resize to content problem

Reply
  Thread Tools Display Modes
Old 17th December 09, 11:03 AM   #1
turtle
WLC Member
 
Join Date: Dec 2009
Posts: 2
Default div resize to content problem

hi, I need to do a simple 2 column css template.

- right column is of fixed width (335px)
- left column has a minimum width of 600px

The left column will display articles with images, sometimes the images may be wider than 600px, so the column needs to expand to accommodate these images without them overspilling, clipping or resizing - basically the column needs to act like a table cell.

Is this behavior possible using divs?

Thanks you any help.
turtle is offline   Reply With Quote
Old 17th December 09, 03:48 PM   #2
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: div resize to content problem

Hi,
Yes it is possible to do with Inline-Block. It behaves similar to floats in that it will shrink wrap and expand to the width of it's contents. I set up a test case from your requirements, actually I had been meaning to do something similar so you gave me the push I needed.

This will not work in IE6/7 though as they do not have native support for inline-block.

http://www.css-lab.com/demos/inline-...uto-width.html

Auto width divs can also be done using display:table but once again IE6/7 will not support it.

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Auto Width Divs ~ {white-space:nowrap}</title>
<style type="text/css">
.test{
    padding:5px;
    margin:15px 10px;
    border:1px solid #000;
    background:#809900;
    color:#fff;
    font-weight:bold;
    width:1px;
    display:table;
    min-height:0;
}
.test h2{ white-space:nowrap}

.center {text-align:center;}


</style>
<!--[if lte IE 7]>
<style type="text/css">
.test{float:left;width:auto}
</style>
<![endif]-->
</head>
<body>
<h2 class="center">Auto Width Divs ~ {white-space:nowrap}</h2>
<div class="test">
    <h2>This is a small heading</h2>

    <p>You can actually do this for Firefox, Opera, Safari and IE8 very easily with just a couple lines of CSS. There is no hope for ie6 or 7 though and you'd need to work out an expression or javascript etc. There is no hope for ie6 or 7 though and you'd need to work out an expression or javascript etc.</p>
    <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
</div>
<div class="test">
    <h2>heading</h2>
    <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
</div>
<div class="test">
    <h2>This is a much longer heading for testing</h2>

    <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
</div>
</body>
</html>
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Old 18th December 09, 12:46 PM   #3
turtle
WLC Member
 
Join Date: Dec 2009
Posts: 2
Default Re: div resize to content problem

Wow, thank you very much Rayzur for such a great solution and a nice example to boot! I must admit I hadn't even heard of inline-blocks!

I haven't gone through it all yet so I'll leave it open rather than tag it 'solved' for a little while longer if you dont mind.

I think internet explorer 6 is the most popular browser out there at the moment so its worrying if it doesn't work with ie6 or ie7. Do you know what behavior it would exhibit in ie6/7 ? Would the content overflow in to the right column or would it get cropped?

I noticed that whilst it works perfectly in firefox and opera, in ie8 whilst the left column expands correctly with content, the right column doesn't move with it and gets covered by the left column.

Is there any other way of achieving this which would work with ie6/7 ? Or is this an example of where we should still use tables for page layout?
turtle is offline   Reply With Quote
Old 18th December 09, 01:21 PM   #4
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: div resize to content problem

Quote:
I noticed that whilst it works perfectly in firefox and opera, in ie8 whilst the left column expands correctly with content, the right column doesn't move with it and gets covered by the left column.
Hi,
IE8 should not be doing that, this looks like a bug. I did not test it in all browsers yet so I did not see it until you mentioned it. I'll have to look into that further.

I would not say that IE6 has the highest amount of users right now. I don't have the latest specs on it but I would say it is less than 10%. There is an inline-block workaround for IE6/7 but I have not put into place yet. I'll do so later and see what happens with them.
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:24 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.