SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Sep 26, 2007, 10:10 #1
- 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
-
Sep 26, 2007, 10:23 #2
- Join Date
- Mar 2004
- Posts
- 2,159
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm getting a page not found error
-
Sep 26, 2007, 10:36 #3
- 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?
-
Sep 26, 2007, 10:54 #4
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 26, 2007, 10:57 #5
- 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.
-
Sep 26, 2007, 13:04 #6
- 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.
-
Sep 26, 2007, 13:33 #7
- 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 -->
-
Sep 26, 2007, 16:49 #8
- 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