back to basics on divisions

richard · Apr 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.

Beauregard T. Shagnasty · Apr 13, 2008

richard said:
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?

Jonathan N. Little · Apr 13, 2008

richard said:
Why do I continously have this problem every time I work with
divisions?

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...

dorayme · Apr 13, 2008

richard said:
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>

?

richard · Apr 14, 2008

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.

Search Results with Pagination	0	Oct 25, 2024
Splitting divisions like in rowspan	1	Oct 9, 2008
Align separate li to right	2	Jun 19, 2024
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How to properly insert a landing page within same container beneath an image element?	0	Oct 7, 2024
Jquery not triggering / acting as expected.	0	Mar 6, 2022
How to have two html audio players on one page?	0	May 3, 2022
How to add an image to divisions without IDs	5	Dec 20, 2009

back to basics on divisions

richard

Beauregard T. Shagnasty

Jonathan N. Little

dorayme

richard

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads