homepage Welcome to WebmasterWorld Guest from 54.234.126.92
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
Three column layout with header & footer using absolute positioning
docrahul




msg:1224134		 1:31 pm on Jan 8, 2005 (gmt 0)

Hi

I was trying to make a three column layout using absolute positioning, so that I could keep the content at the very beginning of the code and put all my other stuff (nav bar, ads, etc.) at the bottom of the code.

My code is given below:


<html>
<head>
<style type="text/css">
#content {
position:absolute;
top:120px;
left:150px;
border:1px solid black;
padding:5px;
margin:2px 120px 2px 2px;
}
#leftcol {
position:absolute;
top:120px;
left:0px;
padding:5px;
border:1px solid black;
}
#topbox {
position:absolute;
top:0px;
left:0px;
border:1px solid black;
width:100%;
}
#rightcol {
position:absolute;
top:120px;
right:0px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="content">
<h1>Heading</h1>
Content here xx #*$! #*$!x xxxxxxxxxx xxxx xxxxx xxxxx xxxxxxxxx xxxxx xxxx xxx

xxxxxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxx
</div>
<div id="leftcol">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</div>
<div id="rightcol">
<div align="center" style="font-size:8pt;color:#ccc;">
Advertisement <br /><br />
<img src="blank.gif" width=120 height=600>
</div>
</div>
<div id="topbox">
<div align="center" style="font-size:8pt;color:#ccc;">
Advertisement<br />
<img src="blank.gif" width=760 height=90>
</div>
</div>
</body>
</html>

Works great in FF for Win but in Win/IE6 the right sidebar and the content overlap. How can I get rid of this while keeping the center content div fluid?

Thanks a lot,

Rahul.

 

docrahul




msg:1224135		 2:30 pm on Jan 11, 2005 (gmt 0)

Hi

Anyone? If I am doing something really stupid here please tell me!

Thanks.

Rahul.

cornelius




msg:1224136		 12:52 pm on Jan 12, 2005 (gmt 0)

Hi doc

I don't know what you mean with a fluid content section, but from what i can see, is that you can add

right:100px;

to the content section in your css. this will move the content section away from the right box, but it will be fixed at that position.

Another thing about absolute positioning that took me a while to figure out, is that if you have something that needs to be abs positioned inside a box, you should make the Containing Box

-> position:relative <-

The reason for this: You can control the abs positioned element from within the box. Otherwise you'll have to control it from the browser window coordinates, which can be quite painfull... Trust me, I have had much trouble with this...

docrahul




msg:1224137		 1:39 pm on Jan 12, 2005 (gmt 0)

Hi,

Thanks for the reply.

By fluid I meant that the content div should resize when the browser window is resized. I'll give your suggestion a shot a see what happens. Thanks again.

Rahul.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved