2 replies [Last post]
MrCadbury
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-07-29
Posts: 2
Points: 0

Hi there, I was wondering if some bright spark could give me a bit of a helping hand here.

I'm making a blog for a photography site and as such, I'm going to be putting up a few images as teasers for the rest of the gallery. Now, to do this, I'm in the process of making a liquid layout which has gone quite well apart from one aspect.

Now, I want to be able to float the images left or right and also to constrain themselves to the parent div and therefore, I would like the parent div to expand to hold these images in place. What is happening, however, is that the images are just doing pretty much their own thing, overlapping on other divs.

This will show you what is happening: http://www.dissimulate.org/news

HTML code for the page...

dissimulate.org


About


dissimulate.org - the personal website of John Cordiner, essentially somewhere where I can hold my photographs, pointless musings and other ephemera.


Archive



Blogroll







July 29th, 2007

Testing image capabilities.




This is some lovely text. I hope you like it. It has taken me only a couple of seconds to type in. It is marvellous.



This is some lovely text. I hope you like it. It has taken me only a couple of seconds to type in. It is marvellous.

Posted in Uncategorized | No Comments »





July 13th, 2007

Woohoo! It’s working!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Posted in Uncategorized | No Comments »




July 9th, 2007

I am testing my website. It is lovely.


Obligatory testing, testing, testing. 1 2 3.


Posted in Uncategorized | No Comments »




July 8th, 2007

Hello world!


Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!


Posted in Uncategorized | 1 Comment »


CSS for the page...

/*
Theme Name: dissimulate.org
Theme URI: http://www.dissimulate.org/news
Description: dissimulate.org's layout
Version: 1.0
Author: John Cordiner
Author URI: http://www.dissimulate.org

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/

/* Page background and defaults*/

html, body
{
margin: 0; padding: 0;
color: #000000; background-color: #F3F7E1;
text-align: center;
font-size: 95%;
}

/* Layout ids */

div#site-container
{
margin: 0; padding: 0;
text-align: left; vertical-align: middle;
width: 100%; height: 1%;
}

div#site-header
{
margin: 0; padding: 1em;
background-color: #800060;
background-image: url("http://www.dissimulate.org/images/bg.gif");
background-repeat: repeat;
border-bottom: 1px dashed #000000;
}

div#site-contentcontainer
{
float: left; clear: none;
width: 80%; height: 1%;
margin: 0; padding: 0;
border-bottom: 1px solid #000000;
background-color: #e1e4d3;
}

div#site-content
{
margin: 0; padding: 1em;
border-left: 1px solid #000000;
}

div#site-leftbar
{
float: left;
margin: 0; padding: 0 0 1em 0;
width: 20%;
}

div#site-footer
{
clear: both;
margin: 0%; padding: 0%;
background-color: #F3F7E1;
}

/* Classes */

.post-border
{
padding: 1em 0.2em 1em 0.2em;
background-color: #F3F7E1;
border: 1px solid #000000;
}

.post-separator
{
margin: -0.35em 0 0 0; padding: 0;
text-align: center;
font-size: 1.2em;
}

/* List styles */

#site-leftbar > ul
{
margin: 1em 1.2em 0 0;
text-align: right;
font-family: "Georgia";
}

/* Text styles */

h1
{margin: 0; padding: 0;}

.post-border > h1 /* h1 (Date/Time) child element in .post-border */
{
margin: 0 0 0 0.8em;
font-family: "Georgia"; font-size: 1.37em; font-weight: 400;
letter-spacing: 0.07em;
text-decoration: underline;
}

h2
{
padding: 0;
font-family: "Georgia";
font-size: 1.37em;
font-weight: 400;
}

.post-border > h2 /* h2 (Date/Time) child element in .post-border */
{
margin: 0 0 0 1.8em;
font-size: 1.24em;
letter-spacing: 0.05em; line-height: 2.0em;
}

#site-leftbar > h2 /* h2 (sidebar headings) child element in #site-leftbar*/

{
margin: 1.47em 0.9em 0 0;
text-align: right;
font-style: italic;
text-decoration: underline;
}

li > h2 /* h2 in sidebar unordered list*/
{
margin: 1.47em 0.9em 0 0;
text-align: right;
font-style: italic;
text-decoration: underline;
}

.post-border > h3 /* h3 (end-links) child element in .post-border */
{
margin: 0; padding: 0 3.5em 0 3.5em;
text-align: right;
font-size: 0.7em;
font-family: "Georgia";
}

p {
margin: 0; padding: 0.45em 3em 0.45em 3em;
text-align: justify;
font-family: "Trebuchet MS"; font-size: 0.8em;
}

#site-leftbar > p
{
margin: 1em 1.3em; padding: 0;
text-align: justify; letter-spacing: 0.1em;
font-family: "Georgia";
}

/* Image styles */


.post-imageleft
{
float: left;
clear: both;
margin: 0.3em 0.3em 0.3em 0;
padding: 0.3em;
border: 1px solid #000000;
background-color: #FFFFFF;
}

.post-imageright
{
float: right;
clear: both;
margin: 0.3en 0 0.3em 0.3em;
padding: 0.3em;
border: 1px solid #000000;
background-color: #FFFFFF;
}

Is there anything obvious to you that is causing this?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 days 15 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Remove all those <br /> tags

Remove all those <br /> tags and replace with paragraphs.

Remove the .clearfix div, and make the post div class .clearfix or add {overflow: hidden;}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

MrCadbury
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-07-29
Posts: 2
Points: 0

Thanks very much for

Thanks very much for that!

I had it "fixed" just before you said that but you've certainly helped me clear up any unnecessary CSS and markup.

You're a star!