Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > back to basics on divisions

Reply
Thread Tools

back to basics on divisions

 
 
richard
Guest
Posts: n/a
 
      04-13-2008
Why do I continously have this problem every time I work with
divisions?

Seems like it anyway.
What I want is simple. I've done it before and every blasted time I
keep running into these problems.

Think of a simple table layout witn two rows.
The second and subsequent row(s) has two cells.

So I lay it out with a containing division as the "table".
Row 1, cell 1, is the "title" or header.
In a table this would get a colspan of 2.

Row 2 therefor has 2 cells. So in divisions, they should be floated
right?
Well when I put the floats in, the second row cells refuse to be
contained within the "table".

What's the trick to contain the data within the cells as I want them?
I just can't seem to figure it out again.


<div class="atable">
<div class="row1">Title</div>
<div class="row2cell1">Text</div>
<div class="row2cell2">Data</div>
</div>

A site that shows me what I want to do would be better for me to look
at. Trying to find one through google is a frickin joke.




 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      04-13-2008
richard wrote:

> Why do I continously have this problem every time I work with
> divisions?


I can answer that...

> Think of a simple table layout witn two rows.


So why don't you just use a table?

--
-bts
-Friends don't let friends drive Vista
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      04-13-2008
richard wrote:
> Why do I continously have this problem every time I work with
> divisions?


<snip>

> What's the trick to contain the data within the cells as I want them?
> I just can't seem to figure it out again.
>
>
> <div class="atable">
> <div class="row1">Title</div>
> <div class="row2cell1">Text</div>
> <div class="row2cell2">Data</div>
> </div>
>
> A site that shows me what I want to do would be better for me to look
> at. Trying to find one through google is a frickin joke.


Because you fail to understand that by default floats are not supposed
to be contained within their "container" parent block, see example when
an image is set to display as block and floated withing a paragraph...


http://www.w3.org/TR/CSS21/visuren.html#img-float2p
Visual formatting model

If you a "atable" to contain your floats you either have to add a
clearing element after your floats within "atable" or change overflow
property of "atable" to auto or hidden...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      04-13-2008
In article <(E-Mail Removed)>,
richard <(E-Mail Removed)> wrote:

> What's the trick to contain the data within the cells as I want them?
> I just can't seem to figure it out again.
>
>
> <div class="atable">
> <div class="row1">Title</div>
> <div class="row2cell1">Text</div>
> <div class="row2cell2">Data</div>
> </div>
>
> A site that shows me what I want to do would be better for me to look
> at. Trying to find one through google is a frickin joke.


Fancy this sort of thing at all:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="all">
div {border: 1px solid; text-align: center;}
..atable {width: 40em;}
..row2cell1 {float:left; width:50%;}
</style>
</head>
<body>
<div class="atable">
<div class="row1">Title</div>
<div class="row2cell1">Text</div>
<div class="row2cell2">Data</div>
</div>
</body>
</html>

?

--
dorayme
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      04-14-2008
On Mon, 14 Apr 2008 08:23:14 +1000, dorayme
<(E-Mail Removed)> wrote:

>In article <(E-Mail Removed)>,
> richard <(E-Mail Removed)> wrote:
>
>> What's the trick to contain the data within the cells as I want them?
>> I just can't seem to figure it out again.
>>
>>
>> <div class="atable">
>> <div class="row1">Title</div>
>> <div class="row2cell1">Text</div>
>> <div class="row2cell2">Data</div>
>> </div>
>>
>> A site that shows me what I want to do would be better for me to look
>> at. Trying to find one through google is a frickin joke.

>
>Fancy this sort of thing at all:


Precisely what is so confusing to me as to why MY version was not
working. I figure it has something to do as to when the float is
placed in the css. If you place it at the end of the list, nothing
seems to work right. So I'll try to remember to put float first.

Thanks.













>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
><html>
><head>
><title>Menu</title>
><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
><style type="text/css" media="all">
>div {border: 1px solid; text-align: center;}
>.atable {width: 40em;}
>.row2cell1 {float:left; width:50%;}
></style>
></head>
><body>
><div class="atable">
> <div class="row1">Title</div>
> <div class="row2cell1">Text</div>
> <div class="row2cell2">Data</div>
></div>
></body>
></html>
>
>?

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
divisions not placed properly in mozilla Richard HTML 5 01-17-2004 02:27 PM
ok. new problem unederstanding mozilla divisions Richard HTML 1 01-11-2004 12:36 PM
Problem with converting to divisions Richard HTML 3 01-10-2004 05:19 PM
Positioning Divisions with CSS Dennis M. Marks HTML 1 12-10-2003 09:38 PM
IE versus mozilla display of divisions time waster HTML 5 11-17-2003 03:31 AM



Advertisments