vertically flexible children and parents with CSS

Freeway
1

On 3 Nov 2006, 7:23 pm, The Big Erns wrote:
thebigerns.com

I just downloaded this document and gave it a spin. I myself am trying to achieve a flexible layout design WITHOUT resorting to inlines, so this example is very nice. However, I found that the example presented in this document breaks when you merely apply a border to the parent box (the one named “parent” in the FW document). If you apply a border and then Preview, the border appears but then there is a copy of the content that is cast down beneath it.

I currently have an example page here:
http://kiramek.com/newz/japanese/aboutus.html

Notice the 2 curved corner boxes in the center of the page. The gray background behind those boxes is actually a single large layered HTML item with a gray color applied. I then drew those two layered HTML boxes (with curved corners) as children of the big gray box. I then drew non-layered HTML boxes inside those curved-corner boxes, in which I put the text. I then set the non-layered boxes to have height that can shrink. This works a little bit to add flexibility to the layout if the text size changes, but the boxes overlap eachother of the text gets too big, and the lower box doesn’t shrink vertically if I shrink the text in the browser.

So the ultimate aim in my mind is to find a way to make boxes with borders and curved corners be vertically flexible in size, according to the text content inside. And again, if this can be done without resorting to an inline/inflow layout, it would be desirable.

Thoughts?

–James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

I admit that I have not tooled around with your problem here, that I
am not able atm to work out a fix for you, just offer this thought
about measurements. When adding things like borders, margins, etc.,
means you must subtract from something else so the total measurement
does not exceed the container size.

Also, I had worked out an example from Bulletproof Web Design by Dan
Cederholm, which I highly recommend.
http://www.thebigerns.com/freeway/BWD_indestructible-boxes/

Hope these help.

On Wed, Jul 22, 2009 at 6:59 AM, JDW wrote:

http://www.thebigerns.com/freeway/inline_v_parent/

I just downloaded this document and gave it a spin. I myself am trying to achieve a flexible layout design WITHOUT resorting to inlines, so this example is very nice. However, I found that the example presented in this document breaks when you merely apply a border to the parent box (the one named “parent” in the FW document). If you apply a border and then Preview, the border appears but then there is a copy of the content that is cast down beneath it.

I currently have an example page here:
Error 404: Not Found

Notice the 2 curved corner boxes in the center of the page. The gray background behind those boxes is actually a single large layered HTML item with a gray color applied. I then drew those two layered HTML boxes (with curved corners) as children of the big gray box. I then drew non-layered HTML boxes inside those curved-corner boxes, in which I put the text. I then set the non-layered boxes to have height that can shrink. This works a little bit to add flexibility to the layout if the text size changes, but the boxes overlap eachother of the text gets too big, and the lower box doesn’t shrink vertically if I shrink the text in the browser.

So the ultimate aim in my mind is to find a way to make boxes with borders and curved corners be vertically flexible in size, according to the text content inside. And again, if this can be done without resorting to an inline/inflow layout, it would be desirable.

Thoughts?

–James Wages

–
Ernie Simpson, Freeway 5 User

Cell: +971 (0)50 1729378 (UAE)
Skype: bigerns

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Ernie, I appreciate your time in replying. Yes, I found that “indestructible boxes” Freeway file in another thread and had been playing with it today. I’ve still not figured out how you’re getting those box edges to curve though! Do tell!

Also, those boxes do indeed “destruct” in IE6 for Windows. Specifically, the tops of each box vanish in IE6. But it seems to work well enough in IE7.

My page, which I linked to above, works just fine in IE6. It’s just not as “flexible” as it possibly could be, hence my post in this thread.

Thanks,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I’m sure that since I did that, IE6’s destructive nature was upgraded.
I am relatively sure the author I got that method from has upgraded
his example. Or followed my solution of pretending there is no IE6.

At least you have a starting place… best of luck on finding your solution.

On Wed, Jul 22, 2009 at 12:54 PM, JDW wrote:

Ernie, I appreciate your time in replying. Yes, I found that “indestructible boxes” Freeway file in another thread and had been playing with it today. I’ve still not figured out how you’re getting those box edges to curve though! Do tell!

Also, those boxes do indeed “destruct” in IE6 for Windows. Specifically, the tops of each box vanish in IE6. But it seems to work well enough in IE7.

My page, which I linked to above, works just fine in IE6. It’s just not as “flexible” as it possibly could be, hence my post in this thread.

–
Ernie Simpson
Freeway 5 User

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I still can’t figure out how in the world those boxes get rounded. I don’t see any page markup. I don’t see any specific “Extended” code added on the individual boxes. I don’t see any rounded corner settings in the Inspector. A real mystery!

–James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Take a look at the image: brdr12Kgrn_01.gif

Colin

On 22 Jul 2009, at 10:53, JDW wrote:

I still can’t figure out how in the world those boxes get rounded.
I don’t see any page markup. I don’t see any specific “Extended”
code added on the individual boxes. I don’t see any rounded corner
settings in the Inspector. A real mystery!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

On 22 Jul 2009, 10:28 am, ColinJA wrote:

Take a look at the image: brdr12Kgrn_01.gif

Colin

On 22 Jul 2009, at 10:53, JDW wrote:

I still can’t figure out how in the world those boxes get rounded.
I don’t see any page markup. I don’t see any specific “Extended”
code added on the individual boxes. I don’t see any rounded corner
settings in the Inspector. A real mystery!

Also look in the styles editor at .topleft, .bottomright, etc.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Colin, thank you. I now realize that images were in fact included with in that ZIP file!

Chuck, thank you for pointing me to Styles. That was the specific answer I was after. And I don’t know a better place to hide something in Freeway than there!

Even so, IE6 still “destructs” that indestructible page insofar as the top graphic gets decapitated for some reason. I am by no means a CSS Expert nor do I have the time to figure it all out, so my “investigation” into this example document ends here.

Thank you though, Colin and Chuck, for your time in replying.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options