Solved

html <div> Divide screen into three sections

Posted on 2012-03-22
4
336 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:murbro
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:murbro
ID: 37763089
Thank you very  much for the help
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

762 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now