Floating image positions incorrectly

I created a site and have some problems with the layout.
The site is setup with 3 wrappers
1=page wrapper
2=left column wrapper
3=content wrapper
The left and content wrapper I used to apply the faux column method.
Now, in the left column I have 2 divs (being navigation, and news). Used clear: left; to align those divs into the left column.

Now when clicking on a news topic in the left column. The news item is displayed in the content area. This is working fine as long that no images with a float property are used in the news content.

When an image with a "float: left;" is used, to wrap the text nicely next to the image, the image is displayed in a weird position.

I tried to use clear properties in the content, which does the trick to a certain extend except that the position of the news content is pushed to the bottom of the page leaving me with a huge blank space between top and bottom of the page.

Any suggestings on how to fix this.

Doctype:
========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Html Code:
==========
<div id="column2">
<div id="column1">
<div id="navcol">
<h2>.:: Navigation</h2>
menu
<div id="news">
<h2>.:: Nouvelles</h2>
news item
</div>
</div>
<div id="main">
<h2>.:: News</h2>
<div id="NewsPostDetailDate">
08/12/2008
</div>
<h3 id="NewsPostDetailTitle">News Module</h3>

<hr id="NewsPostDetailHorizRule" />

<div id="NewsPostDetailSummary">
<strong>
<img style="margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; float: left;" src="images.png" alt="" width="125" height="78" />Lorem ipsum dolor sit.
</strong>
</div>

<div id="NewsPostDetailCategory">
Category: News
</div>
<div id="NewsPostDetailAuthor">
Posted by: admin
</div>

<div id="NewsPostDetailContent">
Proin laoreet. Suspendisse volutpat, leo id euismod laoreet, felis nulla
</div>
</div>
</div>
<div class="clear"> </div>
</div>
</div>

CSS code:
=========
div#column2 { /*Content*/
margin: 0;
padding: 0;
background-image: url('image.png');
background-position: right;
background-repeat: repeat;
width: 100%;

}
div#column1 { /*Navigation*/
margin: 0px;
padding: 0px;
background-image: url('image1.png');
background-repeat: repeat-y;
width: 100%;
}
div#navcol {
padding: 0;
width: 250px;
float: left;
}
div#main {
padding: 0 10px;
margin-left: 280px;
}
.clear {
clear: both;
display: block;
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
.NewsSummary {
padding: 0.5em 0.5em 1em; /* padding for the news article summary */
margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */
/* border-bottom: 1px solid #ccc; */
border-bottom: 1px dotted #0099FF;

}

.NewsSummaryPostdate {
font-size: 90%;
font-weight: bold;
}

.NewsSummaryLink {
font-weight: bold;
padding-top: 0.2em;
}

.NewsSummaryCategory {
font-style: italic;
margin: 5px 0;
}

.NewsSummaryAuthor {
font-style: italic;
padding-bottom: 0.5em;
}

.NewsSummarySummary, .NewsSummaryContent {
line-height: 110%;
}

.NewsSummaryMorelink {
padding-top: 0.5em;
}

#NewsPostDetailDate {
font-size: 90%;
margin-bottom: 5px;
font-weight: bold;
}

#NewsPostDetailSummary {
line-height: 120%;
}

#NewsPostDetailCategory {
font-style: italic;
border-top: 1px solid #ccc;
margin-top: 0.5em;
padding: 0.2em 0;
}

#NewsPostDetailContent {
margin-bottom: 15px;
line-height: 120%;
}

#NewsPostDetailAuthor {
padding-bottom: 1.5em;
font-style: italic;
}

/* to add specific style to the below divs, uncomment them. */

/*
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}

I hope the explanations is clear, thanks

Floating image positions incorrectly

klendino

hatbocs

klendino

klendino

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week