Jan's Working with the Web

Step-by-Step: Side by Side with DIV

---

What you will learn:

to add DIVs for the container and two DIVs to add ID to each DIV to create internal style for each #ID to add HEIGHT to each #ID style to handle overflow when contents won't fit in the space

---

 Start with:   , hector24-Lastname-Firstname.htm

Add DIVs for Container and Two DIVs

Hector's page still has parts with one or two long lines in wide window. Not a good look and hard to read, too! You will now use CSS positioning to put some of these paragraphs side-by-side. They will be easier to read and will reduce the amount of scrolling to read the whole page. All advantages!

My Job and My Education Sections

You will position the My Job and My Education sections side-by-side, with My Job on the right, even though My Job comes first in the source code!

There are some tricky choices to make these sections sit next to each other on the page and yet still behave well when the window is resized.

1. Switch to your text editor, which is showing the source code for hector24-Lastname-Firstname.htm.
   Your window may wrap differently!

2. Save As hector25-Lastname-Firstname.htm to the web project2 folder on your Class disk.

3. Add to the source code an opening DIV before My Job and a matching closing tag after the My Education paragraph.
   This is your container DIV for the parts you will position.
   (Marked in dark red in the illustration.)

4. Add an opening DIV before My Job and a matching closing tag after the My Job paragraphs.
   (Marked in green in the illustration.)

5. Delete the HR tag before the My Education paragraph

6. Add an opening DIV before My Education and a matching closing tag after the My Education paragraph.
   (Marked in dark blue in the illustration.)

7. Save.
   [hector25-Lastname-Firstname.htm]
   

---

Add ID to Each DIV

You will name the DIVs so that you can create styles for them in the internal style sheet.

1. Add to the outside DIV, id="container1".
2. Add to the DIV for My Job, id="job".
3. Add to the DIV for My Education, id="education".
4. Save.
   [hector25-Lastname-Firstname.htm]
   

---

Create Internal Style for each #ID

Next you will add some styles to the internal style sheet for the named DIVs.

The white space in your code is ignored by the brwoser except between numbers and units of measure.

1. Relative Position for container:
   Add to the internal style sheet at the top of the source code:
   
   #container1 {position:relative;
            left:0px; top:0px;
            width:100%;}
   

   This style creates a container for the two DIVs that you will position inside it.

2. Absolute Position for My Job:
   To position My Job as a second column on the page, add a style to the internal style sheet.

   #job { position:absolute;
       left:50%;top:0px;
       width:45%;}

   This style lets My Job take up 45% of the available space but starting at the 50% mark. This will leave 5% of the 'container1' DIV empty to the right of the 'job' DIV.

3. Absolute Position for My Education:
   To position the My Education section at the left, add a style to the internal style sheet:

   #education {position:absolute;
         left:0px;top:0px;
         width:45%;}

   This style puts My Education at the left of the page, taking up 45% of the available width. That leaves 5% to its right before the My Jobs section starts. 45% + 5% + 45% + 5% = 100%

   Arithmetic matters: When choosing percentages or pixels, the total must add up to the space available or less. When the total is larger than the window's width, parts will hang out past the window's edge. A horizontal scroll bar appears, but it is a pain to read a page where you have to scroll sideways. Sometimes you will just have to guess how small the smallest window is likely to be. Be aware!

4.  Save.
   [hector25-Lastname-Firstname.htm]

5. Switch to your browser and edit to show the hector25 page.
   Whoops! The material is positioned as two columns but overlaps the rest of the page. Not at all what we want!

   The problem is that we did not set any HEIGHT properties for the three DIVs.
   

---

Add HEIGHT for DIVs

1. Switch back to your text editor.
   

2. Add HEIGHT properties to the three DIVs - 250px for the outside one and 100% for the two inside.
   

   How the sizes were picked:
   The 250px height for the containing DIV was chosen after some experimentation. It is tall enough to hold all of the text at a smallish window size. Yet with the browser maximized, the blank area did not shout, "Wasted space!"

   The section DIVs were allowed to take up all of the available height inside the containing DIV, 100%. This is better than setting the heights to 250px also. If you need to adjust the height later, you would have to change three places instead of just one. Think ahead. You will make adjustments many, many times in web authoring!

3. 

    Save.
   [hector25-Lastname-Firstname.htm]

4. Switch to your browser and Refresh.
   Much better, at least at the window width shown in the illustration.

5. Resize your window narrower and then wider.
   What happens to your positioned sections?

   If narrow enough, the text starts overlapping the next part of the page again. <sigh>

   At wider sizes a blank area appears below the positioned sections.

   Picking a pixel number for the container1 height turns out to not be a perfect solution after all.

---

Handling Overflow

CSS offers a way to handle the overlapping text issue automatically with the OVERFLOW property.

 OVERFLOW property values:

• VISIBLE (default value) - Allows contents to overlap whatever follows.
• SCROLL - Adds a scroll bar, whether or not one is needed.
• AUTO - Adds a scroll bar IF it is needed.
• HIDDEN - Cuts off whatever won't fit (usually a bad idea).
• INHERIT - Uses the same value for the property as its parent/container element

1. Switch back to your text editor.

2. 

   Edit the two styles for the two inside DIVs (job and education) to add the property overflow:auto; to the style.

3.  Save.
   [hector25-Lastname-Firstname.htm]

4. Switch to your browser and Refresh.

5. Resize the window narrow enough for the scroll bar to show.
   

   The OVERFLOW property is a good way to make sure that the viewer can always read everything, even if they are crazy enough to make the window very, very narrow.

   Down-side: When printing from the browser, only the parts that are actually showing on the screen will print... unless the author took advantage of @media print to include styles that will ensure that all of the text will print. (This is covered in the next lesson.)

   Mysterious unnecessary(?) scroll bar: There is a window width where all of the text shows on the screen in the DIV, but, when you add overflow:auto to the style, a scroll bar appears. Why? There are two possible reasons.

   • Blank lines or margins count. Browsers add a bit of margin below a paragraph by default. Your text might have a blank line at the end. The browser treats the space created as important as text.
   • Include space for scroll bar: With overflow:auto, the browser includes the space for a scroll bar and the space needed for the text in its calcuations. If the space was barely large enough before, it is too small now.
     

Hector's page still needs some work with the Hobbies section to save space. There is an exercise at the end of the project for that. Something to look forward to!