The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Width, Don't understand how to set the width of a <div>
Brian Chandler
post Feb 10 2008, 08:12 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,298
Joined: 31-August 06
Member No.: 43



I've added the following chunk of stuff near the top of the following page:

http://imaginatorium.org/shop/teppeix.htm

Here it is: there's a panorama picture, and some text under it:

CODE

<div style="width 490px; margin: auto; padding:0; border:thin solid green;">
<center><table border=0 cellspacing=0 cellpadding=0><tr>
<td><a href="#E56011"><img src="pics/e56011.jpg" alt="left" style="border:none; padding:0; margin:0"></a></td>
<td><a href="#E56012"><img src="pics/e56012.jpg" alt="right" style="border:none; padding:0; margin:0"></a></td>
</tr></table></center>

<p style="text-align:center">Plaza Mayor</p>

<p>The two puzzles below, Plaza Mayor, <a href="#E56011">left</a> and <a href="#E56012">right</a> have been created with the artist's approval as separate parts of the original image, but the puzzles fit together exactly to create this panoramic view.
</div>


The panorama actually consists of two images abutted left to right. A crude old table seems to do this reliably and robustly, but I would be interested to know if there is a neater way.

Then I decided, since there isn't much text to put it below the image(s), as though a caption. So I put a <div> round the whole thing, and set width: to slightly more than the width of the two images, which are of fixed sized, so it's in pixels. But both Opera and Firefox appear to ignore the width: entirely, and make the <div> the available width of the page. I must be missing something extremely major, because I find width: works less than half of the time. Is there an incantation I don't know?

(The green box is only for testing of course. I supppppoooose, it wouldn't be the case that "width" is ignored if inside a green box?)

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 10 2008, 02:38 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,291
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Maybe "width: 490px" would be more effective than "width 490px".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Feb 11 2008, 05:13 AM
Post #3


Jocular coder
********

Group: Members
Posts: 2,298
Joined: 31-August 06
Member No.: 43



QUOTE(Darin McGrew @ Feb 11 2008, 04:38 AM) *

Maybe "width: 490px" would be more effective than "width 490px".


Aha! How right you are... thanks

That fixes the immediate problem, but I would still be interested in a neater, but robust way to stick two images side by side.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dr Z
post Feb 11 2008, 09:35 PM
Post #4


Advanced Member
****

Group: Members
Posts: 221
Joined: 23-August 06
Member No.: 11



QUOTE(Brian Chandler @ Feb 11 2008, 02:13 AM) *

QUOTE(Darin McGrew @ Feb 11 2008, 04:38 AM) *

Maybe "width: 490px" would be more effective than "width 490px".


Aha! How right you are... thanks

That fixes the immediate problem, but I would still be interested in a neater, but robust way to stick two images side by side.


A quick fix that comes to mind is that you combine the the two images into one - say in Photoshop, and serve it as single image file.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Feb 11 2008, 11:15 PM
Post #5


Jocular coder
********

Group: Members
Posts: 2,298
Joined: 31-August 06
Member No.: 43



QUOTE(Dr Z @ Feb 12 2008, 11:35 AM) *

QUOTE(Brian Chandler @ Feb 11 2008, 02:13 AM) *

QUOTE(Darin McGrew @ Feb 11 2008, 04:38 AM) *

Maybe "width: 490px" would be more effective than "width 490px".


Aha! How right you are... thanks

That fixes the immediate problem, but I would still be interested in a neater, but robust way to stick two images side by side.


A quick fix that comes to mind is that you combine the the two images into one - say in Photoshop, and serve it as single image file.


But that's not a solution in this particular case, where the two images are already appearing separately on the same page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john f
post Feb 12 2008, 12:56 PM
Post #6


Member
***

Group: Members
Posts: 47
Joined: 23-August 06
Member No.: 10



I am using inline styles here. Possibly you could float one image to left and one to right within the div. Then clear the images. Something along the following lines.
<div style="margin:auto;display:block;width:480px;border:solid #0f0;text-align:center"><img style="float:left;width:240px;display:block" src="jap1.jpg" alt="image" /><img style="float:right;width:240px;display:block" src="jap2.jpg" alt="image" />
<h1 style="text-align:center">Plaza Mayor</h1>
<p style="clear:both;text-align:left">The two puzzles below, Plaza Mayor, left and right have been created with the artist's approval as separate parts of the original image, but the puzzles fit together exactly to create this panoramic view.</p></div>

I have not included your links here. Floating one to left and other to right might prevent 3px problem in explorer.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 12 2008, 01:10 PM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,291
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



FWIW, I don't see a real problem using a table here. The two images have a relationship to each other that requires them to be on the left and right of each other. A table is fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd March 2019 - 08:01 PM