Known Participant

Answered

Unexpected enlargement when launched

Forum|Forum|1 month ago
February 25, 2026
5 replies
200 views

When everything finally was organized with your help here, and the code launched many times on the web for various check-ups:

All of a sudden, the web browser version is enlarged out of proportion, distorted and the text no longer nicely wrapped as in DW! What could be the problem now? The FTP service recently updated?

As I wrote earlier, the nightmare is not over…

Ingemar

Correct answer Nancy OShea

TRAILING SLASHES />

In HTML 5 documents, we no longer use trailing slashes at the end of <img> tags.

That’s a holdover from earlier XHTML docs.

Change this:

To this:

PARSE ERRORS:

This implies that the code contains a syntax error. The validator and web devices can’t process it.

On line 231 you have a media query inside curly braces. You left off the closing } for your media query.

Change this:

@Media (max-width: 640px) {

.figure-gallery.width50 {

width: 100%!important; }

</style>

To this:

@Media (max-width: 640px) {

.figure-gallery.width50 {width: 100% !important; }

}

</style>

Going forward, I invite you to put your coding questions into Google Gemini AI. It’s very good at identifying problems and explaining what needs to be changed.

Good luck with your project.

Nancy OShea

Correct answer

Community Expert

TRAILING SLASHES />

In HTML 5 documents, we no longer use trailing slashes at the end of <img> tags.

That’s a holdover from earlier XHTML docs.

Change this:

To this:

PARSE ERRORS:

This implies that the code contains a syntax error. The validator and web devices can’t process it.

On line 231 you have a media query inside curly braces. You left off the closing } for your media query.

Change this:

@Media (max-width: 640px) {

.figure-gallery.width50 {

width: 100%!important; }

</style>

To this:

@Media (max-width: 640px) {

.figure-gallery.width50 {width: 100% !important; }

}

</style>

Going forward, I invite you to put your coding questions into Google Gemini AI. It’s very good at identifying problems and explaining what needs to be changed.

Good luck with your project.

Nancy O'Shea— Product User & Community Expert

I

ingo9Author

Known Participant

Thank you Nancy! Gemini works very well and all remaining issues have now been solved. So,

you can close this thread now. Ingemar

Nancy OShea

Community Expert

Gemini works very well and all remaining issues have now been solved.

=======

Great! Glad to hear it.

Come back any time you need help with Dreamweaver.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Your background image repeats on large devices which doesn’t look professional.

For a more polished appearance, use CSS background-size:cover and no-repeat. This will scale your background-image more appropriately.

/* Ensure the body and html elements cover the full viewport height */
html, body {
  height: 100%;
  margin: 0 auto;/** optional page centering **/
  padding: 0;
}

body {
  background-image: url("your-BGimage.jpg");
  background-color: #516113; /** color to compliment image **/ 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; /** optional, keeps image fixed during scroll **/
}

Hope that helps.

Nancy O'Shea— Product User & Community Expert

I

ingo9Author

Known Participant

Nancy, Feb 28

Thanks for very useful tips re background!

And the link to W3-Validation because when I tried it myself:

I gave up tracking the reason and used your link to W3 which works fine.:

Nu Html Checker

This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change

Showing results for https://www.saevfors.se/web_26_contact.html (checked with vnu 26.2.26)

Checker Input

Showsourceoutlineimage reporterrors & warnings only

Check byaddressfile uploadtext input

Use the Message Filtering button below to hide/show particular messages, and to see total counts of errors and warnings.

Message Filtering

Error: CSS: Parse Error.

At line 231, column 2

0%!important;↩}↩</style>↩ <
Error: CSS: Parse Error.

At line 231, column 2

0%!important;↩}↩</style>↩ <
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 255, column 1; to line 255, column 82

de"> ↩<img src="/images/A2-SEC.jpg" width="250" height="343" alt="CAD" class="flt_rgt"/> ↩ <h
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 274, column 3; to line 274, column 96

/p>↩ ↩↩ <img src="/images/Home_page_bckgr.jpg" alt="forest" width="350" height="245" class="flt_lft"/>
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 280, column 3; to line 280, column 91

figure>↩ <img src="/images/Ing_contact_page.jpg" alt="" width="100" height="125" class="flt_rgt"/><br>↩
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 294, column 15; to line 294, column 88

<figure><img src="/images/Truss_protot.jpg" width="600" height="144" alt="truss"/>↩
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 300, column 32; to line 300, column 141

lft"> <img src="/images/Buckling_prevention_in_L-shape_column.JPG" alt="" width="200" height="149" class="flt_lft"/>↩
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 311, column 4; to line 311, column 70

igure>↩ <img src="/images/cluster.jpg" width="77" height="103" alt="vide"/> <img
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 311, column 72; to line 311, column 144

="vide"/> <img src="/images/Wall-element.jpg" width="58" height="99" alt="module"/> <img
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 311, column 146; to line 311, column 216

module"/> <img src="/images/Honeycomb_wall.jpg" width="132" height="100" alt=""/> <img
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 311, column 218; to line 311, column 286

alt=""/> <img src="/images/Ext_small.png" width="86" height="100" alt="wall"/>↩ <
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 312, column 5; to line 312, column 76

ll"/>↩ <img src="/images/Door-frame.jpg" width="121" height="100" alt="frame"/>↩<figc

Document checking completed.

Used the HTML parser.

Total execution time 500 milliseconds.

About this checker • Report an issue

However, some remarks remain mysterious to me:

231 Parse Error

255 Trailing slash (although referred … <img src="/images/A2-SEC.jpg"… rather on line 261)

274 Trailing slash

280 Trailing slash

300,311,312 Trailing slash

Remaining BIG QUESTION:

This website code looks now perfect in DW Live view. When launched on the internet all the text wrapping is gone! I know you all in Adobe Forum say that Floats are obsolete but, they are still used in the <figure> and Flex values? The text wrapping is nice for saving screen space and makes reading more appealing. The system with rows and columns results in a lot of wasted space and img size distortions. Or, is it a requirement for accommodating different screen sizes?

I also saw on your screen dump that you get the same “no wrapping of text” effect as me. So, no need to worry about my Chrome browser cache.

If you could detect what’s wrong with my code, I would be extremely grateful. /Ingemar

////// Current code validated Feb 28 attached to this post.////

<!doctype html>

<html lang="EN">
<head>
<meta charset="utf-8">
<title>web_26_new</title>
<link href="Ing_July_2021.css" rel="stylesheet" type="text/css">
<meta name="Bamboo prefab overview" content="Design solutions for bamboo combined with industrial construction materials">

<style>
* {
box-sizing: border-box;
position: static;
align-items: flex-start;
padding-top: 10px;
max-width: 1400px;
/*width: max 1200px;*/
}

body {

font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bolder;
/*background-color: #8EBC48;
color: #FFF;*/
background-image: url(images/Home_page_bckgr.jpg);
align-content: center;
}
html, body {
height: 100%;
margin: 0 auto;/** optional page centering **/
padding: 0;
}
body {

background-color: #516113; /** color to compliment image **/
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed; /** optional, keeps image fixed during scroll **/
}
/* Logo */ .logo {
width: 95%;
margin: 0 auto;
padding: 20px 0;
}
.logo h1 {
font-family: Vijaya;
font-size: 48px;
text-align: center;
margin: 0;
padding: 0;
color: aqua
} /* Wrapper */
.wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: #000;
width: 95%;
background-color: #FFF;
margin-top: 0;
margin-right: auto;
margin-left: 20px;
margin-bottom: 0;
}
/* Navigation */ .nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #9F0;
}
.nav li {
display: inline-block;
min-width: 8em;
margin: 0;
padding: 0;
text-align: center;
padding: 8px 15px;
}
.nav li a:link, .nav li a:visited {
background-color: rgb(204,153,51);
color: rgb(85, 85, 102);
display: block;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
-moz-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
margin: 0 0 0.2em 0;
}
.nav li a:hover {
background-color: rgba(255,153,0,0.8);
color: rgb(43, 43, 77);
padding-left: 8px;
}
a:visited {
background-color: #6F9;
}
/* Left side */ .left_side {
padding: 10px;
float: left;
width: 48%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
background-color: #EFEFE0;
font-style: normal;
font-weight: 300;
}
/* Right side */ .right_side {
padding: 10px;
float: right;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: #EFEFE0;
width: 48%;
font-weight: lighter;
}
right_side img {
max-width: 100%;
}

/* footer */

.footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #003;
background-color: #C96;
font-style: italic;
text-align: center;
padding: 15px;
} /* Clear floats */
.clear {
clear: both;
}
.nav li a {
}
.wrapper .left_side p {
}
.caption_1 {
}
.caption_honeycomb {
padding: 10px;
width: 200px;
}
.wrapper .right_side figure {
margin: 10px;
padding-top: 10px;
}

/*Smartphone and tablet*/ @media screen and (max-width:768px) {
.left_side {
float: none;
width: 100%;
background-color: #F7F782;
}
.right_side {
float: none;
width: 100%;
background-color: #DFEAF0;
}
}
.fl {
}
.flt_rgt {
}
</style>
<style>
/* Container for the whole figure */
.figure-gallery {
max-width: 1000px;
margin: 2rem auto;
padding: 1rem;
border: 1px solid #ddd;
box-sizing: border-box;
height: 300px;
}
@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}
}
@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}
}
/* Images row */
.figure-gallery .images {
display: flex;
gap: 1rem;
flex-wrap: nowrap; /* always 3 in a row on large screens */
width: 100%;
box-sizing: border-box;
}
.figure-gallery .images img {
flex: 1 1 0;
min-width: 0; /* prevents flex overflow */
max-width: 100%;
height: auto;
display: block;
border: 1px solid #ccc;
}
/* Stack images vertically on smaller screens */
/* you can dapat the 640 to your own needs */
@Media (max-width: 640px) {
.figure-gallery .images {
flex-direction: column;
}
}
/* Caption text */
.figure-gallery figcaption {
margin-top: 1rem;
}
.figure-gallery figcaption h2 {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
}
.figure-gallery figcaption p {
margin: 0;
line-height: 1.5;
}
/* Small screens */
@Media (max-width: 768px) {
.figure-gallery .images {
justify-content: center;
}
@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}
</style>
</head>

<body>
<div class="logo"><h1>Saevfors Consulting</h1></div>
<div class="wrapper">

<ul class="nav margin-left:30px;">

<li><a href="index.html" title="Rationale" target="_blank">Rationale</a></li>
<li><a href="web_26_contact.html" title="Contact 2026" target="_blank">Contact 2026</a></li>
<li><a href="Bamboo.html">Bamboo</a></li>
<li><a href="Archive.html">Archives</a></li>
<li><a href="Multistory.html">Multistory</a></li>
<li><a href="Parametrics.html">Parametrics</a></li>
<li><a href="Space_Frames.html">Space Frame Structures</a></li>
<li><a href="Structural_Bamboo.html" title="Structural Bamboo" target="_blank">Structural Bamboo</a></li>
</ul>

</div>
<div class="clear"></div>

<div class="left_side">
<img src="/images/A2-SEC.jpg" width="250" height="343" alt="CAD" class="flt_rgt"/>
<h1> BambooPrefab! </h1> <p><span style="font-size: 18px">Time for change! </span>This web site closing later this year, now focusing on:</p>

<p><span><strong>Bamboo Technical Detailing:</strong></span></p>
<ul>
<li><span style="font-weight: 600">Conflicts with industrial/planar materials.</span></li>
<li><strong>Dimensional standards</strong></li>
<li><strong>Template rigs for large scale production.</strong></li>
<li><strong>Computerized tools (CNC, 3Dprint etc)</strong></li>
</ul>
<p><em> Previously made research and development on this site can still be sourced under the Archive tabs</em></p>

<img src="/images/Home_page_bckgr.jpg" alt="forest" width="350" height="245" class="flt_lft"/>
<p>The natural features of bamboo given by nature make each individual culm unique:
often curved, more or less tapered, sometimes with oval or irregular section, varying inter-node lengths… The strength properties of tension and compression can vary considerably according to the different 1000+ bamboo species.
Matching bamboo with planar and rectilinear materials <em><strong>is therefore a huge challenge</strong></em>. Industrialization and modular design necessary for prefabrication become virtually impossible without intermediate steps to circumvent these conflicts.</p>

<figure>
<img src="/images/Ing_contact_page.jpg" alt="" width="100" height="125" class="flt_rgt"/><br>
<figcaption><em>Architect/Urban planner with longtime lnks to Africa, the Americas and SE Asia, specializes in innovative building technologies for low income regions.</em></figcaption>
</figure>
<p class="flt_rgt"> ingemar@saevfors.se </p>

<p>Kallangsvag 73, 18144 Lidingo, Sweden  +46 703936761       www.saevfors.se</p>

</div>

<div class="right_side">
<p><strong>PREFAB IN FOCUS NOW</strong>: <em style="font-weight: bold">The daunting perspective of housing another two-three billion people until 2050 on the planet is now further exacerbated by the fast climate change! </em> </p>
<em> <strong> WEBSITE UNDER UNDER REORGANIZATION  RIGHT NOW, A FEW EXAMPLES OF PREFAB ADAPTATIONS COMING UP:</strong></em>

<figure><img src="/images/Truss_protot.jpg" width="600" height="144" alt="truss"/>
<figcaption>Bamboo trusses and purlins</figcaption>
</figure>

<a href="/Roofs.html" target="_blank">Roof structures...</a> <strong>RECENTLY OPENED ON-LINE</strong>            
<figure class="flt_lft"> <img src="/images/Buckling_prevention_in_L-shape_column.JPG" alt="" width="200" height="149" class="flt_lft">
<figcaption>
<p><strong>Urban multi-story bamboo housing</strong></p>
<p><em> L-shaped column with buckling prevention for 3-storeys in cooperation with KTH, Technical University, Stockholm</em> <br>
The great CO2 sink capacity makes fast-growing bamboo an obvious large scale option for construction materials. Multi-story - at a reasonable density, because of the never-ending suburban sprawl with more transport nightmares paralyzing the economy.</p>
</figcaption>
</figure>
<a href="/Multistory.html" target="_blank">Multistory housing....</a>

<figure>
<img src="/images/cluster.jpg" width="77" height="103" alt="vide"/> <img src="/images/Wall-element.jpg" width="58" height="99" alt="module"/> <img src="/images/Honeycomb_wall.jpg" width="132" height="100" alt=""/> <img src="/images/Ext_small.png" width="86" height="100" alt="wall"/>
<img src="/images/Door-frame.jpg" width="121" height="100" alt="frame"/>
<figcaption style="text-align:right">
Honeycomb modular wall system .............................. Resolve conflict industrial frame/bamboo curvature.
</figcaption>
</figure>
<a href="/Wall-modules.html" target="_blank">Wall modules... </a><a href="/Conflict-frames.html" target="_blank">Conflict frames...</a>
</div>
<div class="clear"></div>
<div class="footer">
<p style="color: #3307E4; font-weight: bolder; align-content: flex-start; text-align: center;"> 28 Feb 2026 | Copy with reference to www.saevfors.se | ingemar@saevfors.se | All rights reserved</p>
</div>
</body>
</html>

Nancy OShea

Community Expert

Fix your CODE ERRORS as reported below.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.saevfors.se%2Fweb_26_contact.html

Even small code errors can cause ripples on various web devices.

Get into the habit of checking your code often with these Code Validation Tools. Fix reported problems before they morph into much larger ones.

HTML: https://validator.w3.org/

CSS: https://jigsaw.w3.org/css-validator/

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Please post a link to the actual online web page for us to examine.

It could be that you increased your browser’s ZOOM settings to make the page appear larger.

Ctrl + 0 (zero) should make it normal size again.

Ctrl ++ makes it bigger.

Ctrl + - makes it smaller.

Nancy O'Shea— Product User & Community Expert

I

ingo9Author

Known Participant

Tried Ctrl_- but no success, unfortuantely,

The link:

https://www.saevfors.se/web_26_contact.html

Nancy OShea

Community Expert

This is invalid code.

width: max 1200px;

Change it to this:

max-width: 1200px;

You’ll also need other adjustments. This image is far too wide to fit the container.

https://www.saevfors.se/images/Truss_protot.jpg

.right_side img {max-width: 100%;}

Hope that helps.

Nancy O'Shea— Product User & Community Expert

I

ingo9Author

Known Participant

Code used, see earlier message:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web_26_new</title>
<link href="Ing_July_2021.css" rel="stylesheet" type="text/css">
<meta name="Bamboo prefab overview" content="Design solutions for bamboo combined with industrial construction materials">

<style>

* {
box-sizing: border-box;
position: static;
align-items: flex-start;
padding-top: 10px;
/*width: max 1200px;*/
}
.wrapper .left_side p {
font-weight: normal;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
body {
background-repeat: repeat;
font-family: "Times New Roman", Times, serif;

font-size: 18px;
font-weight: bolder;
/*background-color: #8EBC48;
color: #FFF;*/
background-image: url(images/Home_page_bckgr.jpg);
}
/* Logo */ .logo {
width: 95%;
margin: 0 auto;
padding: 20px 0;
}
.logo h1 {
font-family: Vijaya;
font-size: 48px;
text-align: center;
margin: 0;
padding: 0;
color: aqua
} /* Wrapper */
.wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: #000;
width: 95%;
background-color: #FFF;
margin-top: 0;
margin-right: auto;
margin-left: 20px;
margin-bottom: 0;
}
/* Navigation */ .nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #9F0;
}
.nav li {
display: inline-block;
min-width: 8em;
margin: 0;
padding: 0;
text-align: center;
padding: 8px 15px;
}
.nav li a:link, .nav li a:visited {
background-color: rgb(204,153,51);
color: rgb(85, 85, 102);
display: block;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
-moz-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
margin: 0 0 0.2em 0;
}
.nav li a:hover {
background-color: rgba(255,153,0,0.8);
color: rgb(43, 43, 77);
padding-left: 8px;
}
a:visited {
background-color: #6F9;
}
/* Left side */ .left_side {
padding: 10px;
float: left;
width: 48%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
background-color: #EFEFE0;
font-style: normal;
font-weight: 300;
}
/* Right side */ .right_side {
padding: 10px;
float: right;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: #EFEFE0;
width: 48%;
font-weight: lighter;
} /* footer */
.footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #003;
background-color: #C96;
font-style: italic;
text-align: center;
padding: 15px;
} /* Clear floats */
.clear {
clear: both;
}
.nav li a {
}
.wrapper .left_side p {
}
.caption_1 {
}
.caption_honeycomb {
padding: 10px;
width: 200px;
}
.wrapper .right_side figure {
margin: 10px;
padding-top: 10px;
}

/*Smartphone and tablet*/ @media screen and (max-width:768px) {
.left_side {
float: none;
width: 100%;
background-color: #F7F782;
}
.right_side {
float: none;
width: 100%;
background-color: #DFEAF0;
}
}
.fl {
}
.flt_rgt {
}
</style>
<style>
/* Container for the whole figure */
.figure-gallery {
max-width: 1000px;
margin: 2rem auto;
padding: 1rem;
border: 1px solid #ddd;
box-sizing: border-box;
height: 300px;
}

@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}

}
@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}
}
/* Images row */
.figure-gallery .images {
display: flex;
gap: 1rem;
flex-wrap: nowrap; /* always 3 in a row on large screens */
width: 100%;
box-sizing: border-box;
}
.figure-gallery .images img {
flex: 1 1 0;
min-width: 0; /* prevents flex overflow */
max-width: 100%;
height: auto;
display: block;
border: 1px solid #ccc;
}

/* Stack images vertically on smaller screens */
/* you can dapat the 640 to your own needs */
@Media (max-width: 640px) {
.figure-gallery .images {
flex-direction: column;
}
}
/* Caption text */
.figure-gallery figcaption {
margin-top: 1rem;
}
.figure-gallery figcaption h2 {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
}
.figure-gallery figcaption p {
margin: 0;
line-height: 1.5;
}

/* Small screens */
@Media (max-width: 768px) {
.figure-gallery .images {
justify-content: center;
}
}
}

@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}
}
</style>
</head>

<body>
<div class="logo"><h1>Saevfors Consulting</h1></div>
<div class="wrapper">

<ul class="nav margin-left:30px;">

<li><a href="index.html"title="Rationale" target="_blank">Rationale</a></li>
<li><a href="web_26_contact.html" title="Contact 2026" target="_blank">Contact 2026</a></li>
<li><a href="Bamboo.html">Bamboo</a></li>
<li><a href="Archive.html">Archives</a></li>
<li><a href="Multistory.html">Multistory</a></li>
<li><a href="Parametrics.html">Parametrics</a></li>
<li><a href="Space_Frames.html">Space Frame Structures</a></li>
<li><a href="Structural_Bamboo.html" title="Structural Bamboo" target="_blank">Structural Bamboo</a></li>
</ul>

</div>
<div class="clear"></div>

<div class="left_side"> <figure>
<img src="/images/A2-SEC.jpg" width="250" height="343" alt="CAD"margin=10px" class="flt_rgt"/> </figure>
<h1> BambooPrefab! </h1> <p><span style="font-size: 18px">Time for change! </span>This web site closing later this year, now focusing on: </p>

<p><span><strong>Bamboo Technical Detailing:</strong></span></p>
<ul>
<li><span style="font-weight: 600">Conflicts with industrial/planar materials.</span></li>
<li><strong>Dimensional standards</strong>.</li>
<li><strong>Template rigs for large scale production.</strong></li>
<li><strong>Computerized tools (CNC, 3Dprint etc)</strong></strong></li>




</ul>
<p><em> Previously made research and development on this site can still be sourced under the Archive tabs</em>.</p>

<img src="/images/Home_page_bckgr.jpg" alt="" width="350" height="245" class="flt_lft" margin="0" />
<p>The natural features of bamboo given by nature make each individual culm unique:
often curved, more or less tapered, sometimes with oval or irregular section, varying inter-node lengths… The strength properties of tension and compression can vary considerably according to the different 1000+ bamboo species.<br>
Matching bamboo with planar and rectilinear materials <em><strong>is therefore a huge challenge</strong></em>. Industrialization and modular design necessary for prefabrication become virtually impossible without intermediate steps to circumvent these conflicts.</p>
<figure>
<img src="/images/Ing_contact_page.jpg" alt="" width="100" height="125" margin=10px" class="flt_rgt"/><br>
<figcaption><p><em>Architect/Urban planner with longtime lnks to Africa, the Americas and SE Asia, specializes in innovative building technologies for low income regions.</em></p></figcaption>
</figure>
<h3 class="flt_rgt">ingemar@saevfors.se </h3>

<p>Kallangsvag 73, 18144 Lidingo, Sweden          +46 703936761       www.saevfors.se</p>

</div>

<div class="right_side">
<p><strong>PREFAB IN FOCUS NOW</strong>: <em style="font-weight: bold">The daunting perspective of housing another two-three billion people until 2050 on the planet is now further exacerbated by the fast climate change! </em> </p>
<em> <strong> WEBSITE UNDER UNDER REORGANIZATION  RIGHT NOW, A FEW EXAMPLES OF PREFAB ADAPTATIONS COMING UP:</strong></em>

<figure><img src="/images/Truss_protot.jpg" width="600" height="144" alt=""/>
</figure> <figcaption>Bamboo trusses and purlins</figcaption>

<a href="/Roofs.html" target="_blank">Roof structures...</a>
<figure class="flt_lft"> <img src="/images/Buckling_prevention_in_L-shape_column.JPG" alt="" width="200" height="149" class="flt_lft"/></figure>
<figcaption> <p><strong>Urban multi-story bamboo housing</strong></p>
<p><em> L-shaped column with buckling prevention for 3-storeys in cooperation with KTH, Technical University, Stockholm</em> <br>

The great CO2 sink capacity makes fast-growing bamboo an obvious large scale option for construction materials. Multi-story - at a reasonable density, because of the never-ending suburban sprawl with more transport nightmares paralyzing the economy.</p>
</figcaption>

<a href="/Multistory.html" target="_blank">Multistory housing....</a>

<figure>
<img src="/images/HONEYCOMB CLUSTER.jpg" width="77" height="100" alt="cluster"/>
<img src="/images/Wall element (2).jpg" width="58" height="100" alt=""/>
<img src="/images/Honeycomb_wall.jpg" width="132" height="100" alt=""/> <img src="/images/Ext_small.png" width="86" height="100" alt=""/>
<img src="/images/Door-frame.jpg" width="121" height="100" alt=""/>
<figcaption style="text-align:right">
Honeycomb modular wall system .............................. Resolve conflict industrial frame/bamboo curvature.
</figcaption>
</figure>
<a href="/Wall modules.html" target="_blank">Wall modules... </a><a href="/Conflicts frames.html" target="_blank">Conflict frames...</a>




</div>

<div class="clear"></div>
<div class="footer">
<p align="center" style="color: #3307E4; font-weight: bolder;"> 25 Feb 2026 | Copy with reference to www.saevfors.se | ingemar@saevfors.se | All rights reserved</p>

</div>
</body>
</html>

I

ingo9Author

Known Participant

26 Feb Nancy

It did help regarding the sizing; But not for the wrapping of text, which was perfect just before, with the recent method <figure> <figcaption> etc. Now:

https://www.saevfors.se/web_26_contact.html

I copy the code again in case some new mistakes can be detected. It seems as if an important character is missing?

Thanks, Ingemar

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web_26_new</title>
<link href="Ing_July_2021.css" rel="stylesheet" type="text/css">
<meta name="Bamboo prefab overview" content="Design solutions for bamboo combined with industrial construction materials">

<style>

* {
box-sizing: border-box;
position: static;
align-items: flex-start;
padding-top: 10px;
max-width: 1200px;
/*width: max 1200px;*/
}
.wrapper .left_side p {
font-weight: normal;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
body {
background-repeat: repeat;
font-family: "Times New Roman", Times, serif;

font-size: 18px;
font-weight: bolder;
/*background-color: #8EBC48;
color: #FFF;*/
background-image: url(images/Home_page_bckgr.jpg);
}
/* Logo */ .logo {
width: 95%;
margin: 0 auto;
padding: 20px 0;
}
.logo h1 {
font-family: Vijaya;
font-size: 48px;
text-align: center;
margin: 0;
padding: 0;
color: aqua
} /* Wrapper */
.wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: #000;
width: 95%;
background-color: #FFF;
margin-top: 0;
margin-right: auto;
margin-left: 20px;
margin-bottom: 0;
}
/* Navigation */ .nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #9F0;
}
.nav li {
display: inline-block;
min-width: 8em;
margin: 0;
padding: 0;
text-align: center;
padding: 8px 15px;
}
.nav li a:link, .nav li a:visited {
background-color: rgb(204,153,51);
color: rgb(85, 85, 102);
display: block;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
-moz-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
margin: 0 0 0.2em 0;
}
.nav li a:hover {
background-color: rgba(255,153,0,0.8);
color: rgb(43, 43, 77);
padding-left: 8px;
}
a:visited {
background-color: #6F9;
}
/* Left side */ .left_side {
padding: 10px;
float: left;
width: 48%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
background-color: #EFEFE0;
font-style: normal;
font-weight: 300;
}
/* Right side */ .right_side {
padding: 10px;
float: right;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: #EFEFE0;
width: 48%;
font-weight: lighter;
}
right_side img {
max-width: 100%;
}

/* footer */

.footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #003;
background-color: #C96;
font-style: italic;
text-align: center;
padding: 15px;
} /* Clear floats */
.clear {
clear: both;
}
.nav li a {
}
.wrapper .left_side p {
}
.caption_1 {
}
.caption_honeycomb {
padding: 10px;
width: 200px;
}
.wrapper .right_side figure {
margin: 10px;
padding-top: 10px;
}