5 Replies - 616 Views - Last Post: 19 December 2010 - 10:17 PM

#1 Guest_smola*


Reputation:

floating divs

Posted 16 December 2010 - 03:07 PM

Hi I want to make a loop wich will create a parent div (.post) and place two divs (.left and .right) inside. I want the left div to display an image and the right one the tittle and the post. When I render the page i get a complete mess , I put some borders on my .post and I realized that .left and .right aren't in it. I can't figure out whats the problem I could realy use your help.

here is my code :

 <?php

   include ("includes/includes.php");
	$blogPosts = GetBlogPosts();
   	foreach ($blogPosts as $post)
	{
	echo "<div class='post'>";
		
		echo "<div class='left'>" .  "<img src='" . $post->image   . "'/>" . "</div>";  
	
		echo "<div class='right'>";
		echo "<h2>" . $post->title . "</h2>";
		echo "<p>" . $post->post . "</p";
		echo "</div>";
		
		echo "<div class='clear'>" . "</div>";
	
	echo "</div>";
	}
    ?> 


and my simple css:
.left {
width:200px;
float:left;

}
.right {
width:550px;
float:right;
	

}
.post{

border:solid  1px #000000;

}

.clear {
clear:both;

}


MOD EDIT: When posting code...USE CODE TAGS!!!

:code:

This post has been edited by JackOfAllTrades: 16 December 2010 - 03:29 PM


Is This A Good Question/Topic? 0

Replies To: floating divs

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6066
  • View blog
  • Posts: 23,526
  • Joined: 23-August 08

Re: floating divs

Posted 16 December 2010 - 03:30 PM

I think this might get better traction in HTML & CSS, so I'm moving it there.
Was This Post Helpful? 0
  • +
  • -

#3 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: floating divs

Posted 17 December 2010 - 04:49 AM

Hi smola

The code you have posted should come out fine going by the description of what you are after. If you use firebug to inspect the code on your page does the structure come out right with the correct styles applied?
Was This Post Helpful? 0
  • +
  • -

#4 Guest_smola*


Reputation:

Re: floating divs

Posted 17 December 2010 - 05:17 AM

it works in firefox but not in ie and chrome
Was This Post Helpful? 0

#5 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: floating divs

Posted 19 December 2010 - 09:30 AM

Code looks correct you might want to try adding a width to your "post" class.

Since your left and right box width adds up to 750 px, I suggest you try making the class "post" say 800px.

I'm not a guru on css but if I encounter these problems I usually just play around with the width / height of the main container in your case the main container is your "post" class.

Edit: Also try adding a height to your left/right boxes

If my memory didn't fail me IE requires text inside an empty div box else it won't show up on your site or it will show up as an ugly 1px line.

This post has been edited by aklo: 19 December 2010 - 09:39 AM

Was This Post Helpful? 0
  • +
  • -

#6 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: floating divs

Posted 19 December 2010 - 10:17 PM

View Postaklo, on 19 December 2010 - 08:30 AM, said:

If my memory didn't fail me IE requires text inside an empty div box else it won't show up on your site or it will show up as an ugly 1px line.


I think your right...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1