Forum Moderators: not2easy
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.
Anyone? If I am doing something really stupid here please tell me!
Thanks.
Rahul.
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...
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.
