CODEWITHSUNDEEP
htmlcss
Papa Bear
Papa Bear

Reputation: 43

Two divs not floating correctly

Not sure what the problem is: http://watercookies.topfloorstudio.com/

If you scroll down to "Latest News", I'm trying to get the div with the class .newscontentright to be inline with the image on the left. I've wasted too much time trying to figure it out on my own. Any help?

Upvotes: 0

Views: 95

Answers (2)

Dazza
Dazza

Reputation: 13

maybe try your clear before your first float?

<div style="clear:both;"></div>
<div class="newscontentleft">
<img class="imageshadow" width="178" height="122" alt="news1" src="images/news1.jpg">
</div>
<div class="newscontentright">   
<h3>Fall Blue Ridge Parkway “Bike for the French Broad”</h3>   
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, turpis ut hendrerit porttitor, lectus ipsumegestas sapien, ac tristique metus quam id est. </p>
<a> href="#">Read the full article »</a>
</div>

Upvotes: 0

NoPyGod
NoPyGod

Reputation: 5067

You need to set the width of newscontentright

.newscontentright {
       width: 300px;
 }

And remove the following from between newscontentleft and newscontentright

 <div style="clear:both;"></div>

As a side note, learn to lay out pages without using clear. Use clear only when absolutely necessary, otherwise things get messy. 'Overflow: auto' is often a better solution.

In this particular case the clear is completely unnecessary so just remove it.

Upvotes: 1

Related Questions