2 replies [Last post]
slb
Offline
Regular
Last seen: 13 years 10 weeks ago
Joined: 2007-08-20
Posts: 21
Points: 0

Hi,

I am new to css and have encountered this problem. Can someone with some extra time explain to me how I can make this layout to work.
I have a fixed 2 col layout with 760px width and centered.
In the left column i have the navigation and the content in the right column changes depending on the link selected now some of the links on the left navigation have pictures more than the width of the right column. I tried using min-width for the container but doesn't seem to be working. The picture in the right column gets cutoff after the specified with. Is ther anyway that i could achieve it. Please let me know how i can work this out.

thanks in advance

mlcarey
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2007-09-14
Posts: 1
Points: 0

Adjusting columns

Try to modify the javascript in this layout. This script adjusts the height for two

containers when the page loads. You should be able to change the offset value to width.

body {
margin:0px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}

#container{
width: 760px;
margin-left: auto;
margin-right: auto;
}

#banner{

width: 760px;
height: 125px;
background-color: #D5DBE1;
}

#content_0{
width: 480px;
background-color: #808080;
float: left;
text-align: left;
}

#content_1{
width: 50px;
height: 50px;
background-color: red;
float: left;
color: white;
text-align: left;
}

#content_2{
width: 430px;
height: 50px;
background-color: green;
float: left;
color: #ffffff;
text-align: left;
}

#content_3{
width: 430px;
height: 100%;
background-color: blue;
float: right;
color: white;
text-align: left;
}

#content_4{
width: 430px;
height: 50px;
background-color: white;
float: right;
color: black;

}

#content_5{
width: 280px;
height: 100%;
background-color: black;
float: left;
color: white;
text-align: left;
}

#footer{
width: 760px;
height: 60px;
clear: both;
background-color: #D5DBE1;
text-align: left;
}

function equalHeight()
{
var content_0 = document.getElementById('content_0');
var content_5 = document.getElementById('content_5');

if(content_0.offsetHeight > content_5.offsetHeight)
{
content_5.style.height = content_0.offsetHeight + 'px';
}
else
{
content_0.style.height = content_5.offsetHeight + 'px';
}
}




1

2

3
























4

0

5


slb
Offline
Regular
Last seen: 13 years 10 weeks ago
Joined: 2007-08-20
Posts: 21
Points: 0

Thanks for replying

hi,

I tried but it doesn't work.

Thanks
Again