SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting the vertical height of a box

    I am trying to set up a site using web standards having spent years using table based design.
    How can I set the bodymenu on this page so that the vertical height matches the height of the mainbody to its left. Also, is it possible to set the width of the bodymenu box so that it fills to the right without having to specify a numerical value.

    Thanks in advance

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm getting a page not found error
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops - fixed the link now
    page here

    While I'm on can I add another question. How can I set the container to float in the centre of the window?

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by robives View Post
    While I'm on can I add another question. How can I set the container to float in the centre of the window?
    You can center you layout by using this:
    Code CSS:
    #container {
    	width: 750px;
            margin: 0 auto;
    	height: auto;
    	text-align: left;
    }

    Then what your looking for on the right is called Faux Column, take a look at the article

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    If I understand what you need correctly, you're just wanting the gray background of the bodymenu to expand down to match the height of the of the content on the left? A background image is the easiest method there. What you want is called "Faux Columns". If you google search for that term, you'll see how it's done. I don't have time to create the image and stuff right now but if you still have trouble I can help later.

    If you want to whole site to be centered, you can check out this link by Paul:
    http://www.sitepoint.com/forums/show...67&postcount=4

    EDIT: To late. Asiewe61 beat me to it.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help - have the page centred but can't get the faux columns to work. I have added a background image but the right hand column is still not going down the page.

  7. #7
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need something to push the "faux column" down. You need to create another div for the boxes:
    Code CSS:
    #mainbody {
            position: relative;
            width: auto;
            height: auto;
    	background-image: url(../images/horizontalgradient.jpg) repeat-y top right;
    }
     
    #boxes {
    	background-image: url(../images/backgroundgradient.jpg);
    	background-repeat: repeat-x;
    	float: left;
    }
    #bodymenu {
    	background-color: #eee;
    	float: right;
    	width: 153px;
    }

    No surround your box div:
    Code HTML4Strict:
    <div id="mainbody">
      <div id="boxes">
      <div class="pageblock">
      	<p>box</p>
      </div> <!-- end of page block -->
      <div class="pageblock">
      	<p>Box 2</p>
      </div> <!-- end of page block -->
     
      <br clear="left">
      <div class="pageblock">
      	<p>box 3</p>
      </div> <!-- end of page block -->
      <div class="pageblock">
      <p>box 4</p>
      </div> <!-- end of page block -->
     
      <br clear="left">
    </div> <!-- End of boxes -->
     
    <div id="bodymenu">
    	bodymenu
    </div> <!-- End of body menu -->
    </div> <!-- End of mainbody -->
    I believe this is correct without checking it, but its a good start for ya

  8. #8
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    clear your float, also float the bodymenu to the right.

    Code:
    #footer {
    clear:both;
    }
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site


Bookmarks

Posting Permissions

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