Very noob div question

[esllou]

I am trying to get the following layout in the middle of my page using three divs.

---------------------
11 222222222222222222
11 222222222222222222
11 333333333333333333
11 333333333333333333
11 333333333333333333
11 333333333333333333
11 333333333333333333
---------------------

So far, I have:

<div style="border:2px solid green;">

<div class="left-block" style="border:2px solid red;width:120px;float:left;height:100%;">
this should be the 1111 block.
</div>

<div class="top-block" style="height:22px;text-align:right;width:100%;border-bottom:1px solid black;">this should be the 2222 block.</div>

the 3333 stuff should be here.
</div>

I want the left-hand 1111 div to go to the bottom of the container div and no more. The bottom border of the top 2222 div shouldn't encroach into the left div.

I'm obviously making some uber amateur div errors, but I preferred to come here with some code first so someone could point me in the right direction. Divs/floating are not my strong point! :-)

[Demaestro]

Instead of using three divs

Try using a:

<ul id="inline">
<li></li>
<li></li>
<li></li>
</ul>

<style>
#inline {
list-style: none;
margin: 0px;
padding: 0px;
}

#inline li {
display:inline;
}
</style>

Then just define the width on the li to get it looking the way you want... this will make it easier to add more later as well.

[edited by: Demaestro at 3:46 pm (utc) on Nov. 5, 2007]

[Marshall]

You may find it easier if the two right <div> are in a wrapper with its margin and padding set to zero.

Marshall

[joelgreen]

Demaestro, looks like your example will not put 33333 block under the 2222 block like OP needs, but the example seems to be good for columns layout. Or have ul for horizontal layout and 2 divs for vertical

<ul id="inline">
<li>111</li>
<li>
<div>
22222
</div>
<div>
3333
</div>
</li>
<ul>

<style>
#inline {
list-style: none;
margin: 0px;
padding: 0px;
}

#inline li {
display:inline;
}
</style>

[encyclo]

Ugh, sorry I have to disagree about using a list. That's very poor semantics, the content blocks as described are not list items. There's nothing wrong with using

div

s here.

For the issue in question, in fact you have a simple two-column layout. As I understand it, you want the floated section to stretch the full length, by this do you mean that it will have a distinct background color?

[esllou]

the simplest way to imagine this is to look at WebmasterWorld forum comments. That is, I've just realised, EXACTLY the thing I'm after. As comments grow, the left col (with user info inside) just grows.

Is this, as I'm starting to suspect, a case where a table might be the best thing. I finished the look using a table in 45 seconds.

The design is for a forum-type template so these div groupings would occur 10-30 times on a page.

[Xapti]

Well it also depends a bit on how you want the sizing horizontally. On these forum posts, the right two blocks stretch horizontally depending on window size, and the left is fixed.

I also assume you need the right column to fit the height of the left column when the right's content is small, and not just have the left follow the right. This is somewhat important, since I think it could be done without faux columns if it wasn't needed.

As you may have noticed, to get all the effects, almost exclusively tables have been used, since the CSS just isn't there to easily implement. I think it's doable though with faux columns.

An example of a site which doesn't use tables in the topic itself (it uses tables for the indexes), is punbb [punbb.org...]

[edited by: Xapti at 6:04 pm (utc) on Nov. 13, 2007]

[Demaestro]

The fact is a table is fine to use for tabular data.

That is it's function and if you are using tabular data then a table is the way to go.

Tables layouts are "in" right now and are great for SEO but there is nothing wrong with using a table to show data in that format.

Search engines will index it as such (tabular data). Which is why tables for content is bad... tables for tabular data is good. Just be sure if you do go with tables to structure them properly. Use tbody and trow and use hr to define the column names. This will ensure that your data is indexed properly.

[edited by: Demaestro at 6:00 pm (utc) on Nov. 13, 2007]

[Xapti]

I would not call forum posts tabular. Unless you start putting the html like this:
<td>post number</td><td>date</td><td>username</td><td>user avatar</td><td>post contents</td><td>signature</td>

Which I have never seen.

Forum indexes, such as the list of topics, list of threads, etc. is indeed tabular. They have a topic, a date, number of posts, number of views, and are displayed ina tabular fashon. Forum posts are most semantic as an ordered list in my opinion.