473,549 Members | 2,251 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Divs Can't Replace A Table

I would like to do something that seems so basic with two div's but I
don't think it can be done. Tables can do it in a snap. I was
convinced that css was the way to go for layout but without being able
to do even the easiest things, I don't see how.

Here is the table way to do the layout (I want this to work in
compliance mode in all modern browsers.):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px ;height:100%;}
</style>
</head>
<body>
<table style="height:1 00%;" cellpadding="0" cellspacing="0" >
<tr>
<td style="backgrou nd-color:blue">
Some Text
</td>
<td style="backgrou nd-color:red;width :100%;text-align:center">
<div style="width:40 0px">
A Lot More Text A Lot More Text
</div>
</td>
</tr>
</table>
</body>
</html>

I want to have the left column shrink to fit the text and the right
column to be a 100% of the left over viewport. Sounds simple.

Here's what won't work in IE. You'll notice that as soon as you touch
the 400px div with the viewport the whole thing drops to the bottom.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px ;height:100%;}
#nav{float:left ;height:100%;ba ckground-color:blue;}
#content{height :100%;backgroun d-color:red;text-align:center;}
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div style="width:40 0px">
A Lot More Text A Lot More Text
</div>
</div>
</body>
</html>
Tyler
Jul 20 '05 #1
20 3032
Tyler Carver wrote:
I want to have the left column shrink to fit the text and the right
column to be a 100% of the left over viewport. Sounds simple.

Here's what won't work in IE. You'll notice that as soon as you touch
the 400px div with the viewport the whole thing drops to the bottom.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px ;height:100%;}
#nav{float:left ;height:100%;ba ckground-color:blue;}
#content{height :100%;backgroun d-color:red;text-align:center;}
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div style="width:40 0px">
A Lot More Text A Lot More Text
</div>
</div>
</body>
</html>


Yes this is called a liquid layout, which you have created by using
relative positioning, which is the default for css. If you don't want
anything to move, use absolute positioning. Here is one way to do it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px ;height:100%;}
#nav{position:a bsolute; background-color:blue; width:100px;
height:100%;}
#content{positi on:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>
Jul 20 '05 #2
Red
Tyler Carver wrote:
I want to have the left column shrink to fit the text and the right
column to be a 100% of the left over viewport. Sounds simple.

Here's what won't work in IE. You'll notice that as soon as you touch
the 400px div with the viewport the whole thing drops to the bottom.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px ;height:100%;}
#nav{float:left ;height:100%;ba ckground-color:blue;}
#content{height :100%;backgroun d-color:red;text-align:center;}
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div style="width:40 0px">
A Lot More Text A Lot More Text
</div>
</div>
</body>
</html>


This is called a liquid layout, which you have created by using relative
positioning, which is the default for css. If you don't want anything to
move, use absolute positioning. Here is one way to do it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px ;height:100%;}
#nav{position:a bsolute; background-color:blue; width:100px;
height:100%;}
#content{positi on:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>
Jul 20 '05 #3
On 21 Jul 2004 14:24:02 -0700, xf**********@ya hoo.com (Tyler Carver)
wrote:
I would like to do something that seems so basic with two div's but I
don't think it can be done...


Sure you can; there's a lot of interesting ideas that can be realized
already with CSS1 properties only.

<http://www.css.nu/articles/table-in-css.html>

You should of course forget the use of a "Transition al" <DOCTYPE...
declaration and make sure that your browser operates in its best
possible rendering mode.

--
Rex
Jul 20 '05 #4
On Wed, 21 Jul 2004, Red wrote:
This is called a liquid layout, which you have created by using relative
positioning, which is the default for css.
splendid.
If you don't want anything to move, use absolute positioning.


If you don't want anything to move - think again. It's going to move
anyway, for some readers, so you might do better to work -with- the
properties of the medium. Some CSS properties are more suitable for
specific display situations, but are better avoided when the result
will be displayed over the whole range of display situations on the
WWW.

Unless you're a real wizard with graceful fallback techniques, but
then surely you'd know better than to ask for "nothing to move".

cheers

Jul 20 '05 #5
Red <gr****@reenie. org> wrote:
This is called a liquid layout, which you have created by using relative
positioning, which is the default for css.
Static is the default.
If you don't want anything to
move, use absolute positioning.


Many beginners make the mistake of thinking that css absolute
positioning is the way to create pixel prefect layouts that will look
the same in every css browser. Most of the time what they produce not
only does not achieve the desired goal, it fights the strengths of the
medium. There are relatively few cases where using css absolute
positioning makes sense, and in the cases where it does it requires
considerable skill to understand, implement and to reduce the associated
drawbacks (some are unavoidable).

Bottom line: stay away from absolute positioning until you are a skilled
css'er.

--
Spartanicus
Jul 20 '05 #6
Spartanicus wrote:
Red <gr****@reenie. org> wrote:

This is called a liquid layout, which you have created by using relative
positioning , which is the default for css.

Static is the default.

If you don't want anything to
move, use absolute positioning.

Many beginners make the mistake of thinking that css absolute
positioning is the way to create pixel prefect layouts that will look
the same in every css browser. Most of the time what they produce not
only does not achieve the desired goal, it fights the strengths of the
medium. There are relatively few cases where using css absolute
positioning makes sense, and in the cases where it does it requires
considerable skill to understand, implement and to reduce the associated
drawbacks (some are unavoidable).

Bottom line: stay away from absolute positioning until you are a skilled
css'er.

Are you really saying don't use absolute postitioning at all ? Most
layout tutorials such as http://bluerobot.com/web/layouts/layout1.html
use it to some extent.

What in particular are the drawbacks of the particular code I posted ?
I'll post it again below, and here is an url:
http://www.reenie.org/test/csstest.htm

It seemed to do what the original poster wanted. How would you make this
layout without using absolute positioning ?
The only reason I made the content column absolute is that height:100%
doesn't work with relative positioning, and it seemed like the original
poster wanted the columns to fill the screen. The original poster also
complained that the right hand column moved to the bottom when the
screen is narrow- and I agree it can be ugly when that happens.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px ;height:100%;}
#nav{position:a bsolute; background-color:blue; width:100px;
height:100%;}
#content{positi on:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>
Jul 20 '05 #7
Red
Spartanicus wrote:
Red <gr****@reenie. org> wrote:

This is called a liquid layout, which you have created by using relative
positioning , which is the default for css.

Static is the default.


relative positioning is static ? How is that ? Doesn't make any sense to
me. I seems that absolute positioning would be considered static, and
it surely is not the default.
If you don't want anything to
move, use absolute positioning.

Many beginners make the mistake of thinking that css absolute
positioning is the way to create pixel prefect layouts that will look
the same in every css browser. Most of the time what they produce not
only does not achieve the desired goal, it fights the strengths of the
medium. There are relatively few cases where using css absolute
positioning makes sense, and in the cases where it does it requires
considerable skill to understand, implement and to reduce the associated
drawbacks (some are unavoidable).

Bottom line: stay away from absolute positioning until you are a skilled
css'er.

Are you really saying don't use absolute postitioning at all ? Most
layout tutorials such as http://bluerobot.com/web/layouts/layout1.html
use it to some extent.

What in particular are the drawbacks of the particular code I posted ?
I'll post it again below, and here is an url:
http://www.reenie.org/test/csstest.htm

It seemed to do what the original poster wanted.
The only reason I made the content column absolute is that height:100%
doesn't work with relative positioning, and it seemed like the original
poster wanted the columns to fill the screen. The original poster also
complained that the right hand column moved to the bottom when the
screen is narrow- and I agree it can be ugly when that happens.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px ;height:100%;}
#nav{position:a bsolute; background-color:blue; width:100px;
height:100%;}
#content{positi on:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>
Jul 20 '05 #8
Red wrote:
Spartanicus wrote:
Red <gr****@reenie. org> wrote:

This is called a liquid layout, which you have created by using
relative positioning, which is the default for css.


Static is the default.


relative positioning is static ? How is that ? Doesn't make any sense to
me. I seems that absolute positioning would be considered static, and
it surely is not the default.


Read in the CSS spec about positioning. Values are 'static', 'relative',
'absolute', or 'fixed'. The default is 'static'.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Jul 20 '05 #9
Red
Johannes Koch wrote:


Read in the CSS spec about positioning. Values are 'static', 'relative',
'absolute', or 'fixed'. The default is 'static'.


OK sorry. I thought had I read it some book, but I guess I was mistaken.

red
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
1618
by: jiing | last post by:
<?php $ldapServer="ldap://192.168.1.211"; $ldapPort="389"; $ldapconn=ldap_connect($ldapServer,$ldapPort); $ldaprdn="uid=root, ou=People, dc=aitc, dc=com, dc=tw"; $ldappass="abcd"; if($ldapconn){ echo "connect to ".$ldapServer." successfully \n<br>"; }else{
2
1786
by: Wensheng | last post by:
I have a py program below: -------------------------------- class someclass: def __init__(self): self.var = "hell, world" def printitout(self): execfile("printit.py") #__import__("printit") #doesn't work
3
22879
by: ZF Tang | last post by:
Hi, guys. I'm compiling a c++ file in cygwin. drand48() and srand48() are used in this file. But there is no definition for them in stdlib.h. Can I replace them with random()? If no, is there any other approach to solve this problem? I'm not familiar with Unix/Linux-like environments. Any help will be appreciate very much.
2
2493
by: jaYPee | last post by:
anyone know how can I replace this code using only the div tag? I have tried everything but I can't do it. here's the code using table: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;
1
1742
by: galsaba | last post by:
How can I replace a word in a field in all records? Let's say that I have the record "address". and the adress are: 37-08 east linwood st 121 east smith road 22 ave west apple blvd 202 galsaba east avenue etc. I want to replace the word "east" in the field address on all records
7
7950
by: silverburgh.meryl | last post by:
Hi, If I have a string like this: char buff; buff ='h'; buff ='e'; buff ='l'; buff ='l'; buff ='o';
5
25513
by: herman | last post by:
How can I replace all occurrences of a character with another character in std string? For example, I want to replace '/' with '+' in my std::string I have looked at the replace() method in the string class, it does not replace all occurrences of a character with another character. http://www.cppreference.com/cppstring/index.html
0
7546
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7985
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7503
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7830
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6071
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3517
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3496
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1082
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
784
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.