Solved

html <div> Divide screen into three sections

Posted on 2012-03-22
4
371 Views
Last Modified: 2012-03-25
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
Comment
Question by:Murray Brown
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 20

Assisted Solution

by:BuggyCoder
BuggyCoder earned 167 total points
ID: 37751840
<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
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 166 total points
ID: 37752014
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
 
LVL 1

Accepted Solution

by:
haravallabhan earned 167 total points
ID: 37752500
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
 

Author Closing Comment

by:Murray Brown
ID: 37763089
Thank you very  much for the help
0

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question