FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS Page Layout. Having trouble with header..

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Possum


I am new to CSS page layout and want to have a page like the one in the pic. I am not using tables but am using CSS to imitate tables. I think this is the best way to construct my page.

I got my code from this page

http://snook.ca/archives/html_and_css/getting_your_di


I am having trouble with the header..

Code example ( I have not started on the footer )
http://privatepaste.com/fb0mGli2EG

I'm just not too sure what to do. If there is a simple way to I would love to know it.

You can do an edit here if you know better code

http://etherpad.com/GzmRKuYUCR

thx
sonam
I don't know is this what I think are simplest way but this is my way. First of all you need to deffine positions or floats of your divs. In other hand browser cannot know how to place it. The second when you deffine margins for centring your divs then is better to use margin-left and margin-right instead of margin because margin definition is for all four margins. With margin:auto; for all divs browser try to push all divs on same place.

One way:
Code:
#header {  position: relative; width: 80%;   margin-left: auto;  margin-right: auto; padding:0;}


Another way will define top and bottom margin on 0 and left and right auto (better solution for me):
Code:
#header {  position: relative; width: 80%;   margin: 0 auto; padding:0;}


The second div container need the same correction and footer, too, and then put all three separately.
Code:
<div id="header">something</div>
<div id="container">  something other</div>
<div id="footer">something more</div>


Hope this will help.
Sonam
rockacola
quick and dirty..
This is what I always do:

Code:

<div class="wrapper">
  <div class="header"></div>
 
  <div class="content">
    <div class="left"></div>
    <div class="right"></div>
  </div>

  <div class="footer"></div>

</div>



edit: oh and in your pastebin, you missed float, which is the essence. Wink
Related topics

having trouble scoring on frihost?
Main page layout problems / Grammar problems in directory
general css page for a site
Table spaces
50 frih$ to create a custom css layout--CLOSED--
Okay, I'm done trying to use CSS for layout.
What's the best for page layout? CSS or using Tables?
CSS DIV layout advice
CSS div alignment issue, IE and FF (newbie problem)
Creating a layout complete with css
Having Trouble With Drop Down Menus
PHP imagecreate + CSS problem.
PHP imagecreate + CSS problem.
HTML Help
page issues
PHP Test File
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.