[thelist] CSS Two Column Layout with Content above the header [fixed]

Dan Eastwell danieleastwell at onetel.com
Wed Mar 9 10:08:43 CST 2005


I've fixed the issue:

I've fixed the problem, just in case anyone was looking into it.

The layout is fine, for those who want to use it in the future, this 
time with Three columns, middle column content first in the source code 
(it's been done before, I'm sure, and better, with liquid columns, no 
non-semantic divs,  etc.) but, FWIW:

<div id="wrapper">
   <div id="mainBody">
       <div id="mainAndLeftCols">
                       <div id="centerCol">
               Centre Content
             </div>
                   <div id="leftCol">
           Left Content                 </div>
             </div> <!-- end of mainAndLeftCols -->
                 <div id="rightCol">
            Right Content
            </div>
      </div><!-- End of mainBody -->
       <div id="topContent">
  Top Content
   </div>  
    <div class="clear footer">
   Footer Content
   </div>

</div><!-- end of wrapper -->

With:

div#wrapper {
   width: 750px;
   margin: auto;
   padding: 0;
   text-align: left;
  }

div#mainBody{
   margin : 173px 0px 0px 0px;
   padding : 0px;
  }

div#mainAndLeftCols{
   float : left;
   width : 630px;
   padding : 0px;
   margin : 0px;
  }

div#leftCol {
   float: left;
   width: 270px; }

div#centerCol {
   float : right;
   width: 360px;
}

div#rightCol {
   float : left;
   width: 120px; }

.clear {
   clear: both;
}

div#topContent {
   width: 750px;
   height: 173px;
   background-image: url(../images/logoBkg.gif);
   background-repeat: no-repeat;
   background-color: #003360;
   position : absolute;
   top : 0px;
}

Just, if you're going to do it, don't add an element in the main column 
with a left margin of 260px, it'll completely break in IE!


Dan Eastwell wrote:

> Thanks BJ, but it's not the flash - I've looked at the site without 
> the flash and replacing it with a blank gif - I get the same result..
>
> Thanks all the same.
>
> BJ wrote:
>
> I don't have time to look in depth right now, but I did run your site 
> through both validators.  It's VERY possible IE might be choking on 
> how the flash ani is coded in.
>
> Dan Eastwell wrote:
>
>> I've put a test version at 
>> http://test.danieleastwell.co.uk/playaway-weekends.htm , you can see 
>> there's two columns, right and left floated in another div, which is 
>> left floated against the right floated right hand column. All of this 
>> is wrapped in a div and a top margin allows for the header to be 
>> absolutely positioned above it. Perfect!
>>
>> ...Or so you might think, until you look in IE6. Fine in Firefox 1.1.
>>
>>
>> BJ wrote:
>>
>>> It should be fairly easy if you absolutely position the #header 
>>> container, then you can put a two column container under it with two 
>>> columns within. 
>>
>>
>>
>>
>> On Fri, 04 Mar 2005 16:29:17 +0000, Dan Eastwell
>> <danieleastwell at onetel.com> wrote:
>>
>>>> Hi Everyone,
>>>>
>>>> I don't know whether I'm asking the impossible, but is there an 
>>>> elegant
>>>> solution for making a two column layout with a header, but having the
>>>> main content (right hand column) above the header content in the 
>>>> XHTML?
>>>
>>>
>>>  
>>>
>>
>
>


-- 
Daniel Eastwell

http://www.thoughtballoon.co.uk



-- 
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.6.2 - Release Date: 04/03/2005



More information about the thelist mailing list