ansaurus

Question

CSS Gurus, Beginner needs a bit help: Can't center middle column on 3-col layout

Answer 1

A:

if you can leave ie6 support out, which you should.. then this will work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title></title>

<style>
/* CSS Document */

* { margin:0; padding:0; }


html {
 height:100%;
 width:100%;
}

.wrapper {
 min-height:100%;
 height:auto !important;
 margin:0 auto -26px;
 background:#e9e9e9; 
}

body{
 font: normal 12px/16px Arial, Verdana, Helvetica, sans-serif;
 height: 100%;
 min-width:1024px;
 width:100%;
 border: 0px;
 background-color:#CFCFCF;
}


#headerMain{
 width:100%;
 background:url(img/header_bg.png) 0 0 repeat-x;
 color:#D2C7A3;
}

#header{
 width:100%;
 background:url(img/header_bg_top.png) 0 0 repeat-x;
 margin:0;
 height:153px;
}


.headerLogoLeft {
  height:84px;
  width:34%;
  float:left;
  text-align:left;
}

.headerLogoLeft img  {
  height:72px;
  width:72px;
  display:inline;
  padding-top:5px;
}


.headerLogoCenter {
  height:84px;
  width:66%;
  float:left;
  text-align:left;
}

.headerLogoCenter img  {
  height:84px;
  width:550px;
  display:inline;
}



#nav {
 width:100%;
 height:33px;
 color: #9E9E9E;
 line-height:33px;
 font-size:13px;
 position:relative;
}


#navleft {
 height:33px;
 float:left;
 width:200px;
 text-align:left;
 position:absolute;
 left:0; top:0;
 z-index:20;
 background:lightgreen;
}


#navcenter {
 height:33px;
 line-height:33px;
 text-align:center;
 position:absolute;
 left:0;right:0;top:0;
 padding-left:200px;
 padding-right:200px;
 z-index:10;
 background:yellow;
}

#navright {
 height:33px;
 width:200px;
 text-align:right;
 position:absolute;
 right:0;top:0;
 z-index:20;
 background:lightblue;
}
</style>

</head>

<body>


<div class="wrapper">
    <div id="headerMain">
        <div id="header">

            <div class="headerLogoLeft"></div>
            <div class="headerLogoCenter"></div>


            <div id="nav">
                <div id="navleft">navleft</div>
                <div id="navcenter">center</div>
                <div id="navright">navright</div>
            </div>


        </div> 
    </div>
</div> 





</body>
</html>

Moin Zaman 2010-08-27 16:08:39

It indeed did work :) Moin, thanks so much.

MariaKeys 2010-08-27 16:38:46

I had one <div class="spacer"></div> right after <div class="headerLogoCenter"></div>. Is this what is pushing the nav bar to where it is (which is fine, right after logos)? Removing spacer moves it to the top of the page. Can I also use absolute for haderLogoLeft and HeaderLogoCenter above?

MariaKeys 2010-08-27 16:42:52

yes you can use absolute positioning for the header divs also.in your code I think the problem was the last right div floated right. floating something to the right is ok, but that div should be first in the html source followed by the other float left and non floated elements

Moin Zaman 2010-08-27 16:55:55

Very right! Putting right float first and adding width:100%;margin-left:-200px; margin-right:-200px; to center column fixed the problem. I will read up on absolute positioning. I really appreciate this help. I cant upvote yet, but when i collect enough reputation, i will come and upvote it. You have a great day!

MariaKeys 2010-08-27 17:19:27

no worries maria. read up on positioning here: http://www.barelyfitz.com/screencast/html-training/css/positioning/also you can still accept my answer without voting up can't you?

Moin Zaman 2010-08-28 05:32:24

ansaurus

tags:

views:

answers:

CSS Gurus, Beginner needs a bit help: Can't center middle column on 3-col layout

related questions