Image Layout for PhotoBlog

[derek-lakin]

I am currently developing a PhotoBlog at http://photos.salamandersoftware.biz, which displays an image thumbnail on the left and a description on the right. As a photoblog there are numerous entries one after the other in a list.

Commonly the description will only be one line or so, which leads to the problem: entries do not start themselves below the last image, they are below the last text block, giving a warterfall effect down the page

Can anyone recommend a way to fix this, please?
The CSS is at http://photos.salamandersoftware.biz/styles-site.css

[BenANFA]

The problem is that the images are floated left and if there is room to fit the next blog entry beside it the it will. (If you make your broswer window narrow enough it will display as intended because there is not enough room to put the next entry beside the picture of the first entry).

What you need is a way of telling it that each entry must start of the left, luckily CSS has a way of doing this with the clear attribute

Try adding

clear: left;

to you blogbody style.

[derek-lakin]

What you need is a way of telling it that each entry must start of the left, luckily CSS has a way of doing this with the clear attribute

Try adding

clear: left;

to you blogbody style.

I found this whilst debugging and testing and thought I'd got it cracked. Unfortunately, the sidebars use float: left/right, so setting the blogbody style to clear: left causes the blog entries to start at the bottom of the sidebars

Any other ideas?

[BenANFA]

OK, I am going to try something here however all is not lost, it just aint so simple

You could use absolute positioning for your left and right side bars, that is an extremely common 3 column layout. Additionally when you float things you are really supposed to specify a width which you don't for the left and right column.

I will post again shortly once I've had a chance to download your code and play.

[BenANFA]

OK try the following style changes (I've only included styles that I have changed):

body {
	background: #FFFFFF;
	color: #111111;
	font-family: Verdana,Geneva,Lucida,Arial,Helvetica,Sans-Serif;
	margin: 0px;
	padding: 0px;
	font-size: 100%;
}

.blogbody {
	background: #FFFFFF;
	color: #333333;
	font-family: verdana, arial, sans-serif;
	font-size: small;
	font-weight: normal;
	line-height: 140%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	clear: left;
}

.date	{
	position: relative;
	border: 1px solid #CCCCCC;
	color: #666666;
	font-family: verdana, arial, sans-serif;
	font-size: small;
	font-weight: normal;
	margin-bottom: 10px;
	padding: 5px;
}

#left-links {
	position: absolute;
	left: 0px;
	top: 7.8em;
	border-right: 1px solid #999999;
	padding-right: 5px;
	text-align: right;
	width: 210px;
}

#right-links {
	position: absolute;
	right: 0px;
	top: 7.8em;
	background: #FFFFFF;
	border-left: 1px solid #999999;
	padding-left: 5px;
	text-align: left;
	width: 210px;
}	

I have to point out that I have only been able to try this out in IE6 on Win2k so you may wish to test it in other broswers.

Also I am not sure that your layout is working too well at low screen resolutions (640x480) because very little space is left for the content column in the middle (maybe think about reducing the left hand side bar by half it's width and putting the pictures in there at 1/2 size).

[derek-lakin]

Thanks very much, problem solved.

P.S. Given the target audience is pretty much my family, I'm ok about the low-res issue.

Thanks again.

[BenANFA]

I thought that might be the case Best wishes to you all and feel free to show your appriciation by press the "Rate" button