Solved

html <div> Divide screen into three sections

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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 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