October 26, 200817 yr Hi all... I've been working on this page and needed to put 3 DIVs next to each other, each div contains an image paragraph and a text paragraph below it, I wanted the 3 divs to display next to each other covering the width of the main wrapper. I got it to display right within Dream Weaver, but it doesn't display as it should be in any browser. I tried the following and failed DIVs with "inline" display DIVs with much smaller total width than the main wrapper DIVs with small width and small margins Spans All failed on IE and FF, please check the attached diagram to see wt I'm talking about. Any hint for how to do this properly and wt am I doing wrong?
October 26, 200817 yr NEVER!!!! trust what dreamweaver shows you, as you have just said it is showing you it wrong, always check on some browsers so you can see how it will look . Could we see the site or the code as we need to know what you are doing to see where you are going wrong. Also have you tried floating them left or setting their position to relative?
October 26, 200817 yr Because there is no info about the width's etc. of those div's its hard to say but there might be some problems with width, margin/paddings when it comes to the total width (750px). And yeah what comes to DW, its good to make things but... As said, code and css info would help a lot with this! Cheers: - Tuittu
October 27, 200817 yr Author I'm sorry for my late reply, I had to re-build the page for your review, I deleted it earlier after frustration. This is the code and CSS I used for the page, I could upload the page somewhere for your review if needed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Sam Trade</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .thumbnails { margin: 18px; display: inline; } #flash { margin-left: 137px; margin-top: 348px; display: inline; position: absolute; } #site_preview { font-family: Arial, Helvetica, sans-serif; height: 757px; visibility: 750; } .diagram { width: 240px; position: relative; } --> </style> <link href="../clients.css" rel="stylesheet" type="text/css"> </head> <body> <div id="main"> <div id="header"> <h2>Sam Trade <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="174" height="100" class="logo"> <param name="movie" value="../logo_clients.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#000000"> <embed src="../logo_clients.swf" width="174" height="100" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000"></embed> </object> </h2> <hr></div> <div class="content"> <div style= "margin-bottom: 50px"> <p>Page: Things We Do > Multipurpose Sings<img src="samtrade_signs.jpg" alt="Things We Do > Multipurpose Sings" width="750" height="687"></p> <div class="diagram"><p> <img src="menu01.jpg" ></p><p>in-active buttons</p></div> <div class="diagram"><p> <img src="menu02.jpg" ></p><p>Mouse-over/Things we do</p></div> <div class="diagram"><p> <img src="menu03.jpg" ></p><p>Things we do buttons / Mouse-over</p></div> </div> </div> </div> </body> </html> This is the CSS part responsible for the 3 DIVs } .diagram { width: 240px; position: relative; } and these are the 3 DIVS <div class="diagram"><p> <img src="menu01.jpg" ></p><p>in-active buttons</p></div> <div class="diagram"><p> <img src="menu02.jpg" ></p><p>Mouse-over/Things we do</p></div> <div class="diagram"><p> <img src="menu03.jpg" ></p><p>Things we do buttons / Mouse-over</p></div> You can review the page here As I mentioned in my first post I've tried using <span> instead of <div>, tried relative and absolute positioning, inline display... all failed I'm aware of the false DW preview, I always check browsers, from my Graphic Design background I thought DW had some sort of render engine to render the page just like a browser would... silly me I'm also aware that I'm brand new to this , so there might be some mistakes in my code, I would be glad if you point them out for me to avoid them in the future.. Thank you in advance
October 27, 200817 yr Hi Something like this might do it. .diagram { float:left; padding-right: 10px; width: 240px; position: relative; } to line them up perfectly you may have to give each box its own class eg .diagram, .diagram1, .diagram2 Pat
October 27, 200817 yr Author Yes, that worked like magic , thank you a million Pat you saved me and I learned something new, I never used float so much seems to give some weird results sometimes, but this time it worked so well. But now i checked couple of tutorials about so I can know more about "float". Yet I wonder whey didn't the <span> tag work or inline display?
Create an account or sign in to comment