Wed, 2003-04-23 05:07
Hello,
I've found many tutorials on how to create 2 or three columns side by side but it is never made the way I would like it. I now have two column design and it is so that the left column is fixed and the right one also but it is aset as "position: absolute" so as I figured it out this is like a layer and it floats over the table I have made. I do not know how to make this right column the same way the left one is made so it would lie in the table and would also resize it if it came to the bottom of it.
My left column definiton:
#links {
padding:15px;
border:1px solid black;
width:200px;
}
My right column definition:
#content {
position:absolute;
background:#FFF;
margin-right:20px;
margin-left:225px;
margin-bottom:20px;
border:1px solid black;
}
If I remove the "position: absolute;" the right column stay where it is but the left one will move to the end of the right one. So this means they can not be side by side. Is this possible? What do I need to do?
Thanks for your reply in advance. To check out this live: http://todaythemes.pocketpcstuff.com
What I would like to do longterm is to remove the table I have for the layout (for those images to create the look) and make this all in CSS file. In case you have an idea it would be welcome. I am new to CSS and as I see it is much more complicated than tables 
Best regards,
Peter
Wed, 2003-04-23 05:52
#1
Two columns side by side
Hi, Peter,
You might be interested in the following page at bluerobot.com, which specifically addresses the issue of two-column and three-column page layouts using CSS. It includes fixed-width sidebars, which I gather is your aim here...
http://www.bluerobot.com/web/layouts/
CSS layout does seem more complicated, and less intuitive than table-based layout, but the good points do end up outweighing the bad!
You'll have to post your site in the Site Checks section so we can all take a look 
Wed, 2003-04-23 07:02
#2
Two columns side by side
Thanks,
I just created the layout. The left menu is also positioned as absolute but it will work this way for me. I modified the CSS file a little and here is the result:
http://www.pocketpcstuff.com/CSS_testing/layout1.html
I will insert all needed images and I think this is it.
I will post my site under Site Checks when I integrate this so it really is CSS based and hope it will look the same on other new browsers as it does on mine
Best regards,
Peter
Wed, 2003-04-23 09:47
#3
Two columns side by side
What I noticed and experienced in this short time there must always be one DIV positioned as absolute when you want to have them (2 columns) side by side. And this "absolute" one does not expand borders of a table or DIV in which it lies - it kind of floats like the layer.
All sites including the one on Bluerobot use this principle. Is there any other way? - this kind of seems wrong to me when I use it with relation to my layout.
Because in my case I have a DIV which lies beneath the whole body and one column expands this DIV the other one does not and simply goes over the border of the mainbody DIV. It is actually not a problem in my case because of the design but it feels wrong and I guess there must be a solution to this.
So if you check the site I previously posted (with the CSS testing) you can see that my main body is a separate DIV and contains currently only text.
In this DIV I created two columns each with its own DIV and one is on the left with links and menu and the blogbody is to the righ. Either I use absolute positioning for blogbody or for menu, every time the absolute positioned window does not expand the body DIV currently filled with text. So because my links column is shorter I use absolute positoning for it but I would like to make it so that each column would actually lie within the main DIV and not float over the border when it reaches it.
If however I do not use absolute positioning for one of the columns the second one appears below the first and they are not side by side anymore. This is what I'd like to achieve but so far I've only seen sites with absolute positioning. But perhaps I am wrong and this is actually not the right way of thinking. Can I have the absolute positioning and still have this DIV to lie within another DIV border and expand it if needed?
Regards,
Peter
Wed, 2003-04-23 10:27
#4
Two columns side by side
Absolutely positioned DIVs have no impact on the size of any other DIVS in the normal flow of the page, so putting an absolute DIV inside the body DIV will not change the size of the body DIV.
If you use floats you can force the body DIV to expand to accomodate everything, as follows.
.body { border : 1pt solid black; }
.left { float : left; width : 48%; }
.right { float : right; width : 48%; }
.spacer { clear : both; }
<div class=body>
<div class=left>LEFT CONTENT</div>
<div class=right>RIGHT CONTENT</div>
<div class=spacer></div> <!-- note no content -->
</div>
Wed, 2003-04-23 11:34
#5
floats
Good example DJomp,
Floating is the way to go where possible.
Just remember to keep the combined widths of the floated divs to less then 100%, as DJomp has done in his example.
Otherwise the last floated element will drop below the first. 
Wed, 2003-05-28 14:25
#6
What's the voice-family hack do?
Looking at the CSS in the example I noticed the following lines:
/* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family:inherit;
What does this do?
Wed, 2003-05-28 20:25
#7
hack
That is a hack to hide the css up to the next closing } from older browsers such as Netscape 4.x, Mac IE 4.5 and lower, Win IE 5.5 and lower.
Only use hacks when every other option has been exhausted.
It's better to design the page with flexibility to look good in many browsers, be readable in all browsers and without the need to be pixel perfect in all browsers.