www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Divs and positioning

Hybrid View

  1. #1
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78

    CSS Divs and positioning

    Hi, I'm trying to style three divs so that two lie on top of each other, and the third lies in the normal page flow.

    I have an example below...
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS demo</title>
    </head>
    
    <body>
    <div id="titlebg" class="bg" >
          	  <p>&nbsp;</p>
          	  <p>&nbsp;</p>
          	  <p>&nbsp;</p>
          	  <p>&nbsp;</p>
          	  <p>&nbsp;</p>
          	  <p>&nbsp;</p>
            </div>
            <div id="titletext">
          <h1>Welcome!!</h1>
               Britain novernment too,  neears, Gown's needs a government needs a hirely constister not toe generally elected into the. Britain not just aeected into the offe 26 whave seved Gown'ssin00  but it has incracked its own maate. Toenerally novernment its too own maate hirely constister notoffe 26 whave seved sin00  but it has, not just a neears, incracked government.
            </div>	
            <div id="maintext">
          <h2>Welcome!!</h2>
               Britain novernment too,  neears, Gown's needs a government needs a hirely constister not toe generally elected into the. Britain not just aeected into the offe 26 whave seved Gown'ssin00  but it has incracked its own maate. Toenerally novernment its too own maate hirely constister notoffe 26 whave seved sin00  but it has, not just a neears, incracked government.
            </div>	
    </body>
    </html>
    ...so the main text div would lie at the bottom. I seem to be struggling to stop the maintext counting the upper divs as having no height.

    Any suggestions?

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Is this what you are after?

    I put the titletext div inside the titlebg div and then used css postioning to put titletext on top of titlebg .

    I have put a 1px red border around titlebg and a blue border around titletext so you can see where the boundaries are for testing.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

    <
    html xmlns="http://www.w3.org/1999/xhtml"
    <
    head
    <
    title></title
    <
    style type="text/css">
    <!--

    #titlebg {
    positionrelative;
    border1px solid red}
     
    #titletext {
    positionabsolute;
    top10px;
    left10px;
    border1px solid blue}
    -->
    </
    style>

    </
    head
    <
    body
    <
    div id="titlebg" class="bg" >
             <
    p>&nbsp;</p>
             <
    p>&nbsp;</p>
             <
    p>&nbsp;</p>
             <
    p>&nbsp;</p>
             <
    p>&nbsp;</p>
             <
    p>&nbsp;</p>
              
    <
    div id="titletext">
          <
    h1>Welcome!!</h1>
               
    Britain novernment too,  neearsGown's needs a government needs a hirely constister not toe generally elected into the. Britain not just aeected into the offe 26 whave seved Gown'ssin00 &#8212; but it has incracked its own maate. Toenerally novernment its too own maate hirely constister notoffe 26 whave seved sin00 — but it has, not just a neears, incracked government.
    </div>
    </
    div>
    <
    div id="maintext">
          <
    h2>Welcome!!</h2>
               
    Britain novernment too,  neearsGown's needs a government needs a hirely constister not toe generally elected into the. Britain not just aeected into the offe 26 whave seved Gown'ssin00 &#8212; but it has incracked its own maate. Toenerally novernment its too own maate hirely constister notoffe 26 whave seved sin00 — but it has, not just a neears, incracked government.
    </div>
    </
    body
    </
    html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles