Hi,

 

I have an image thumbnail that i would like to float to the left, and then the date and post title to the right of that image, and then the rest of the content below both of them, i can get the date/post title to align right of the thumb, but cannot push the first paragraph of text below the image?!?!

 

This is my code...

 

<div class="postSummary">

       <p class="postThumbnail"><img src="/images/sample_post_thumb.jpg" alt="Image of car" /></p>

       <p class="postDate">15th August 2009</p>
       <p class="postTitle">Good Design</p>

       <p><strong>Why is good design important</strong></p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu nibh, volutpat sodales eleifend ut, mollis eget nibh. Sed id lorem vitae leo convallis aliquet. Suspendisse sit amet sem est, et fringilla risus. Mauris interdum gravida fermentum. Duis ac mi.</p>

 

.postSummary {

margin: 30px 0 0 0;

padding: 0;

border-bottom: 1px solid #7cb059;

}

.postThumbnail img {

width: 133px;

float: left;

margin: 0;

padding: 8px 10px 0 0;

}

.postDate {

font-size: 1em;

font-weight: bold;

color: #7cb059;

line-height: 0;

padding: 0 0 5px 0;

}

.postTitle {

font-size: 1.4em;

font-weight: bold;

color: #006666;

line-height: 1em;

}

.postDate p, .postTitle p {

float: right;

}

.postSummary strong {

clear: both;

color: #7cb059;

}

Hi,

 

Why do you have this:

.postDate p, .postTitle p {

       float: right;

       }

if there isn't any paragraph in the .postDate and .postTitle?

 

Regards

Hi,

 

Why do you have this:

.postDate p, .postTitle p {

       float: right;

       }

if there isn't any paragraph in the .postDate and .postTitle?

 

Regards

 

Hmm not sure!!

Well,

 

I'm going to see your code.

Trying to help you.

 

Regards.

Well,

 

I'm going to see your code.

Trying to help you.

 

Regards.

 

I have changed them to heading classes, makes more sense!

Hi,

 

Look, can you guide with this example:

CSS:

* {
margin: 0px;
padding: 0px;
}

.centro {
width: 500px;
height: 500px;
margin: 0px auto;
}

.img {
float: left;
border: 1px solid #000;
width: 250px;
height: 150px;
}

.conteudo_direito {
float: left;
border: 1px solid #000;
height: 150px;
}

.baixo {
clear: both;
border: 1px solid #000;
}

HTML:

	<div class="centro">

	<div class="img">teste</div>

	<div class="conteudo_direito">Teste</div>

	<div class="baixo">Teste2</div>

</div>

 

Regards

Hi,

 

Look, can you guide with this example:

CSS:

* {
margin: 0px;
padding: 0px;
}

.centro {
width: 500px;
height: 500px;
margin: 0px auto;
}

.img {
float: left;
border: 1px solid #000;
width: 250px;
height: 150px;
}

.conteudo_direito {
float: left;
border: 1px solid #000;
height: 150px;
}

.baixo {
clear: both;
border: 1px solid #000;
}

HTML:

	<div class="centro">

	<div class="img">teste</div>

	<div class="conteudo_direito">Teste</div>

	<div class="baixo">Teste2</div>

</div>

 

Regards

 

 

Thanks Flex, i will give this a try!

Hi,

 

Say if it helped friend .

Do it hard .

 

Regards