16 replies [Last post]
larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

I really am going mad. I posted this, but I think it got lost in cyberspace as I can't see it anywhere.....I think my computer is having a nervous breakdown! (at any rate I am)

Anyways, I have read numerous posts and tutorials on this and am even more confused and would really appreciate someone pointing me in the right direction.

I have centered my header with {margin: 0 auto;} but cannot get the left (menu) and right (content) column to do the same. it seems like it should be simple, but I'm just getting more and more confused :?

I have even gone back to basics with no content, but it's just a mess of nothingness. help?

thanks guys

larmyia

update - have managed to get left and right centered, but the footer is now behind the left&right column. here's the code I'm trying:

        /*2 column&header&footer css page*/

body {
    margin: 0;
    padding: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #fff;
    background-color: #fff;
    }   
	  
        /*Columns .top .left and .right*/       
        
html, body {
    text-align: center;
    }               
              
.top {
    margin: 0 auto;
    padding: 10px 0 20px 0;
    background-color: black;
    height: 96px; 
    width: 750px;
    }
	  
.middle {
    margin: 0 auto;
    background-color: transparent;
    width: 750px;
    }	  

.left {
    margin: 0 auto;
    background-color: green;
    width: 50px; 
    float: left;
    }
	  
.right {
    margin: 0 auto;
    background: purple;
    width: 700px; 
    float: left;
    }	 
	  
.footer {
     margin: 0 auto;
     background: red;
     height 50px;
     width 750px;
     }   

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 column, header & footer centered

put the whole kit and kaboodle (sp?) in a wrapper div that has a width of 750px and the margin: 0 auto; that you want. eliminate the other margin: auto;s and clear: both the footer.

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

2 column, header & footer centered

right. I think I've fixed it, but would appreciate any comments on the code before I implement it on the site. the site's here for now:

http://www.tonylacey.com/test/2column.html

and some of the css

.top {
    margin: 0 auto;
	  padding: 10px 0 20px 0;
	  background-color: black;
	  height: 96px; 
	  width: 750px;
	  }
	  
.middle {
    margin: 0 auto;
    background-color: transparent;
	  width: 750px;
	  }	  

.left {
    margin: 0 auto;
	  background-color: green;
	  width: 50px; 
	  float: left;
	  }
	  
.right {
	  margin: 0 auto;
	  background: purple;
	  width: 700px; 
	  float: right;
	  }	 
	  
.footer {
     margin: 0 auto;
     background: red;
     width: 750px;
     float: center;
     }   

note: can't see the footer in ie6!!! why oh why?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 column, header & footer centered

I would get rid of all the auto attributes on the margins (except for the wrap div). Then in the #footer change float: center (no such thing) to clear: both;.

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

2 column, header & footer centered

thanks wolfcry911. much appreciated. I understand what you've said except the clear:both. kinda get the idea from tutorials, but not totally. could you possibly explain it?

also, still can't see footer in ie6. not so sure why....fine in ff.

thanks!

larmyia

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

2 column, header & footer centered

The two columns are both floated - left and right. If you put a div immediately after this, it would float it to the right of the right div.

Giving it a clear:both will clear anything floated right or left, and display it below them.

Verschwindende wrote:
  • CSS doesn't make pies

Helen
Offline
Enthusiast
NYC
Last seen: 15 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

2 column, header & footer centered

Also, a wee word from a Mac user:
consider getting in the habit of using

margin-right: auto;
margin-left: auto;

just for Mac IE users (Mac IE doesn't recognize the margin: 0 auto; shorthand, alas). Unfortunately, tons of Mac users still use IE despite the availability of vastly superior browsers.

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

2 column, header & footer centered

thanks Helen! quick question

Helen wrote:

margin-right: auto;
margin-left: auto;

just for Mac IE users (Mac IE doesn't recognize the margin: 0 auto; shorthand, alas). Unfortunately, tons of Mac users still use IE despite the availability of vastly superior browsers.

should I put

margin-right: auto;
margin-left: auto;

without the "0" before "auto"??? and I'm assuming I'd put these two instead of margin: 0 auto;

I'm surprised to hear that so many Mac users use IE5 and not something better...all you hear are the probs it has.

TPH: I think I get what you're saying. clear: both; makes the code ignore the float left/right. without it the footer will go underneath? but how come it's still not working in IE6?

thanks!

larmyia

Helen
Offline
Enthusiast
NYC
Last seen: 15 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

2 column, header & footer centered

larmyia,

Use:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

instead of:

margin: 0 auto;

or just use the left and right if all you need to do is center and don't need to set the top/bottom margins.

Yeah, it's frustrating that so many Mac users are still on MacIE when there are such great Mac browsers out there. Partially this is a hangover from 4 years ago: when MacIE first came out, it was actually one of the better and most CSS-compliant browsers available in comparison to the others. So it got the street cred of being "better," and lots of folks haven't looked around since it came out.

I teach at a college that is all Mac, and probably about 60% of my colleagues use MacIE. For many folks it seems to have a more professional "feel" than Safari or Netscape, the other best-known options. I really really wish Microsoft would simply delete it from their download site, since they are now no longer officially supporting it anyways. (Microsoft's newly redesigned home page, for instance, looks terrible on MacIE.)

The Firefox appeal ("Think different! Recapture the web! Resist Microsoft!") is huge among Mac users, though, so hopefully it won't be too long. And Safari and Omniweb both have very nice new versions with tabbing, etc. In the meantime, unfortunately, I think it's a good idea to still keep MacIE in mind when designing a broader-based site.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 column, header & footer centered

larmyia,
here's css and html that work (including IE6)

html:

<!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>
    <title>Bankside Traders Association</title>
    <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
    <link rel="stylesheet" type="text/css" media="screen" href="base.css" />
</head>

<body>

<div id="wrap">

  <div id="top">
  top
  </div>
    
  <div id="middle">
    
    <div id="left">
    left
    </div>      
    
    <div id="right">
    right
    </div>

  </div>
    
  <div id="footer">
  footer
  </div>
      
</div>

</body>
</html>

css:

body {
	margin: 0;
	padding: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #fff;
	background-color: #fff;
}
       
html, body {
	text-align: center;
}               

#wrap {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
}

#top {
	padding: 10px 0 20px 0;
	background-color: black;
	height: 96px; 
	width: 750px;
}

#middle {
	background-color: transparent;
	width: 750px;
}	  

#left {
	background-color: green;
	width: 50px; 
	float: left;
}

#right {
	background: purple;
	width: 700px; 
	float: right;
}	 

#footer {
	background: red;
	width: 750px;
	clear: both;
}   

Hope this helps[/code]

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

2 column, header &amp; footer centered

wolfcry911 wrote:

Hope this helps

wolfcry911,

thanks for that. it did help in that it helped me focus my mind. however, when I've applied it to what I'm actually doing there are still so many probs.

I've spend hours going thru my code, but I dont' see what I'm doing wrong. the probs as i see it are as follows:

1. how do I make the left and right column equal so that there is no space between them and the footer?

2. even tho the width is 750px, in the middle band it would only work in ff with left being 50px and right 600px (!!!). in ie6 this is still not working! the right col still seems too big... I don't understand why.

3. the menu in ie6 goes too far to the right. why oh why?

those are the current issues and I'm getting nowhere fast with it. can you offer any insight?

it's all at: http://www.tonylacey.com/test/index.html

thanks so much.

larmyia

ps...I know the colour sheme is fantastic, but I'm thinking I might change it and keep this one for a really special site!

pps...does this css business ever get any easier???

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 37 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

2 column, header &amp; footer centered

Take a look at this 2 Column - Apparent Equal Height demo. It uses two methods of simulating equal height columns. For a better explanation than the simple-minded one I gave, go to [url=http://www.alistapart.com/[/url] ALA[/url] and search for 'faux columns'.

Yes, it does get easier. There will come a time when you will suddenly be blinded by the light, slap yourself up-side the head and say, 'D'oh!' At that point you will look at the next wave of newbies and wonder just why such a simple concept is so difficult for them—conveniently forgetting your own struggles.

Of course, as I recall, I never went through such struggles. I'm merely commenting on what I see of the less gifted… Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

2 column, header &amp; footer centered

well gary, I have looked and looked at ala and your page, and for some reason I'm having a mental block and still can't understand what I have to do. I'm going to spend a little more time with it and see if i can fathom it out. maybe I'm too tired now...*sigh*

I just want to understand what I have to do!

later!

larmyia

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

2 column, header &amp; footer centered

please help!!! I have tried and tried and this is not happening. I've tried starting from scratch using Gary's 2Col eg, and I don't know what I've done wrong. I'm tearing my hair out. I've gone over and over the ALA faux columns, but I just don't get it. well, I get that you put an image and repeat it, but why won't mine work??? I may be wrong, but Gary's seems to be saying repeat the image the same size as the left col (menu in this case), but ala says to make a whole background thing and repeat that. if it's the later, then how do you know how big to make the whole thing? if my page is going to be 750px, with 100px on the left and 650px on the right, fine...but how much do you make either side?

or am I just getting into more of a muddle?

My html:

http://www.subtleasafish.com/test/index2.html

My css:

http://www.subtleasafish.com/test/bta2.css

all I want is a header, two cols of equal length (one with menu, the other with content) and footer.

many thanks!

larmyia

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2 column, header &amp; footer centered

the return to normalcy comment in your css is not properly terminated so you are losing most of your important style definitions.

#wrapper {
    position: relative;
    width: 750px;
    margin: 0 auto; /* proper centering */
    text-align: left; /* return to normalacy /
    border: 1px solid #333;
    background: white url(..img/navcolbg10.jpg)top left repeat-y;
    } 

its missing the *

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2 column, header &amp; footer centered

as a side note...

check out some of firefoxes tools.

  • webdeveloper, in particular the css, view style information. This allows you to hover over parts of your page and see the containment hierarchy and click to see the assigned styles.
  • webdeveloper also includes css, edit style sheet information, which places all the style information (except inline styles) in the sidebar from where you can edit them and see the effects of the changes immediately.
  • dom inspector. in particular the ability to view the computed style for an element. its one of the options for display in the right hand window.

[edit] quick note, i made two short posts and this one went on the second page, the solution to your issue is in the other post at the bottom of the first page. Smile

[/]
larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

2 column, header &amp; footer centered

Chris..S wrote:
its missing the *

Chris, thank you. Ironically I was staring and staring at that exact line!!! you are a life saver of the highest degree. it still looks pants, but at least it is doing what I wanted it to!

many thanks Smile

larmyia