homepage Welcome to WebmasterWorld Guest from 54.166.122.65
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Floating image positions incorrectly
klendino

5+ Year Member



 
Msg#: 3927228 posted 1:50 pm on Jun 5, 2009 (gmt 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

 

hatbocs

5+ Year Member



 
Msg#: 3927228 posted 2:49 pm on Jun 5, 2009 (gmt 0)

Doesn't align=left work for what you're wanting to do with the image?

klendino

5+ Year Member



 
Msg#: 3927228 posted 4:18 pm on Jun 5, 2009 (gmt 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...

klendino

5+ Year Member



 
Msg#: 3927228 posted 3:16 pm on Jun 14, 2009 (gmt 0)

Hi Hatbocs

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved