CSS Guru test

Dev Shed Forums Sponsor:

September 13th, 2003, 10:29 AM

phatnadz

Contributing User

Join Date: Jun 2003

Posts: 30

Time spent in forums: < 1 sec
Reputation Power: 10

CSS Guru test

I have a complex, graphically section of a page that I would like to build using CSS instead of tables within tables within tables. Below is an image of what I am trying to build with CSS:

Linky

(Keep in mind this is just a section of the page, not the complete page.) This portion of the page houses the main content, and therefore needs to be able to dynamically expand vertically if I decide to add more or less text.

I was thinking about doing this using a container DIV with the following properties:

.body {
background-color: #CCCCCC;
overflow: visible;
position: absolute;
padding: 5px;
width: 730px;
left: 10px;
top: 10px;
border-top: 0px solid #999999;
border-right: 2px solid #999999;
border-bottom: 0px solid #999999;
border-left: 2px solid #999999;
}

As for the embedded DIV, I am at a loss about how to do this. I know that I will need to use images for the four rounded edges, but I don't have the slightest clue about how to position these elements, especially considering how it has to scale depending on the text.

My experiment with embedded DIVs did not work out, as I get this when displayed in a browser:

Linky

Below is the source for this error:

<style type="text/css">

</style>
</head>

<body>

<div class="dad"> 
<div class="son"><p>The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. </p></div>
</div>

</body>

Obviously, the problem is that the container DIV does not scale depending on the size of the embedded DIV. Is it possible to establish this relationship so that the container scales with the internal DIV?

THANKS!!!

September 14th, 2003, 12:06 AM

phatnadz

Contributing User

Join Date: Jun 2003

Posts: 30

Time spent in forums: < 1 sec
Reputation Power: 10

bump

September 14th, 2003, 03:38 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 5,268

Time spent in forums: 1 Month 1 Week 4 Days 10 h 31 m 27 sec
Reputation Power: 1954

Code:

.dad {
border: 2px solid blue;
padding: 5px;
/*border and padding added for clarity*/
width: 400px;
left: 20px;
top: 20px;
position: absolute;
}

.son {
border: 2px solid red;
/*border added for clarity*/
padding: 4px;
left: 2px;
top: 2px;
}

Is this what you want?

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

Developer Shed Advertisers and Affiliates