473,324 Members | 2,166 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Use DIVs instead of Tables

I want to acomplish something like this:

(http://201.192.107.230)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

div.data {
width: 70%;
margin-left: auto;
margin-right: auto;
}

.data div.header {
font-weight: bold;
background-color: #00FF00;
}

.data .header table{
width: 100%;
}

.data .header td{
width: 50%;
}

.data div.description{
background-color: silver;
line-height: 2;
}

.data .description table{
width: 100%;
}

.data .description td.content{
width: 70%;
}

.data .description td.image{
background-color: #FF0000;
text-align: center;
}

.data .description .image img{
width: 200px;
display: block;
padding: 1em 0;
margin-left: auto;
margin-right: auto;
}

/*]]>*/
</style>
</head>

<body>
<div class="data">
<div class="header">
<table>

<tr>
<td>This text<br />
can be multilined</td>

<td>And this box must be the same height as the one on the
left</td>
</tr>
</table>
</div>

<div class="description">
<table>
<tr>
<td class="content">
<p><em>Some title</em></p>

<p>Some content<br />
that must be multilined<br />

I want the image box (the red one)<br />
having the same height<br />
of this box<br />
I tried with css<br />
and divs, but I couldn't</p>

<p><em>Some footer</em></p>

</td>

<td class="image"><img
src="http://antwrp.gsfc.nasa.gov/apod/image/sun_skylab.gif" />
<a href="#">More images...</a></td>
</tr>
</table>
</div>
</div>
</body>

</html>

It's also here: http://201.192.107.230
But I wanted to do do it without tables at all... any sugestion, I've
been trying for about two whole days and I can't figure out a way to do it.

Any help would be appreciated

Thanks.
Jul 5 '06 #1
4 5255
To further the education of mankind, Will <wi**@NOSPAM.gmail.com>
vouchsafed:
It's also here: http://201.192.107.230
But I wanted to do do it without tables at all... any sugestion, I've
been trying for about two whole days and I can't figure out a way to
do it.

Any help would be appreciated
For starters, absolutely-position the image.

--
Neredbojias
Infinity has its limits.
Jul 6 '06 #2
Neredbojias escribió:
To further the education of mankind, Will <wi**@NOSPAM.gmail.com>
vouchsafed:
>It's also here: http://201.192.107.230
But I wanted to do do it without tables at all... any sugestion, I've
been trying for about two whole days and I can't figure out a way to
do it.

Any help would be appreciated

For starters, absolutely-position the image.
If I absolutely-position the image, then the div containing it won't
expand to the height of the image, I could use a defined height for the
div, but in Firefox it won't grow more than that height if I add more
text, I could use min-height, but it won't work on IE...

Also I can't figure out how to get the header look that way either

any other sugestion?
Jul 6 '06 #3
To further the education of mankind, Will <wi**@NOSPAM.gmail.com>
vouchsafed:
Neredbojias escribió:
>To further the education of mankind, Will <wi**@NOSPAM.gmail.com>
vouchsafed:
>>It's also here: http://201.192.107.230
But I wanted to do do it without tables at all... any sugestion, I've
been trying for about two whole days and I can't figure out a way to
do it.

Any help would be appreciated

For starters, absolutely-position the image.

If I absolutely-position the image, then the div containing it won't
expand to the height of the image,
Correct. The text should expand the div. If you explicitly need a second
div for the image, put it in the first div which is relative-positioned,
absolute the 2nd div and set height to 100%.

--
Neredbojias
Infinity has its limits.
Jul 7 '06 #4

"Will" <wi**@NOSPAM.gmail.comwrote in message
news:e8**********@nntp.aioe.org...
Neredbojias escribió:
>To further the education of mankind, Will <wi**@NOSPAM.gmail.com>
vouchsafed:
>>It's also here: http://201.192.107.230
But I wanted to do do it without tables at all... any sugestion, I've
been trying for about two whole days and I can't figure out a way to
do it.
Any help would be appreciated

For starters, absolutely-position the image.

If I absolutely-position the image, then the div containing it won't
expand to the height of the image, I could use a defined height for the
div, but in Firefox it won't grow more than that height if I add more
text, I could use min-height, but it won't work on IE...

Also I can't figure out how to get the header look that way either

any other sugestion?
/* for conforming browsers */
div {min-height........}

/* for IE6 */
* html div {height........}
Jul 10 '06 #5

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

Similar topics

2
by: Egon Pasztor | last post by:
Hi. I'm new at CSS, so maybe this is obvious, but I've looked around quite a bit looking for a solution. I'm playing with the vertical positioning of elements in a 2-column layout. The...
7
by: kaeli | last post by:
I've been trying to get away from using tables as a layout tool, but I've just come across what I consider to be a serious liability. If I specify a width (minimum, really) in a div, such as ...
5
by: squidco | last post by:
I've been trying to wean myself off of tables. I've been reading about the float property, and have implemented a couple of sites using divs instead of tables, and generally I'm happy with the...
6
by: ~john | last post by:
I'm using DIVs in a test site for my page layout. It's working fairly well so far but there's 2 problems I'm having that I didn't have with tables. I'm sure it's just something small in my CSS. ...
14
by: Daniel | last post by:
Hi i have a requirement for the following layout in my masterpage: 1 div for header 1 div for footer Between those divs i want a div for the left menu, then a div for the content in the...
6
by: =?Utf-8?B?Tkg=?= | last post by:
Hi, What do you recommend for defining the layout of an asp.net 2.0 page? Leaving masterpages and user controls aside for the moment is the use of tables or Divs the best approach? I have...
7
by: arupfrancis | last post by:
Hi, I am trying to create a colored box using background images. I am able to do it easily using tables but doing it in divs is proving to be an issue. Moreover IE and Mozilla also seems to be...
7
by: maya | last post by:
hi, I got this unusual design (well, not so unusual anymore, I guess..) for an input text field for a search form in top of page.. http://www.mayacove.com/design/search/search.html I can't...
3
jhardman
by: jhardman | last post by:
I'm almost to the point of using tables to position my elements. That is how bad this is. So here's the rundown. I have an old page (created by someone else) that I was trying to update to...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.