I was just wondering is divs can be placed side by side? wthout using a table? I came close to finding out but that website wants me to pay them to see the answer...yikes.
I'd like to (Crossed fingers) to not have to make them absolute...please. I HATE trying to position absolute divs...
Thanks!Here take a look over this and you will see much can be done with divs
<!-- m --><a class="postlink" href="http://glish.com/cssI">http://glish.com/cssI</a><!-- m --> stopped doing TABLES altogether, and only do DIVs and other CSS. I sometimes have to some legacy work on sites still using TABLEs for the entire layout... and find myself often enough staring at my computer screen through my fingers, wondering WHY anyone would still want to do/retain sites made that way...
Thanks johneva, that was a perfect resource.
Only thing is...the layout works PEEEERRRRFECTLY in IE, but in FF, the main div which holds all the divs in the layout doesn't appear. ( color coded all of them to check )
<!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>
<style type="text/css">
body{
background: #F4F4F4;
}
#entire{
background: /*#FCFCFC*/#f00;
width: 600px;
}
#banner{
background: /*#FFF url()*/#000;
width: 600px;
height: 150px;
}
#content{
float: right;
width: 450px;
height:200px;
background: /*#fff*/#ccc;
}
#navcontainer{
display: block;
float: left;
width: 150px;
background: /*#FCFCFC*/#f58;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
}
#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}
#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
#footer{
float: bottom;
width: 600px;
height: 20px;
background: #339933;
}
</style>
<title>Layout 3</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"Layout 3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="entire">
<div id="banner">
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>
<div id="content">
s
</div>
<div id="footer">
f
</div>
</div>
</body>
</html>I stopped doing TABLES altogether, and only do DIVs and other CSS. I sometimes have to some legacy work on sites still using TABLEs for the entire layout... and find myself often enough staring at my computer screen through my fingers, wondering WHY anyone would still want to do/retain sites made that way...
Lol I see what you mean. But remember, at one time you loooved tables. I know I did.
Lol I see what you mean. But remember, at one time you loooved tables. I know I did.
Guilty.
Nevermind, got it to work.
Just had to change:
#footer{
float: bottom;
width: 600px;
height: 20px;
background: #339933;
}
to:
#footer{
float: left;
width: 600px;
height: 20px;
background: #339933;
}
I'd like to (Crossed fingers) to not have to make them absolute...please. I HATE trying to position absolute divs...
Thanks!Here take a look over this and you will see much can be done with divs
<!-- m --><a class="postlink" href="http://glish.com/cssI">http://glish.com/cssI</a><!-- m --> stopped doing TABLES altogether, and only do DIVs and other CSS. I sometimes have to some legacy work on sites still using TABLEs for the entire layout... and find myself often enough staring at my computer screen through my fingers, wondering WHY anyone would still want to do/retain sites made that way...
Thanks johneva, that was a perfect resource. Only thing is...the layout works PEEEERRRRFECTLY in IE, but in FF, the main div which holds all the divs in the layout doesn't appear. ( color coded all of them to check )
<!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>
<style type="text/css">
body{
background: #F4F4F4;
}
#entire{
background: /*#FCFCFC*/#f00;
width: 600px;
}
#banner{
background: /*#FFF url()*/#000;
width: 600px;
height: 150px;
}
#content{
float: right;
width: 450px;
height:200px;
background: /*#fff*/#ccc;
}
#navcontainer{
display: block;
float: left;
width: 150px;
background: /*#FCFCFC*/#f58;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
}
#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}
#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
#footer{
float: bottom;
width: 600px;
height: 20px;
background: #339933;
}
</style>
<title>Layout 3</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"Layout 3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="entire">
<div id="banner">
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>
<div id="content">
s
</div>
<div id="footer">
f
</div>
</div>
</body>
</html>I stopped doing TABLES altogether, and only do DIVs and other CSS. I sometimes have to some legacy work on sites still using TABLEs for the entire layout... and find myself often enough staring at my computer screen through my fingers, wondering WHY anyone would still want to do/retain sites made that way...
Lol I see what you mean. But remember, at one time you loooved tables. I know I did.
Lol I see what you mean. But remember, at one time you loooved tables. I know I did. Guilty.
Nevermind, got it to work.Just had to change:
#footer{
float: bottom;
width: 600px;
height: 20px;
background: #339933;
}
to:
#footer{
float: left;
width: 600px;
height: 20px;
background: #339933;
}