Click here to Skip to main content
15,899,124 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
How can I make two div with same height and both div have height as screen size and both div show as side by side

Like Outlook Menu and Email List

I don't want to use Jquery.

Please Help me
Posted

1 solution

Not sure if this is what you require, what this does is put the divs side by side inside the body, and takes up 100% height of the body.
Here is one way of doing it using CSS and HTML:
CSS
html,body{
	height:100%;
	width:100%;
}
body{
	margin: 0 0 0 0;
	padding:0 0 0 0;
}
div{
	box-sizing: border-box;-moz-box-sizing: border-box;
	height:100%;
	width:50%;
	display: inline-block;
}

Note: no whitespace between the divs.
HTML
<body>
	<div style="border:solid 2px green;">AAA</div><div style="border:solid 2px blue;">BBB</div>
</body>

If this is not what you require, I suggest googling div side by side and div to screen height or something similar.

Check out these links for div side by side for alternative methods:
http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css[^]
http://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display[^]
Side by side no float:
http://stackoverflow.com/questions/3619233/div-side-by-side-without-float[^]
 
Share this answer
 
v2
Comments
hareshdgr8 5-Nov-14 1:15am    
sir I want the side by side. please help me..
jaket-cp 5-Nov-14 4:03am    
This solution does a side by side and max height of the body.
But there other ways to get the div to do side by side using css.
hareshdgr8 24-Dec-14 0:50am    
sorry I didn't check this answer I was not in place.. thank you for every one help

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