Click here to Skip to main content
15,849,829 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
.html code
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>

</head>
<body>

	<div class="middle">
			<div class="news">
				<div class="newsheader"align="center">
					
						<p style="text-align:center;"><span style="font-family:Cursive;font-size:18px;font-style:normal;font-weight:bold;text-decoration:none;text-transform:uppercase;color:6633FF;">News And Updates</span>
						</p>
				</div>
				<div class="newscontent" align="center">
					<!--<marquee direction="up">* hiee</marquee>-->
				</div>
			</div><!-- Ending news panel-->
			<div class="igallery">
				Gallery
				
			</div>
			</div><!--middle div over-->
</body>
</html>





.css code


CSS
.news
{
	height:70%;
	width:27%;
	background:#EEE;
	//border: 3px solid black;
	border-radius:15px;
	margin-top:2%;
	margin-left:1%;
	
	display:relative;
}
.newsheader
{
	border-bottom:3px solid red;
	height:30px;
	//padding-top:3%;
	background:#989898;
	border-radius:15px 15px 0px 0px;
	
}
.footer
{
	height:10%;
	width:100%;
	background:#989898;
	margin-top:50%;
}
.igallery
{
		height:15%;
		width:71%;
		background:red;
		float:left;
		margin-left:29%;
		display:inline;
	
}
.middle
{

	border:3px solid red;
	height:50%;
	width:100%;
	background:green;
	margin-bottom:60%;
	float:left;
}



Here i posted my code i want to set one div tag(class name having igallery) beside another div tag (class name having news).
Posted
Updated 2-Jun-15 21:26pm
v2
Comments
Sergey Alexandrovich Kryukov 3-Jun-15 2:00am    
Not clear at all. Please explain precisely what do you want to achieve.
—SA
Zephire 3-Jun-15 3:18am    
Looks to be working normal...
Fiddle made with code -> https://jsfiddle.net/8uL0p65o/

Just a guess but you do need to put some content in the div with the newscontent class to have it show up. Or enter a height by setting up the newscontent in your css as well (currently not in)

1 solution

Solution


Add float:left; to .news.
CSS
.news
{
    height:70%;
    width:27%;
    background:#EEE;
    //border: 3px solid black;
    border-radius:15px;
    margin-top:2%;
    margin-left:1%;
    float:left;

    display:relative;
}

Remove margin-left:29%; from .igallery.
CSS
.igallery
{
    height:15%;
    width:71%;
    background:red;
    float:left;
    margin-left:29%;
    display:inline;	
}

Demo


[Issue] Div beside another Div[^]
 
Share this answer
 
v3

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