Web Analytics Made Easy -
StatCounter Trouble with multiple divs - CodingForum

Announcement

Collapse
No announcement yet.

Trouble with multiple divs

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trouble with multiple divs

    I'm having a very tough time trying to design what looks like a simple page of divs. Here's an image of what i want:



    I manage to get the top div ok in the top left hand corner spanning 80% width of the browser. I then manage sometimes to get the side div on the right top corner and overlaying any divs that it might over lap.

    But what I have trouble often with is the content div. It either sits behind the top div in the top left hand corner, or it sits correctly underneath it but doesn't fill the screen height fully.

    Basically what I have done is created a container div that is 100% height of the browser. Then I set the top div to be 20% height and content div to be 80% height. I set the side div to be 100% height.

    But no matter what I do I can't seem to get everything perfectly 100% height. usually the content div height doesn't change whenever I change the height value.

    What is the coding i need to achieve what i have in that picture? Every time I change a bit of code it breaks something.


  • #2
    Do you have a copy of your current code?

    Comment


    • #3
      You need 3 divs.

      The first one would be the right sidebar. Set it's width to 20%, height 100% in your css and make sure you float: right it.

      The second div will be logo div and the 3rd div will be the content div. The logo and content divs should appear to the left of the sidebar.

      Comment


      • #4
        This is my coding.

        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>Untitled Document</title>
        <style ="text/css";>
        .body {
        	height:100%;
        }
        #menu {
        	float:right;
        	width:20%;
        	height:100%;
        	background-color:#CCC;
        }
        #logo {
        	width:80%;
        	height:50%;
        	background-color:#CF9;
        }
        #contents {
        	width:80%;
        	height:50%;
        	background-color:#3CC;
        }
        </style>
        </head>
        
        <body>
        
          
          <div id="menu">
            <p>Some menu items</p>
            <p>will go here</p>
            <p>down in a line</p>
            <p>and this side should</p>
            <p>go down 100% of the height</p>
            <p>&nbsp;</p>
        </div>
          
          
          <div id="logo">The logo will go here. Approx 500 x 250</div>
            
          
          <div id="contents">Content for  id "contents" Goes Here</div>
        
        
        
        </body>
        </html>
        I think i've got them in the right places, but what i'm looking for is the menu div to be 100% of the height, logo to be 20% and content to be 80% (or at least just fill in the rest left over from the logo).

        Comment


        • #5
          I have run this in IE9 and FF5 and it looks ok.

          Code:
              <head>
                  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
                  <title></title>
                  <style type="text/css">
                      html,body,#wrapper {
                          height: 100%;
                          margin: 0px 0px 0px 0px;
                          padding: 0px 0px 0px 0px;
                      }
                      #sidebar {
                          height: 100%;
                          width: 20%;
                          float: right;
                          background-color: blue;
                      }
                      #logo {
                          height: 20%;
                          background-color: red;
                      }
                      #content {
                          height: 80%;
                          background-color: green;
                      }
                  </style>
              </head>
              <body>
                  <div id="wrapper">
                      <div id="sidebar">SIDEBAR</div>
                      <div id="logo">LOGO</div>
                      <div id="content">CONTENT</div>
                  </div>
              </body>

          Comment

          Working...
          X