3 replies [Last post]
Strato
Offline
newbie
Last seen: 10 years 31 weeks ago
Joined: 2009-11-10
Posts: 3
Points: 5

Hello good people,

I've pasted HTML code below (CSS included in ). The problem is, that I can not make #left and #right to be set to the same height as the #center div. Please help. Smile

Thanks in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META content="text/html; charset=windows-1257" http-equiv="Content-Type">
<TITLE>
</TITLE>
 
<STYLE type="text/css">
#container {
width: 750px;
margin: 0px auto 0px auto;
}
 
#header {
background:#CCCCCC;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
 
#left {
background:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:130px;
padding:10px;
float:left;
height:auto;
}
 
#center{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:430px;
padding:10px;
float:left;
}
 
#right{
background:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:130px;
padding:10px;
float:right;
}
 
#footer{
background:#CCCCCC;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
clear:both;
}
 
body {
background-color:#FFFFFF;
margin-top:50px;
}
 
</STYLE>
 
</HEAD>
 
<BODY>
 
<div id="container">
<div id="header">This is header.</div>
 
<div id="left">Some text on left. It's good to see it.</div>
<div id="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent massa  massa, mattis eget rhoncus ut, egestas eget orci. Fusce hendrerit  tempor nibh quis gravida. Donec vehicula est tristique massa facilisis  nec tempus augue porttitor. Aliquam erat volutpat. Nulla pellentesque,  nibh vel auctor ultrices, tellus eros gravida tellus, vehicula volutpat  odio dui vel tortor. Cras semper risus in felis rhoncus adipiscing.  Vivamus feugiat facilisis varius. Pellentesque venenatis lectus sem,  tincidunt placerat mi. Aliquam interdum ultrices dui. Nam vitae ante et  massa lobortis facilisis sed id libero. Aenean ac porta lectus. Donec  euismod condimentum quam eu viverra. Sed consequat massa vel elit  condimentum eleifend nec at nunc. Donec lacus velit, euismod quis  elementum vel, tempor tincidunt mi. Pellentesque odio nunc, tempor  dapibus. </div>
<div id="right">It is the right column.</div>
<div id="footer">This is some piece of text in the footer.</div>
</div>
 
</BODY>
 
</HTML>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 39 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

looks like you have more

looks like you have more content in the #center. The divs will be sized according to the content inside. You may want to set a specific height of all the divs, or look into faux columns.

Strato
Offline
newbie
Last seen: 10 years 31 weeks ago
Joined: 2009-11-10
Posts: 3
Points: 5

OK. Faux collums works on

OK. Faux collums works on fixed size websites. What about liquid layouts? I can't make liquid background, can I? Smile Is the any other way to fix this problem?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 22 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Faux columns can work with

Faux columns can work with fluid layouts, but don't ask me to explain the process it's too complex, to do with positioning backgrounds using % values and bit's of maths calculations.

Google 'liquid faux columns'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me