Find solution
How to check which div is visible while scrolling?

AAaaggghhh - Whatever I do I can't get my Dreamweaver CS4 div tags to float next to each other?

  • I'm learning Dreamweaver CS4. I did the tutorial and came thru sweet. I've now applied that to my own webpage and things have come unstuck. I'm trying to have 3 sections underneath my main image. The left section is on it's own, the other two are part of another container, just like in the tutorial. I can get them to look right and sit right in the Design page, but when I click on Live or preview in a browser, the sections just list instead of sit next to each other. It's absolutely driving me bananas. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-… <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>it's doing my head in!!!</title> <link href="ISBG.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="column_container"> <div id="left_column"></div> <div id="right_column"></div> </div> <div id="main_image"></div> <div id="2ndleft"> <p><img src="images/Azul.png" width="186" height="122" /></p> <p>We do things</p> <p><a href="http://www.google.com">Check it out...</a></p> </div> <div id="2ndcolcontainer"> <div id="2nd_right"> <p><img src="images/Region capture 4.png" width="186" height="122" /></p> <p>We do more things</p> <p><a href="http://www.poshliving.com">Check it out...</a></p> </div> <div id="2nd_middle"> <p><img src="images/chi.png" width="186" height="122" /></p> <p>We do nothing</p> <p><a href="http://google.com">Check it out...</a></p></div></div> </body> </html> And the CSS: @charset "UTF-8"; /* CSS Document */ #container { width: 660px; background: #FFFFFF; margin: 0 auto; padding-left: 10px; padding-right: 10px; overflow: hidden; } #column_container { height: 100px; width: 560px; } #left_column { background-image: url(images/Globe100.jpg); width: 95px; height: 100px; float: left; } #right_column { background-image: url(images/Text100.jpg); float: right; height: 100px; width: 465px; } #main_image { background-image: url(images/P1010318_1.jpg); width: 550px; height: 400px; } #2ndleft { float: left; width: 186px; margin: 0px; padding: 0px; } #2ndcolcontainer { float: left; width: 372px; } #2nd_right { float: right; width: 186px; margin: 0px; padding: 0px; } #2nd_middle { float: left; width: 186px; margin: 0px; padding: 0px; }

  • Answer:

    Try playing around with the display property of some of your divs. I've ran into similar problems in the past, and was able to get it to work using display: inline, display: table, or display: table-cell.

jamesjac... at Yahoo! Answers Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.