mostart
asked on
two column tablelike layout with DIV/CSS
Hi Experts,
I' like to know if there is a nice way to get a two column layout with divs.
What I want is easy to do with a table (see code) but I like to know if its possible with DIVs too.
The main question is, how to let both columns always have the same height, although content might be of different length.
Of course I could maintain the height by adjusting it using some javascript. But I hope this can be done better.
Any hint is welcome.
I' like to know if there is a nice way to get a two column layout with divs.
What I want is easy to do with a table (see code) but I like to know if its possible with DIVs too.
The main question is, how to let both columns always have the same height, although content might be of different length.
Of course I could maintain the height by adjusting it using some javascript. But I hope this can be done better.
Any hint is welcome.
<table>
<tr>
<td>some content</td>
<td>some more content but both cells will have the same height</td>
</tr>
</table>
## now with divs ??? Is this right ? and how should the CSS code look like ?
<div id="mamma">
<div id="left">some content</div>
<div id="right">some more content</div>
</div>
ASKER
hmm.. thats close to what I have and it seems exactly what I'm looking for but it doesn't work for me in my example. (See my code). I have some differences in width parameters though.
For me the right column is displayed under the left one ?
Any idea what my problem is.
For me the right column is displayed under the left one ?
Any idea what my problem is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="index-Dateien/main.css">
<title>Untitled Document</title>
<style type="text/css" title="Site default" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
}
hr.devider {
width:100%;
height:1px;
line-height:1px;
min-height:1px;
max-height:1px;
border:0px;
margin:0px;
padding:0px;
background-color:#e0e0e0;
}
hr.tenpix {
height:10px;
min-height:10px;
max-height:10px;
line-height:10px;
border:0px;
margin:0px;
padding:0px;
/* background-color:aqua; */
}
hr.onepix {
height:1px;
min-height:1px;
max-height:1px;
line-height:1px;
border:0px;
margin:0px;
padding:0px;
/* background-color:yellow; */
}
#mamma {
position:absolute;
left:0px;
top:0px;
width: 950px;
height: 100%;
margin:0px;
padding:0px;
}
#top {
position:absolute;
left:0px;
top:0px;
width:950px;
height:100px;
}
#left {
position:absolute;
left:10px;
top:100px;
width:160px;
height:auto;
background-color:#0099FF;
}
#right {
position:absolute;
left:180px;
top:100px;
width:770px;
height:auto;
background-color:#FFCC33;
}
div.navItem {
height:29px;
}
#teaser {
height:180px;
width:770px;
}
#content {
position:relative;
margin:0px;
padding:0px;
width:100%;
}
#contentleft {
position:relative;
width:520px;
float:left;
margin:0px;
padding:0px;
background-color:#f7f7f7;
}
#contentright {
position:relative;
width:250px;
margin-left:520px;
margin:0px;
padding:0px;
background-color:#e0e0e0;
}
.clear {
clear: both; /* extend height of .main to longest column */
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
</style>
</head>
<body>
<!-- top row with logo -->
<div id="top">
<img src="index-Dateien/logo.gif" alt="logo" id="logo" align="right"></div>
<!-- left col with navi -->
<div id="left">
<!-- hr line -->
<hr class="devider">
<hr class="tenpix">
<div class="navItem"><img src="index-Dateien/top_navi_1_unternehmen.gif" alt="UNTERNEHMEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_2_leistungen.gif" alt="LEISTUNGEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_3_onlineservice.gif" alt="ONLINE_SERVICE" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_4_kontakt.gif" alt="KONTAKT" width="160" height="29"></div>
</div>
<!-- right col with teaser and content columnds -->
<div id="right">
<hr class="devider">
<hr class="tenpix">
<!-- teaser picture -->
<div id="teaser"><img src="index-Dateien/teaser1.jpg" alt="" width="770" height="180"></div>
<!-- content main -->
<div id="content">
<div id="contentleft">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. </div>
<div id="contentright">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat </div>
<div class="clear"></div>
</div>
</div>
</body></html>
You have quite a few different things going on. I need to ask for clarification if I may.
- Which DIV appears below which DIV? #contentright under #contentleft?
- Do you want your page centered or off to the left as it is here?
- You may want to "wrap" everything in one DIV and place relatively according to that.
ASKER
ok to your question:
1.) #contentright (or at least its text content) is displayed below #contentleft. The grey backround-color does show #contentright on top of #contentleft though ?
2.) The page should not be centered and therefore..
3.) I thought I would not need a wrapper div around everything.. ?
1.) #contentright (or at least its text content) is displayed below #contentleft. The grey backround-color does show #contentright on top of #contentleft though ?
2.) The page should not be centered and therefore..
3.) I thought I would not need a wrapper div around everything.. ?
When I looked at it, #contentright wasn't on top of #contentleft. They were side by side, albeit not lined up though.
Would something like this work for you?
Would something like this work for you?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="index-Dateien/main.css">
<title>Untitled Document</title>
<style type="text/css" title="Site default" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
}
hr.devider {
width:100%;
height:1px;
line-height:1px;
min-height:1px;
max-height:1px;
border:0px;
margin:0px;
padding:0px;
background-color:#e0e0e0;
}
hr.tenpix {
height:10px;
min-height:10px;
max-height:10px;
line-height:10px;
border:0px;
margin:0px;
padding:0px;
/* background-color:aqua; */
}
hr.onepix {
height:1px;
min-height:1px;
max-height:1px;
line-height:1px;
border:0px;
margin:0px;
padding:0px;
/* background-color:yellow; */
}
#mamma {
position:absolute;
left:0px;
top:0px;
width: 950px;
height: 100%;
margin:0px;
padding:0px;
}
#top {
position:relative;
left:0px;
top:0px;
width:950px;
height:100px;
}
#left {
position:absolute;
width:160px;
height:auto;
background-color:#0099FF;
float: left;
}
#right {
position:relative;
width:770px;
height:auto;
background-color:#FFCC33;
float: right;
}
div.navItem {
height:29px;
}
#teaser {
height:180px;
width:770px;
}
#content {
position:relative;
margin:0px;
padding:0px;
width:100%;
}
#contentleft {
position:relative;
width:520px;
float:left;
margin:0px;
padding:0px;
background-color:#f7f7f7;
}
#contentright {
position:relative;
width:250px;
margin-left:520px;
margin:0px;
padding:0px;
background-color:#e0e0e0;
}
#wrapper {
float: left;
position: fixed;
left: 0px;
top: 0px;
}
.clear {
clear: both; /* extend height of .main to longest column */
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
</style>
</head>
<body>
<div id="wrapper">
<!-- top row with logo -->
<div id="top">
<img src="index-Dateien/logo.gif" alt="logo" id="logo" align="right"></div>
<!-- left col with navi -->
<div id="left">
<!-- hr line -->
<hr class="devider">
<hr class="tenpix">
<div class="navItem"><img src="index-Dateien/top_navi_1_unternehmen.gif" alt="UNTERNEHMEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_2_leistungen.gif" alt="LEISTUNGEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_3_onlineservice.gif" alt="ONLINE_SERVICE" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_4_kontakt.gif" alt="KONTAKT" width="160" height="29"></div>
</div>
<!-- right col with teaser and content columnds -->
<div id="right">
<hr class="devider">
<hr class="tenpix">
<!-- teaser picture -->
<div id="teaser"><img src="index-Dateien/teaser1.jpg" alt="" width="770" height="180"></div>
<!-- content main -->
<div id="content">
<div id="contentleft">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. </div>
<div id="contentright">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat </div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
ASKER
this doesn't really change anything ? I'm using FF 3.0.6 Win XP by the way.
In IE7 #contentright displays correctly on the right but is not the same height as #contentleft.
In IE7 #contentright displays correctly on the right but is not the same height as #contentleft.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="index-Dateien/main.css">
<title>Untitled Document</title>
<style type="text/css" title="Site default" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
}
hr.devider {
width:100%;
height:1px;
line-height:1px;
min-height:1px;
max-height:1px;
border:0px;
margin:0px;
padding:0px;
background-color:#e0e0e0;
}
hr.tenpix {
height:10px;
min-height:10px;
max-height:10px;
line-height:10px;
border:0px;
margin:0px;
padding:0px;
/* background-color:aqua; */
}
hr.onepix {
height:1px;
min-height:1px;
max-height:1px;
line-height:1px;
border:0px;
margin:0px;
padding:0px;
/* background-color:yellow; */
}
#mamma {
position:absolute;
left:0px;
top:0px;
width: 950px;
height: 100%;
margin:0px;
padding:0px;
}
#top {
position:relative;
left:0px;
top:0px;
width:950px;
height:100px;
}
#left {
position:absolute;
width:160px;
height:auto;
background-color:#0099FF;
float: left;
clear: both;
}
#right {
position:relative;
width:770px;
height:100%;
background-color:#FFCC33;
float: right;
clear: left;
}
div.navItem {
height:29px;
}
#teaser {
height:180px;
width:770px;
}
#content {
position:relative;
margin:0px;
padding:0px;
width:100%;
height: 100%;
}
#contentleft {
position:relative;
width:520px;
float:left;
background-color:#f7f7f7;
height: 100%;
}
#contentright {
position:relative;
width:250px;
background-color:#e0e0e0;
float: right;
height: 100%;
}
#wrapper {
float: left;
position: fixed;
left: 0px;
top: 0px;
height: 100%;
}
.clear {
clear: both; /* extend height of .main to longest column */
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
</style>
</head>
<body>
<div id="wrapper">
<!-- top row with logo -->
<div id="top">
<img src="index-Dateien/logo.gif" alt="logo" id="logo" align="right"></div>
<!-- left col with navi -->
<div id="left">
<!-- hr line -->
<hr class="devider">
<hr class="tenpix">
<div class="navItem"><img src="index-Dateien/top_navi_1_unternehmen.gif" alt="UNTERNEHMEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_2_leistungen.gif" alt="LEISTUNGEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_3_onlineservice.gif" alt="ONLINE_SERVICE" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_4_kontakt.gif" alt="KONTAKT" width="160" height="29"></div>
</div>
<!-- right col with teaser and content columnds -->
<div id="right">
<hr class="devider">
<hr class="tenpix">
<!-- teaser picture -->
<div id="teaser"><img src="index-Dateien/teaser1.jpg" alt="" width="770" height="180"></div>
<!-- content main -->
<div id="content">
<div id="contentleft">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. </div>
<div id="contentright">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat </div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
ASKER
looks a lot better but now due to height:100% in #wrapper the two columns always expand to the bottom of them page. How could this be expanded to the longer of the two columns instead ?
Since their both contained inside of the #content DIV, it shouldn't be a problem. I won't be able to work on this for the next couple of hours, but i will follow up as soon as I get home this evening.
Here is a link for a similar question on EE, let me know if this helps:
http://www.experts-exchang
Here is a link for a similar question on EE, let me know if this helps:
http://www.experts-exchang
ASKER
thanks a lot for the link looks really promising. I'll try it and keep you up to date. Will probably be back on EE myself in about 12 hours since its 22:15 localtime over here now.
thank you
thank you
ASKER
ok back to the subject..
I found some hints being usefull in the other EE link you postet. Actually I'm now pretty close to the solution it seems..
Both columns are displayed side by side as expected now. the only problem left is the wrapping DIV #content.
If you check the code further down you'll see I gave it a bg color "blue" when I display it and check also with firebug (very helpfull Firefox debuggin extension.), I can see #content extends only to the length of the shorter column and not to the longer column as it should do. So the question is how the length of #content can be set correctly. So far the values "auto" and "100%" will not help. Also setting a big pixel value will lead to having both columns expanded to that given size but not to the expected size.
Any further idea ?
I found some hints being usefull in the other EE link you postet. Actually I'm now pretty close to the solution it seems..
Both columns are displayed side by side as expected now. the only problem left is the wrapping DIV #content.
If you check the code further down you'll see I gave it a bg color "blue" when I display it and check also with firebug (very helpfull Firefox debuggin extension.), I can see #content extends only to the length of the shorter column and not to the longer column as it should do. So the question is how the length of #content can be set correctly. So far the values "auto" and "100%" will not help. Also setting a big pixel value will lead to having both columns expanded to that given size but not to the expected size.
Any further idea ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="index-Dateien/main.css">
<title>Untitled Document</title>
<style type="text/css" title="Site default" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
}
hr.devider {
width:100%;
height:1px;
line-height:1px;
min-height:1px;
max-height:1px;
border:0px;
margin:0px;
padding:0px;
background-color:#e0e0e0;
}
hr.tenpix {
height:10px;
min-height:10px;
max-height:10px;
line-height:10px;
border:0px;
margin:0px;
padding:0px;
/* background-color:aqua; */
}
hr.onepix {
height:1px;
min-height:1px;
max-height:1px;
line-height:1px;
border:0px;
margin:0px;
padding:0px;
/* background-color:yellow; */
}
#mamma {
position:absolute;
left:0px;
top:0px;
width: 950px;
height: 100%;
margin:0px;
padding:0px;
}
#top {
position:relative;
left:0px;
top:0px;
width:950px;
height:100px;
}
#left {
position:absolute;
width:160px;
height:auto;
background-color:#0099FF;
float: left;
clear: both;
}
#right {
position:relative;
width:770px;
height:100%;
background-color:#FFCC33;
float: right;
clear: left;
}
div.navItem {
height:29px;
}
#teaser {
height:180px;
width:770px;
}
#content {
margin:0px;
padding:0px;
height:auto;
background-color:blue;
}
#contentleft {
width:520px;
float:left;
background-color:green;
height: 100%;
}
#contentright {
background-color:red;
height: 100%;
}
#wrapper {
float: left;
position: fixed;
left: 0px;
top: 0px;
height: 100%;
}
.clear {
clear: both; /* extend height of .main to longest column */
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
</style>
</head>
<body>
<!-- top row with logo -->
<div id="top">
<img src="index-Dateien/logo.gif" alt="logo" id="logo" align="right"></div>
<!-- left col with navi -->
<div id="left">
<!-- hr line -->
<hr class="devider">
<hr class="tenpix">
<div class="navItem"><img src="index-Dateien/top_navi_1_unternehmen.gif" alt="UNTERNEHMEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_2_leistungen.gif" alt="LEISTUNGEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_3_onlineservice.gif" alt="ONLINE_SERVICE" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="index-Dateien/top_navi_4_kontakt.gif" alt="KONTAKT" width="160" height="29"></div>
</div>
<!-- right col with teaser and content columnds -->
<div id="right">
<hr class="devider">
<hr class="tenpix">
<!-- teaser picture -->
<div id="teaser"><img src="index-Dateien/teaser1.jpg" alt="" width="770" height="180"></div>
<!-- content main -->
<div id="content">
<div id="contentleft">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. </div>
<div id="contentright">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat </div>
</div>
</div>
</body>
</html>ASKER
even better but now #contentright will not expand to 100% ??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<style type="text/css" title="Site default" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
}
hr.devider {
width:100%;
height:1px;
line-height:1px;
min-height:1px;
max-height:1px;
border:0px;
margin:0px;
padding:0px;
background-color:#e0e0e0;
}
hr.tenpix {
height:10px;
min-height:10px;
max-height:10px;
line-height:10px;
border:0px;
margin:0px;
padding:0px;
/* background-color:aqua; */
}
hr.onepix {
height:1px;
min-height:1px;
max-height:1px;
line-height:1px;
border:0px;
margin:0px;
padding:0px;
/* background-color:yellow; */
}
#top {
position:absolute;
left:0px;
top:0px;
width:950px;
height:100px;
}
#left {
position:absolute;
left:10px;
top:100px;
width:160px;
height:auto;
background-color:#0099FF;
}
#right {
position:absolute;
left:180px;
top:100px;
width:770px;
height:auto;
background-color:#FFCC33;
}
div.navItem {
height:29px;
}
#teaser {
height:180px;
width:770px;
}
#content {
position:relative;
margin:0px;
padding:0px;
height:100%;
background-color:blue;
}
#contentleft {
width:520px;
float:left;
background-color:green;
height: 100%;
}
#contentright {
margin-left:520px;
background-color:red;
height:100%;
}
#wrapper {
float: left;
position: fixed;
left: 0px;
top: 0px;
height: 100%;
}
.clear {
clear: both; /* extend height of .main to longest column */
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
</style>
</head>
<body>
<!-- top row with logo -->
<div id="top">
<img src="pics/logo.gif" alt="logo" id="logo" align="right"></div>
<!-- left col with navi -->
<div id="left">
<!-- hr line -->
<hr class="devider">
<hr class="tenpix">
<div class="navItem"><img src="pics/top_navi_1_unternehmen.gif" alt="UNTERNEHMEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="pics/top_navi_2_leistungen.gif" alt="LEISTUNGEN" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="pics/top_navi_3_onlineservice.gif" alt="ONLINE_SERVICE" width="160" height="29"></div>
<hr class="onepix">
<div class="navItem"><img src="pics/top_navi_4_kontakt.gif" alt="KONTAKT" width="160" height="29"></div>
</div>
<!-- right col with teaser and content columnds -->
<div id="right">
<hr class="devider">
<hr class="tenpix">
<!-- teaser picture -->
<div id="teaser"><img src="pics/teaser1.jpg" alt="" width="770" height="180"></div>
<!-- content main -->
<div id="content">
<div id="contentleft">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. </div>
<div id="contentright">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
sorry LZ1 did not see your last post before. But it does not change things really because it only works as long as the left col is longer than the right one.
http://accessat.c-net.us/t