PDA

Click to See Complete Forum and Search --> : column-like layout using divīs

sir_toby
09-30-2004, 07:59 AM
Ok, this one shouldnīt be that difficult...
What I wanna do is a layout with two divs side-by-side, just like table columns. As I try to control everything via CSS Iīd like to avoid setting up a real table structure in my html document. This is my html:



<body id="contentpage">

<div id="content">

<div id="main">
text
</div>

<div id="right">
supplementary information
</div>

</div>

</body>



"main" is the place for most of the content, and it should adapt its width to the width of the browser window, whereas "right" has to stay fixed in width.
Both of them together musnīt take up more than a certain total width - thatīs why I wrapped them into the "content" container.

The following are some of my tries to achieve a correct positioning of the elements:



#content {
max-width: 400px;
}

#main {
max-width: 300px;
}

#right {
float: right;
width: 100px;
}



- "right" div appears horizontally correct, but below "main" div and not to its right as intended
- changing order of "right" and "main" divs in html document does the following: "right" div comes up but "main" content floats around it (I want a behaviour like real columns, however)
- putting the "main" div before the "right" div in the html document and having the "main" div "float: right;" doesnīt do anything - "right" content appears below "main" text
- IE5 and, more shockingly, IE6 ignore max-width altogether - are there other important browser issues I have to take care of in this context?




#content {
max-width: 400px;
}

#main {
max-width: 300px;
position: absolute;
top: 0px;
}

#right {
width: 100px;
position: absolute;
top: 0px;
float: right;
}



- due to the absolute positioning, both divs and their content are laying over each other
- if "right: 0px;" is added to the "right" divīs css, it will appear at the right side of the browser window and not at the right edge of the "content" div
- changing order of "main" and "right" divs (because of the float attribute) in html document doesnīt help

So... how do I have to do it? I guess itīs just some small thing to change in order to get it working - but what exactly? Itīs important to me to have a reliable solution with high browser compatibility, so if this is a problem here Iīll be grateful for different ways to do it...
Thanks for your help!
Toby
Fang
09-30-2004, 09:22 AM
Is this the layout?
max-width does not work in IE. I have add IE6 specific code to do the same.
Considering the max-width:400px why not have a fixed width which would be supported by all (older) browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
* {margin:0;padding:0;}
#content {border:1px solid red;
position:relative;
max-width:400px;
width:expression(document.documentElement.clientWidth > 400? "400px": "auto");
}

#main {border:1px solid blue;
margin-right:100px;
}

#right {border:1px solid green;
position:absolute;
top:0;
right:0;
width: 100px;
}
-->
</style>

</head>
<body>
<div id="content">
<div id="main">
<h2>main</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus luctus quam quis tellus fermentum luctus.</p>
<p>Aliquam mauris nulla, pretium nec, volutpat egestas, gravida sed, turpis. Fusce rhoncus tempor elit. Nam ac mi.</p>
<p>Quisque imperdiet arcu. Sed pellentesque nisl in nunc. Proin sit amet augue nec turpis eleifend ultrices.</p>
<p>Aenean porta sodales mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent porta diam non mi.</p>
</div>
<div id="right">
<h2>right</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</body>
</html>
NogDog
09-30-2004, 09:27 AM
This is the general format that I got to work (using a "repeat-y" background image for a "faux columns" effect):

HTML:

<div class=container>
<div class=right>
...content...
</div>
<div class=main>
...content...
</div>
</div>

CSS:

div.container {
background-color: white;
background-image: url(img/gray.png);
background-repeat: repeat-y;
background-position: right;
width: 800px;
top: 0;
margin: 10px 0 0 0;
margin-left: auto;
margin-right: auto;
}
div.main {
width: 480px;
margin: 0;
padding: 20px;
background-color: transparent;
color: #000033;
float: left;
clear: left;
}
div.right {
font-size: smaller;
width: 200px;
margin: 20px;
margin-right: 10px;
padding: 20px;
background-color: transparent;
color: black;
float: right;
clear: right;
}
sir_toby
09-30-2004, 12:30 PM
Sorry, but your snippet of IE6 specific code wonīt change anything in my case... Sounds logical, though. Do I perhaps have to replace "documentElement" and adapt it to my own situation? This would explain things...
Why is that code IE6 specific? Canīt it be understood by other browsers, and not even by IE5? I donīt see any reason for this.
Thanks anyway,
Toby
Fang
09-30-2004, 01:05 PM
If you want to use max-width, which IE and older browsers don't understand then a bit of IE specific code will help.

You haven't mentioned if any of the solutions offered are to your requirements.
Shmohel
09-30-2004, 03:35 PM
http://glish.com/css/7.asp

here is a great 3 column layout