HTML :: Anyway to 'split' the body tag?

Question

Been a long time lurker of this site (came in handy on a number of occasions) but today I have the need to post my own question (knew this day would come).

First off I'm just learning HTML and whilst coming up with designs for a coursework project I have ran into a problem.

What I want to do is to have the page 'split' into two sections, by split I mean have a navigation menu and lets say a title in one half and then the main content area in the other half, but this design I have, it has rounded corners on all corners, this means that I am looking for a way to create two 'body' tags of kind or something similar which would allow the following;

_{(source: gyazo.com)}

Is there anyway to get something like the picture above?

Thanks

Jack

Yes, but because the divs are inside the body tag, rounding the div doesn't actually have any effect. Unless I'm doing it wrong. — Snappiestjack, Mar 17 '14 at 23:31
Yes, that's just basic CSS, with styled divs or sections etc. Show us the code you are using and we'll show what's going wrong. — ralph.m, Mar 17 '14 at 23:31
First off, html document can only have a single body tag which contains the whole document. So "head" and "body" in html doesn't stand for visible page header and body. Everything you see on a page, all kinds of logical headers, menus and sections are created with other markup. Div tags for example. — Ivarpoiss, Mar 17 '14 at 23:32
I've figured it out now. http://gyazo.com/15ef90b97d2dafcd420f73136c53898c :). Thanks the explanation from @Ivarpoiss jogged my memory of how it actually worked. — Snappiestjack, Mar 17 '14 at 23:35

score 1 · Accepted Answer · edited May 23 '17 at 11:53

As explained in this answer, you can't have more than one <body> tag.

To create sections inside your body, you can use <div> tags instead (or other new html5 tags like <nav>, <article>, etc.).

For what you want, try something like this:

<body>
    <div id="nav">
        <!-- Navigation -->
    </div>
    <div id="content">
        <!-- Tutorial -->
    </div>
</body>

And then for your CSS:

#nav, #content {
    border: 1px solid black;
    border-radius: 10px;
}

Here's a jsFiddle. Hope it helps.

score 0 · Answer 2 · answered Mar 17 '14 at 23:37

0

An html page can only have a single "body". What you're probably looking for is a "div" element, otherwise known as a "HTML Document Division Element". For more details, check out

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

answered Mar 17 '14 at 23:37

Akeem McLennon

167
4

score 0 · Answer 3 · answered Mar 17 '14 at 23:40

as far as I know, you shouldnt create two body tags. Instead in a body you can add two tags, and and put your contents inside divs. If you want to round the border of divs, you should use some css code.

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    #up
    {
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:90%;
    margin:5px;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:2em;
    }
    #down
    {
    border:2px solid #a1a1a1;
    padding:10px 40px;
    margin:5px;
    background:#dddddd;
    width:90%;
    border-top-left-radius:2em;
    border-top-right-radius:2em;
    }
    </style>
    </head>
    <body>

    <div id='up'>
MAIN PART 1
The border-radius property allows you to add rounded corners to elements.
</div>
    <div id='down'>

MAIN PART 2
The border-radius property allows you to add rounded corners to elements.
</div>

    </body>
    </html>

score 0 · Answer 4 · answered Mar 17 '14 at 23:41

I did this once. It's actually a common practice in ASP.NET because they work in sections (placeholders) and a masterpage

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <style>
      .body1, .body2{
     margin:0 auto;
     height:200px;
       }
      .body1{
      background-color:blue;
      width:1200px;
       }
      .body2{
      background-color:red;
      width:1200px;
       }

     </style>
   </head>

      <section class="body1"> 1 </section>
      <section class="body2"> 2 </section>

   </html>

HTML :: Anyway to 'split' the body tag?

4 Answers4