[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 382
  • Last Modified:

html <div> Divide screen into three sections

Hi

I have an ASP.net project where I want to split the screen into three boxes.
I need one box that takes up the whole top half of the screen and then
twp adjacent boxes below that taking up the bottom half of the screen
The figure below gives a very rough idea. Thanks
___________
I               I
-----------------
I       I       I
------------------
0
Murray Brown
Asked:
Murray Brown
3 Solutions
 
BuggyCoderCommented:
<html>
<head>
</head>
<body>
<div style="background-color:Red">
hello
</div>
<div style="width:600px;background-color:Blue;position:relative;float:left;">
asdfsadf sadfdsaf dsa
</div>
<div style="width:600px;position:relative;float:right;background-color:Green">
ASDFds fdsaf dsaf dsf
</div>
</body>
</html>
0
 
RouchieCommented:
Using the code above, you should also clear the floating div's to stop them floating above anything that goes below them.  So, as above but with this at the bottom:


ASDFds fdsaf dsaf dsf
</div>
<div style="clear:both; height:0; overflow:hidden">&nbsp;</div>
</body>
</html>
0
 
haravallabhanCommented:
Yes and having the width in percentage (%) will ensure the page is not scrambbled when the window is minimized.

<html>
<head>
</head>
<body>
<div style="background-color:Red">
Header
</div>
<div 

style="width:50%;background-color:Blue;position:relative;floa

t:left;">
Bottom left
</div>
<div 

style="display:inline;width:50%;position:relative;float:right
;background-color:Green">
Bottom Right</div>

</body>
</html>

Open in new window

0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thank you very  much for the help
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now