Click here to Skip to main content
15,943,245 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,
basic design question:

Here is the css
CSS
.common_div>DIV{
	display:block;
	float:left;
	border:1px solid gold;
	margin:5px;
	background:#AADDFF;
	padding:5px;
	border-radius:5px;
	box-shadow: 5px 5px 2px #888888;
}
.newLine{
	clear:both;
}


here is the HTML(sample)

HTML
<DIV class='common_div' style='width:100%'>
<?php
for($i=0;$i<20;$i++)
?>
			<DIV>Google is not helping me enough</DIV>
<?php
}
?>
<DIV class='newLine'>&nbsp;<DIV>

<DIV>
 entire body
</DIV>


Now, the above div with common_div class is is creating multiple line. But the next DIV that I want to put is expected to start right after the finishing the first div. But as a matter of fact the div after the div with common_div class is overlapping and being created after one physical line. What should be the proper way to achieve this?
Posted
Updated 16-May-14 21:59pm
v2

Please use following CSS on divs to arrange them right after each other.
CSS
float:left;

I have tried your sample on firefox browser and it's working fine at my end. Is there any specific browser where you face overlapping of divs?
 
Share this answer
 
Comments
Mohibur Rashid 18-May-14 21:00pm    
Thanks, worked well. I should have guessed that :D
see this example.. :)

CSS

CSS
.FirstDiv
{
    float:left;
    height:100px;
    width:100px;
    background-color:red;
    
}
.SecondDiv
{
    float:left;
    height:100px;
    width:100px;
     background-color:green;
    
}



HTML

XML
<div class="FirstDiv">
    FirstDiv
</div>

<div class="SecondDiv">
    SecondDiv
</div>



SEE online demo at Demo By Nirav Prabtani[^]


Regards,
Nirav Prabtani
 
Share this answer
 
Comments
Mohibur Rashid 18-May-14 21:00pm    
Thanks.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900