2 columns, autosizing depending on content

Forum Moderators: not2easy

Message Too Old, No Replies

2 columns, autosizing depending on content

without tables :(

benihana

4:29 pm on Nov 5, 2004 (gmt 0)

in my content area i would like to have a block of text on the right, and an image on the left. i dont want the text to wrap underneath the image at all, so the image has its own column. Also id like the text to fill the whole area if no image is present.

The template will be used by editors with very little grasp of HTML/CSS, so swapping ids is not an option.

this is what i have so far (after trying many approaches), which does what i would like in IE/PC only.

HTML:

<div id="content">
<h2>title</h2>
<div id="piccol">
<img src="assets/images/pic.jpg" />
</div>
<div id="textcol"><p>blah blah blah etc </p></div>

</div>

CSS:

#content {
width:494px;
float:left;
clear:none;
border-top:13px solid #E5E3E3;
padding:0px 60px 0 50px;

}
#textcol {
font:70%/160% verdana, arial, helvetica, sans-serif;
float:right;
clear:none;
}

#piccol {
float:left;
clear:left;
}

XHTML 1 strict

any ideas appreciated.
cheers
ben

BonRouge

5:30 pm on Nov 5, 2004 (gmt 0)

Ok. I have one idea, but this depends on two things - firstly, you know the height of your picture and secondly, you know the height of the div. If you know both of these, you can put bottom-padding on the image. A bit like this :

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

</head>

<body>
<div id="box">
<img src="wine.jpg" alt="" />
<p> An Iraqi interpreter who died in a suicide attack against British troops had been due to marry
just a few hours later, after delaying the ceremony to redeploy with his unit to a dangerous area
near Baghdad.An Iraqi interpreter who died in a suicide attack against British troops had been due to marry
just a few hours later, after delaying the ceremony to redeploy with his unit to a dangerous area
near Baghdad.</p>

</div>
<div><p>hello there</p></div>
</body>
</html>

I hope this at least gives you an idea.

benihana

4:49 pm on Nov 9, 2004 (gmt 0)

thanks for your input.

ive decided the only practical way is to give heavily commented code and a little traingin on what ids and classes are.
its not a huge site so it should be ok.
cheers