Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: not2easy

Message Too Old, No Replies

Floating image positions incorrectly

     
1:50 pm on Jun 5, 2009 (gmt 0)

New User

5+ Year Member

joined:Dec 9, 2008
posts: 10
votes: 0


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">&nbsp;</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

2:49 pm on June 5, 2009 (gmt 0)

New User

5+ Year Member

joined:June 5, 2009
posts:3
votes: 0


Doesn't align=left work for what you're wanting to do with the image?
4:18 pm on June 5, 2009 (gmt 0)

New User

5+ Year Member

joined:Dec 9, 2008
posts: 10
votes: 0


Yes that would work, but then if the text consists of more than one line you have the image, then the text and the text continues under the image, leaving a big space.

Example

¦Image¦ Text comes here...
¦Image¦
¦Image¦
¦Image¦
And reminder of the text continues here.

What I want to do is get rid of the spaces and have it as follows:

¦Image¦ Text comes here...
¦Image¦ More Text comes here...
¦Image¦ Text comes here...
¦Image¦ More Text comes here...
Even more text...

3:16 pm on June 14, 2009 (gmt 0)

New User

5+ Year Member

joined:Dec 9, 2008
posts:10
votes: 0


Hi Hatbocs

align=left works. Had to clear the cache to make it work this way. Thanks for the suggestion.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members