Menu
Community /Pin to ProfileBookmark
@NogDogSep 30.2004 — #This is the general format that I got to work (using a "repeat-y" background image for a "faux columns" effect):
HTML:
CSS:
column-like layout using div´s
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:
[CODE]
<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:
[CODE]
#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?
[CODE]
#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
Sign in
to post a comment5 Comments(s) ↴
0
@NogDogSep 30.2004 — #This is the general format that I got to work (using a "repeat-y" background image for a "faux columns" effect):HTML:
<i>
</i><div class=container>
<div class=right>
...content...
</div>
<div class=main>
...content...
</div>
</div>
CSS:
<i>
</i>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;
}