# Dividing HTML into sections.



## ammours

The html code is built dynamically form an xml file. This xml file has sections defined in it and a section has parent and children. Section means a part of the HTML screen. For example, a section can have 30% of the screen width ( of the parent section) and other can have the other 70%.

---------------------*----------------------------------------------
| Hello--------------| Section B
|--------------------|
|--------------------|
|--------------------|
|--------------------|
|--------------------|
|--------------------|
|--------------------|
|--------------------|
|--------------------|
|--------------------|
---------------------*---------------------------------------------

Now, the question is how to build those sections into the html code so that when I modify their innerhtml to write text information, they will be placed correctly into their position in the section. I gave you some examples:

Parent is the container with 100% full screen, Section A has 30% and Section B 70% that would result in:

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>

<div id="main">

<div id ="left">
</div>
<div id ="right">
</div>

</div>
</HTML>

How can I modify above code so that when I decide to invoke right.innerhtml="ANY HTML CODE" will result in text inserted into the correct Section B which is on the right 70% of the screen width..? I hope that is clearer... Don't forget that I am looking for something dynamic applicable to any Section.


Thanks for any person who can help here.!! Thanks


----------



## dm01

Just put your HTML within the correct <div>.

<div id="main">
<div id="left">
<p>This is the left side of the page</p>
<p>This is a small space</p>​</div>
<div id="right>
<p>This is the right side of the page</p>
<p>This space is much larger</p>​</div>​</div>


----------



## ammours

dm01 said:


> Just put your HTML within the correct <div>.
> 
> <div id="main">
> <div id="left">
> <p>This is the left side of the page</p>
> <p>This is a small space</p>​</div>
> <div id="right>
> <p>This is the right side of the page</p>
> <p>This space is much larger</p>​</div>​</div>


That won't work and will show lines one under the second.. not in the way I wanted to be.. I wanted them to be on the same line one in the 30% left and the other on the 70% on the right.


----------



## dm01

Put this in the <head> section of your document:


HTML:


<style type="text/css">
#main {bgcolor: #fff;}
#left {float: left; width: 30%;}
#right {float: right; width: 70%;}
</style>

This is an internal style sheet. Only with a style sheet (internal or external) will your document display correctly.

[By the way, this isn't frameset. You may want to change your <title> element to reflect this.]


----------



## ammours

dm01, that seems to be perfect. Thank you and all the best.
I will have now to learn more about float etc.


----------



## dm01

No problem.

Style sheets can be tricky. If you want to learn more about style sheets and HTML/XHTML, visit www.w3schools.com for comprehensive, easy-to-learn tutorials.


----------



## ammours

dm01 said:


> No problem.
> 
> Style sheets can be tricky. If you want to learn more about style sheets and HTML/XHTML, visit www.w3schools.com for comprehensive, easy-to-learn tutorials.


Other question .. If I used too many css floats with <div> around 100 on a page.. Would that affect the performance when the page is loaded?


----------



## dm01

I don't know, try it and see.

What are you trying to accomplish with a hundred <div>s?


----------



## ammours

dm01 said:


> I don't know, try it and see.
> 
> What are you trying to accomplish with a hundred <div>s?


It is a complex design.. but I was wondering if float has any impact on the performance in general.


----------



## dm01

CSS and HTML are rather basic, and do not make great demands on the processor or RAM. I don't see a large number of <div>s being a problem, but the only way to find out is to test your theory.

Are you using <div>s on more than one page? There is an easy way to manage your CSS formatting for all pages in one document, if you are interested.

I was just wondering if a table would be better for your purposes, but I need more information on the layout of the page in order to make a recommendation.


----------

