...

View Full Version : hot to make 3 columns using divs?



alapimba
03-04-2009, 11:31 PM
Hi

I have been allways using tables but i'm trying to start using divs. but i can't understand some stuff that its probably very basic.

I want something like this:

<table width="100%" border="0">
<tr>
<td>&nbsp;</td>
<td width="50">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

the 1st and last column i want to stretch to fill the monitor and the middle one to has a fixed height.

how can i do this with divs?:confused:

Excavator
03-05-2009, 12:30 AM
Hello alapimba,
Does this one work for you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#left {
width: 50%;
float: left;
background: #0F0;
}
#mid {
width: 50px;
float: right;
background: #CC3;
}
#right {
width: 50%;
float: right;
background: #F00;
}
</style>
</head>
<body>
<div id="left">
left
<div id="mid">
middle
<!--end mid--></div>
<!--end left--></div>
<div id="right">
right
<!--end right--></div>
</body>
</html>?

Excavator
03-05-2009, 02:08 AM
Here is a position:fixed; one that is more centered -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#left {
width: 50%;
float: left;
background: #0F0;
}
#mid {
width: 50px;
position: fixed;
top: 0;
left: 50%;
margin: 0 0 0 -25px;
background: #CC3;
}
#right {
width: 50%;
float: right;
background: #F00;
}
</style>
</head>
<body>
<div id="left">
left
<!--end left--></div>
<div id="mid">
middle
<!--end mid--></div>
<div id="right">
right
<!--end right--></div>
</body>
</html>

alapimba
03-05-2009, 10:59 AM
yep it works perfect.

i just can't understand the concept of the 50%

50% + 50% + 50pixels is more than the seize of the screen

Can you explain the idea behind this?

Thanks

Excavator
03-05-2009, 11:23 AM
yep it works perfect.

i just can't understand the concept of the 50%

50% + 50% + 50pixels is more than the seize of the screen

Can you explain the idea behind this?

Thanks
By making #mid position:fixed we are taking it out of the normal flow of the layout.
Maybe the best way to explain would be for you to watch what happens when you remove the background color from #mid. All three divs are still there but now you can see what's going on behind #mid.

alapimba
03-06-2009, 11:22 AM
ah ok.
got the idea.

this way i can't get what i need.

anyway i'm trying to make a mix of tables with divs... it works perfect on IE6 and Firefox, but not on IE7

Can you help me out?

Here is the result:

http://www.opelclassico.pt/_index.htm

If you open on firefox you see the menu in place, perfect and the logo it's centered with the line of the boxes.
But on IE it moves my divs about 20pixels to the right. how can i fix it?

Here is my code:


<table width="100%" border="0" cellpadding="0" cellspacing="3">
<tr>
<td bgcolor="#FFED00">&nbsp;</td>
<td width="800" height="250"><img src="homepage_fotos/rotator.php" width="800" height="250" /></td>
<td bgcolor="#000000">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#005b6b">&nbsp;</td>
<td bgcolor="#FFED00"><div id="logo"><a href="index.htm"><img src="img/logo_club.png" width="138" height="204" border="0" /></a></div><!-- #BeginLibraryItem "/Library/links.lbi" --><div id="navcontainer">
<ul id="navlist" name="navlist">
<li><a href="cocp.html">COCP</a></li>
<li><a href="socios.php">SÓcios</a></li>
<li><a href="actividades.php">Actividades</a></li>
<li><a href="classificados.php">Classificados</a></li>
<li><a href="links.php">Links</a></li>
<li><a href="gbook.php">Guestbook</a></li>
<li><a href="contactos.php">Contactos</a></li>
</ul>
</div><!-- #EndLibraryItem --></td>
<td bgcolor="#FFFBDB">&nbsp;</td>
</tr>
</table>


My css:


#logo{
height: 192px;
width: 138px;
z-index: 2;
position: absolute;
margin-left: 733px;
top: 45px;
}
#navcontainer{
background-color:#FFED00;
height: 23px;
width: 740px;
position: relative;
margin-top: 0px;
margin-left: 0px;
}
#navcontainer ul
{
position: relative;
margin-top: 0px;
margin-left: 0;
margin-bottom: 0px;
background-color:#FFED00;
color: #333333;
float: inherit;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 11px;
margin-right: 0px;
padding: 0px;
text-align: center;
width: 800px;
font-weight: bold;
}

#navcontainer ul li {
display: inline;
background-color: #FFED00;
}

#navcontainer ul li a
{
/*padding: 1px;*/
background-color: #FFED00;
color: #333333;
text-decoration: none;
float: left;
padding-bottom: 5px;
padding-top: 5px;
padding-right: 7px;
padding-left: 12px;
}

#navcontainer ul li a:hover
{
background-color: #FFFBDB;
color: #333333;
}


What i'm doing wrong?

Excavator
03-06-2009, 08:01 PM
Instead of looking at that like left/center/right columns, try looking at it 3-dimensionally. In layers of nested divs.
The bottom layer of a header can have your yellow bar on the left.
The next layer of a header can have the black bar on the right.
A centered content layer would then hold your image rotator, menu and content.

alapimba
03-07-2009, 02:10 PM
got the idea.
anyway i allready fixed it, just need to align the TD with the divs inside to the left and everything worked perfect on IE 6 7 and firefox.
Probably not the best solution as i'm using tables and divs but it's working as i wanted :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum