Problem with horizontal layout

HTML & CSS
1

On most of my detail pages, I often use side-by-side pictures:
http://www.vintagetextile.com/new_page_610.htm

using code like

<p><img src=“images/Couture/7371b.jpg” width=“800” height=“1170” class=“tall” />  <img src=“images/Couture/7371d.jpg” alt=“” name=“back” width=“800” height=“1170” class=“tall” id=“back” /></p>

It works well as long as the viewer does not increase his/her font size in the browser, when the pictures no longer appear side-by-side but rather stacked vertically, which I don’t intend.
As you can see from the style sheet below, the relevant CSS rules seem to be

body{width: body{margin: and
#main{margin-right:12%;}
since the bulk of the page’s code is contained within a <div> with id=“main”.

I have tried increasing all of the above parameters but they don’t give any leeway allowing the user to even slightly increase font size and still retain the proper side-by-side formatting of pictures.
Thanks in advance for your expert help.

body{width:86%;
margin:2% 3.5% 0 4.5%;
padding:0;
border:0;
color:#000;
background-color:#fff;
font:medium/1.2 Verdana, Tahoma, Helvetica, sans-serif;}
.bi{font-weight:bold;}
.lg{font-size:large;}
.lgbi{font-size:large;font-style:italic;font-weight:bold;}
.reserved{color:Red;font-weight:bold;background-color:#fff;}
#bronze-bottom{width:100%;margin:1.3em auto .5em auto;background:#fc6;height:1em;}
#cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.1 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
#cat-bottom a:link{color:#000;text-decoration:none;background-color:#fff;}
#cat-bottom a:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
#cat-bottom a:hover{color:red;text-decoration:none;background-color:#fff;}
#cat-bottom a.herelink:link,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;}
#main{margin-right:12%;}
a:link{color:#00f;background-color:#fff;}
a:visited{color:#939;background-color:#fff;}
a:hover{color:#f00;background-color:#fff;}
img{border:0;}
img.tall {width:400px;height:585px;}
img.wide {width:600px;height:500px;}
.bq{ width:80%;padding:.7em;font:italic medium/1.1 Georgia,Times,“Times New Roman”,serif;margin-left:1em;}
.cap {font-size: small;font-style:italic;}

2

The problem most likely stems from the use of a non breaking space between images. When the user enlarges his/her fonts the size of the NBS will also enlarge ( since it essentially is text).

try leaving out the NBS and spacing your images using (PIXEL UNITS!) padding or margin


<p class="img-shell-2"><img src="images/Couture/7371b.jpg" width="800" height="1170" class="tall" /><img src="images/Couture/7371d.jpg" alt="" name="back" width="800" height="1170" class="tall" id="back" /></p>

.img-shell-2 img + img { margin-left:15px;}

hope that helps

3
4

Hi Dresden:
Thanks for the interesting concept. What I like about the Sitepoint forums is that it attracts experts like yourself.

I added this rule to the governing stylesheet:
.img-shell-2 img + img { margin-left:15px;}

and modified the code as you suggested to this:

<p class=“img-shell-2”><img src=“images/Couture/7371b.jpg” width=“800” height=“1170” class=“tall” /><img src=“images/Couture/7371d.jpg” alt=“” name=“back” width=“800” height=“1170” class=“tall” id=“back” /></p>
<p class=“img-shell-2”><img src=“images/Couture/7371k.jpg” width=“800” height=“1170” class=“tall” /><img src=“images/Couture/7371p.jpg” alt=“” width=“800” height=“1170” class=“tall” /></p>

However, there was no improvement in the behaviour using FF. In fact, the appearance after a slight increase in font size was worse, as the vertically stacked pictures were no longer aligned. The 2nd picture was slightly to the right of the first (top) picture.

I should added that this problem appears in FF. In IE11, with or without your changes, there is reasonable leeway to increase font size without causing a problem. I wonder if this different browser behavior gives a clue to what is going on with FF.

Since I don’t have Chrome, I was wondering how Chrome treats my detail pages if you check
http://www.vintagetextile.com/new_page_610.htm

5

Hi,

I must be looking at the wrong thing as I don;t see any images dropping in Firefox when the text is resized (even to maximum). The only way I can make images drop is by closing the window until there is not enough room for 2 images side by side.

I’m sure I must be missing the obvious here :slight_smile:

6

Hi Paul:
I suppose that should be good news to me. However, whether I look at a detail page online with FF, just as you did, or do the same thing in browser preview in Dreamweaver, I unfortunately experience the phenomenon I described.

Since every FF user may have different settings, that may explain why we have different results when increasing font size in FF. BTW, when I do that in FF, I hold down “ctrl” and roll the middle wheel button forward one click.

7

Yep, it is the screen width. At less than about 1070px window width the images are dropping, due to the body-margins and the 12% margin-right of the #main container.
If the page width must be scalable, then the images have to scale too!

I should go for a centered page (otherwise a lot of empty white space on the right side); the images can scale down at smaller windows/devices with a width of 100% (or almost 50% in case of 2) and in the meantime a max-width (for large screens). Some additional elements have to be added as hooks for the css to get them centered for larger screens

For instance something like this:

8

Francky:
What a creative and brilliant accomplishment!
I assume you are professional web designer. After I implement your concept for the 1/23/14 update, I will want to contact you privately.
I have to implement your suggestions for 10 detail pages in the new update. Because code also has to change, I will leave all the old detail pages with the old “detail.css” and gradually replace them as those pages are taken down with the new, correct coding and styles.

A couple of questions.
You omitted img.tall {width:400px;height:585px;
I assume that was an oversight.

You have in the body rule:
max-width: 980px; Is that some kind of fail-safe mechanism?

In the code where two pictures are next to each other, for the first two pictures, in the <src code, you omitted the dimensions; but you had the dimensions with all the other .jpgs. Just an oversight?

I hope to implement this on 1/19-20.

My new detail_new.css

html {height: 100%;
padding-bottom: 1px; }
body { width: 75%;
max-width: 980px;
margin: 0 auto;
font:medium/1.2 Verdana, Tahoma, Helvetica, sans-serif; }
#main { margin: 0; }
.center,.images { text-align: center; }
img { max-width: 100%;
height: auto !important; }
.center img.tall { width: 100%;
max-width: 400px;
height: auto; }
.images span { display: inline-block;
overflow: hidden; }
.images .tall { float: left;
width: 49%;
max-width: 400px;
height: auto; }
.images .tall + img {float: right; }
.wordspace { word-spacing: 5em; }
.bi{font-weight:bold;}
.lg{font-size:large;}
.lgbi{font-size:large;font-style:italic;font-weight:bold;}
.reserved{color:Red;font-weight:bold;background-color:#fff;}
#bronze-bottom{width:100%;margin:1.3em auto .5em auto;background:#fc6;height:1em;}
#cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.1 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
#cat-bottom a:link{color:#000;text-decoration:none;background-color:#fff;}
#cat-bottom a:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
#cat-bottom a:hover{color:red;text-decoration:none;background-color:#fff;}
#cat-bottom a.herelink:link,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;}
a:link{color:#00f;background-color:#fff;}
a:visited{color:#939;background-color:#fff;}
a:hover{color:#f00;background-color:#fff;}
img{border:0;}
img.tall {width:400px;height:585px;}
img.wide {width:600px;height:500px;}
.bq{ width:80%;padding:.7em;font:italic medium/1.1 Georgia,Times,“Times New Roman”,serif;margin-left:1em;}
.cap {font-size: small; font-style: italic;}

9

Francky:
I have your design working fine. There is one huge practical glitch and wonder if you or any Dreamweaver expert would have an idea about this.
The new design works great online (or in DW browser preview). That should be good enough, since that is what the web will see. The problem is that in DW design view (DW CS 5.5), the page looks all wrong and is almost unusable.

Are there any changes in DW settings I can make that will retain image scaling but will appear correctly in DW design view?

10

Hi,

Unfortunately ‘Design View’ in DW is useless for CSS work and you should not rely on it at all I’m afraid. Design view was Ok about 12 years ago when everything was in tables with spacer gifs but since CSS has evolved the design view is less than worthless but for the simplest of tasks.

You should stay in code view all the time (as the code editor is very good) but then just preview the page in a real browser (or a number of browsers as there may be differences) at every few steps.

There is nothing you can do about this and I have yet to see anything more complicated than a few divs render correctly in design view and I’ve had versions of DW for about 14 years!

11

Thanks, Paul, that is what thought (feared) about DW Design View. I can work in code. It is just a question of discarding the crutch, Design View.
Just for the record, I will try to attach a screen view of my DW Design View of the page.

BTW, for a modern capable design view, is there a new, better web design program than DW that I should consider; or should I just buckle down and learn to edit in code?

12

Yes, just concentrate on the code as all the wysiwyg tools will lead you astray as most of them are in fact wysiwtf.

Once you get used to working in code view and previewing in a browsers things more or less fall into place because its you that’s doing it and not some mystical interface :slight_smile:

The DW code editor though is very good (but overpriced if all you want is the editor).

13

I am, as usual, very happy with the results at Sitepoint from experts like Francky, Dresden, and yourself.
Francky provided a truly briliant CSS solution. Your advice on sticking with code view in the future is appreciated.

14

I was wondering how I could adapt Francky’s scalable style sheet above plus the relevant HTML code to having 3 pictures side-by-side as on my home page: http://www.vintagetextile.com/
The relevant HTML code for two pictures:
<p class=“images”><span><img src=“images/Victorian/c436a.jpg” alt=“Pingat lace cape” width=“800” height=“1170” class=“tall” /><img src=“images/Victorian/c436h.jpg” width=“800” height=“1170” class=“tall” /></span>