display inline ????

hessodreamy · #1 (**permalink**) Oct 7th, 2005, 16:16

I have a bunch of wrapper divs containing various positioned elements, and I would like to lay the wrappers out side by side. using display: inline worked fine in IE but not in firefox and not after I added the doctype to the page. Now, using display:inline sends everything all over the shop! (stop me if i'm getting too technical)

You can see these working here : www.hygienesuppliesdirect.com/newprod.htm
And like I said, I need the 2 boxes (and some more) side by side.

Here's the html:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">

<div id="main1" style="width:200px; height:110px; border:1px solid slategray; font-family:arial;margin:5px; padding:3px; position:relative;display:inline ">

 
  <div style="position:absolute; top:-1px;left:-1px;">[img]images/topleft.gif[/img]</div>
  <div style="position:absolute; top:-1px;right:-1px;">[img]images/topright.gif[/img]</div>
  <div style="position:absolute; bottom:-1px;left:-1px;">[img]images/botleft.gif[/img]</div>
  <div style="position:absolute; bottom:-1px;right:-1px;">[img]images/botright.gif[/img]</div>
  
  <div style="position:relative">[img]images/summarypics/12843.jpg[/img]</div>
    <div style="position:absolute; bottom:-20px;left:-20px">[img]images/starburst.gif[/img]</div><div style="position:absolute; bottom:-2px;left:-2px; color:white; font-weight:bold;font-size:10pt;">£20</div>
  
  <div style="position:absolute; top:3px;left:50px; width:145px;">
    <div style="text-align:center; color:#800080; font-size:13pt; font-weight:bold;line-height:0.75em;">Catering Urn 15lt</div>
    <div style="text-align:left; font-size:9pt; color:red; font-weight:bold; padding-left:20px;">£25.99 <span style="color;black; font-size:7pt">(£27.99 inc. VAT)</span></div>
    <div style="text-align:center; font-size:11pt; font-weight:bold; color: #611EDC;padding-left:20px;">Only 20 Left!</div>
    <div style="text-align:left; font-size:8pt; color:#7777FF; padding-left:20px;">more info on this item...</div>
    <div style="text-align:left; font-size:8pt; color:#7777FF; padding-left:20px;">more Catering urns...</div>
  </div>
  <div style="position:absolute; bottom:3px; right:10px;">[img]images/buybutton.gif[/img]</div>
</div>

muneepenee · #2 (**permalink**) Oct 7th, 2005, 18:26

1. yu want stuff side-bi-side...yuze a tabel.
2. the "gurus" sae "display:inline" is a krutch dezined tu get around IE bug
IE oft du thangs its wae, not the konsortium wae.
the guru "solution" is...dont yuze IE. (not very yuzeful)

Pheonix · #3 (**permalink**) Oct 8th, 2005, 01:43

try float:left;

rpgfan3233 · #4 (**permalink**) Oct 8th, 2005, 05:51

Quote:

Originally Posted by Pheonix

try float:left;

Also, after you float them all, your next opening tag may require a "clear: left" (or "clear: both" to be safe/lazy :-P).

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
<li> problem :: How to make appear list-style-image while choosing display:inline	sayamish	Web Page Design	2	Oct 21st, 2007 05:19
Overriding display:inline-block	gazzou	Web Page Design	0	Aug 27th, 2007 12:03
inline lists and rollovers	Accurax	Web Page Design	10	Mar 29th, 2007 01:27
Inline div	Echilon	Web Page Design	0	Feb 3rd, 2006 16:06

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
display inline ????