3 colum css help [Archive]

Colin-Roberts

31-01-2010, 10:46 PM

ok i got the 3 colum css layout to work.. but it makes all the colums have to be the same length it goes like so:
http://extremehabbo.com/v3/

i want so each can expand idvidually cause the sides will have multiple small boxes where the middle will be 1 tall one/

code:

http://pastebin.com/m1b52b260

http://pastebin.com/m13bc81e

or am i going be forced to use 3 colum table then put the divs inside..

MisturMan

31-01-2010, 11:17 PM

Don't set the height to 100%. Make height auto and then do overflow: hidden; so the background expands.

Colin-Roberts

31-01-2010, 11:29 PM

ok i did the 3 heights as auto, were do i put overflow:hidden??
inside the mid divs?

MisturMan

31-01-2010, 11:32 PM

Yeah, and it should do the trick :)

Colin-Roberts

31-01-2010, 11:34 PM

didnt work :S

link in first post is using this css:

body {
background:url(habbo/bg.png) repeat;
margin: 0px 0px 0px 0px;
}

#djsays {
background:url(habbo/djsays.png) repeat-x;
Width: 100%;
Height: 27px;
}

#floatleft {
float: left;
}

#floatright {
float: right;
}

#lefttop {
background:url(habbo/lefttop.png);
float: left;
Width: 224px;
Height: 25px;
margin-top: 22px;
margin-left: 22px;
}

#midtop {
background:url(habbo/midtop.png);
float: left;
Width: 476px;
Height: 25px;
margin-top: 22px;
margin-left: 22px;
}

#righttop {
background:url(habbo/lefttop.png);
float: left;
Width: 224px;
Height: 25px;
margin-top: 22px;
margin-left: 22px;
}

#cont {
margin: 0 auto;
}

#leftmid {
background:url(habbo/sidemid.png);
float: left;
Width: 224px;
Height: auto;
margin-left: 22px;
overflow: hidden;
}

#midmid {
background:url(habbo/midmid.png);
float: left;
Width: 476px;
Height: auto;
margin-left: 268px;
overflow: hidden;
}

#rightmid {
background:url(habbo/sidemid.png);
float: left;
Width: 224px;
Height: auto;
margin-left: 766px;
overflow: hidden;
}

#leftbot{
background:url(habbo/sidebot.png);
float: left;
Width: 224px;
Height: 7px;
margin-left: 22px;
}

#midbot {
background:url(habbo/midbot.png);
float: left;
Width: 476px;
Height: 7px;
margin-left: 22px;
}

#rightbot {
background:url(habbo/sidebot.png);
float: left;
Width: 224px;
Height: 7px;
margin-left: 766px;
}

#inner {
width: 466px;
margin-left: 5px;
margin-right: 5px;
}

kk.

31-01-2010, 11:35 PM

try making a container for each box, and floating them all to the left. Put the left header, middle and footer in the left box, middles in middle, and right in right.

Colin-Roberts

31-01-2010, 11:38 PM

anyone think kk.s idea would work? since thats a virtual recode?

kk.

31-01-2010, 11:41 PM

its not a virtual recode, use the floating boxes youve created already or use other ones.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ExtremeHabbo ~ 2010</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="djsays"></div>
<div id="cont">
<div id="floatleft">
<div id="lefttop"></div>
<div id="leftmid"></div>
<div id="leftbot"></div>
</div>

<div id="floatleft">
<div id="midtop"></div>
<div id="midmid">
<?php
if(!$_GET[page]){
include("pages/home.php");
}else{
include("pages/$_GET[page].php");
}
?>
</div>
<div id="midbot"></div>
</div>

<div id="floatleft">
<div id="righttop"></div>
<div id="rightmid"></div>
<div id="rightbot"></div>
</div>

<div style=clear: both;"></div>
</div>
</body>

youd probably have to change the div boxs and add float left in them too, or something similar at least

Colin-Roberts

31-01-2010, 11:45 PM

kk. idea worked it seemed :)

kk.

31-01-2010, 11:49 PM

wow, my memory serves me better than what i thought! :P

Want to hide these adverts? Register an account for free!