10 Replies Latest reply: Apr 6, 2012 9:19 AM by manojb05 RSS

    div problem

    manojb05 Community Member

      hi

      i am try to make box (cyan color) that come in down, i want to a left side of logo container (NEW BOX) something like this JPG. My WEBLINK

      CYAN_BOX.jpg

        • 1. Re: div problem
          osgood_ CommunityMVP

          Add the new box <div> after your logo <div> (see below):

           

           

          <div id="headerLeft">

            <div id="logo"><img name="" src="" width="226" height="107" alt=""></div>

          <div id="newBox">New Box</div>

            </div>

          <!-- end headerLeft -->

           

           

          Set your logo css selector to float: left; -

           

          #wrapper #header #headerLeft #logo {

              height: auto;

              width: 227px;

              float: left;

          }

           

          Then add the newBox css selector to your css styles:

           

          #newBox {

          float: left;

          width: 250px;

          margin-left: 10px;

          }

          • 2. Re: div problem
            manojb05 Community Member

            osgood thanks for your reply & efforts. i am incorporate the code its working fine.

            Now I wondering.

            I am facing TWO doubts in my mind for DIV lay outing. I know its a stupid question, don’t ignore my message

            1) I want to create a boxes one by one (side by side), if any fundamental rule to create a DIV BOXES for eg. i want to create a new DIV in my layout. JPG is attached for reference (REDCOLOR box)

            2) What is the rule for start the div box

            Help me Web link

            89.jpg

            • 3. Re: div problem
              osgood_ CommunityMVP

              Hi manjo

               

              To have <div> boxes appear side by side they need to be given the float attribute - float: left; or float: right;

               

              So what you would do is insert a new <div> after the <div> where you want the new <div> to appear. (see below "redBox")

               

               

              <div id="headerLeft">

                <div id="logo"><img name="" src="" width="226" height="107" alt=""></div>

              <div id="newBox">New Box</div>

              <div id="redBox">Red Box</div>

                </div>

              <!-- end headerLeft -->

               

               

               

              Then add the redBox css selector to your css styles:

               

              #redBox {

              float: left;

              width: 150px;

              margin-left: 10px;

              }

               

               

              As long as there is enough space next to the previous <div> for it to fit it will appear next to it.

              • 4. Re: div problem
                manojb05 Community Member

                thanks for your reply. please chek updated link

                I am red box change float area right this rightway.

                #newBoxr {

                          background-color: #0099FF;

                          float: right;

                          width: 100px;

                          margin-left: 5px;

                          margin-right: 5px;

                          height: auto;

                          padding-left: 2px;

                • 5. Re: div problem
                  osgood_ CommunityMVP

                  manojb05 wrote:

                   

                  thanks for your reply. please chek updated link

                  I am red box change float area right this rightway.

                  #newBoxr {

                            background-color: #0099FF;

                            float: right;

                            width: 100px;

                            margin-left: 5px;

                            margin-right: 5px;

                            height: auto;

                            padding-left: 2px;

                   

                   

                  Looks ok to me

                  • 6. Re: div problem
                    manojb05 Community Member

                    osgood my question is answered very briefly done, but now i am check with internet explorer 8 my entire website alignment is goes wrong. Any way to fix it.

                     

                    screen short

                    789.jpg

                    • 7. Re: div problem
                      osgood_ CommunityMVP

                      You will struggle to produce a complex layout like this if you don't have the experience of laying out your page using <divs>.

                       

                      I've corrected the html/css if you scroll below BUT take some time to read on before you dive for the code.

                       

                      I don't know where in the process you lost your Doctype declaration at the top of the page BUT you need it.

                       

                      Also it's no good just creating lots of <divs> and floating them, that won't work. The three blue <divs> to the left of the red box in the header need wrapping in their own container <div> which is then floated left BUT you don't float the three <divs> inside of it. I don't know what you are doing but you may not even require the three <divs> inside the wrapper. The object is to use as few <divs> as possible. At the moment you're following the bad habit of creating as many table cells as what is needed for the content...you need to quickly move away from that bad idea.

                       

                      I dont care much for the kind of css selector below either as it just makes it more difficult to read the css.

                      #wrapper #mainAreaWrapper #mainAreaRight #mainAreaBlueBox div #red { }

                       

                      You need to try and keep your css selector names short and sweet.

                       

                       

                       

                       

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                      <html xmlns="http://www.w3.org/1999/xhtml">

                      <head>

                      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                      <title>Untitled Document</title>

                      <style type="text/css">

                      #wrapper {

                          width: 980px;

                          margin: 0 auto;

                      }

                      #footer {

                          width:100%;

                          position:fixed;

                          z-index: 1000;

                          bottom:0;

                          left:0;

                          background-color: #CCC;

                          -moz-border-radius: 5px;

                          -webkit-border-radius: 5px;

                          border-radius: 5px;

                          padding: 0px;

                      }

                      #footer #content {

                          width: 980px;

                          margin-right: auto;

                          margin-left: auto;

                      }

                      #header {

                          overflow: hidden;

                       

                      }

                      #logo {

                          width: 226px;

                          float: left;

                       

                      }

                      #headerLeft {

                          float: left;

                          width: 600px;

                      }

                      #headerRight {

                          float: right;

                          width: 380px;

                      }

                      #mainAreaWrapper {

                          overflow: hidden;

                       

                      }

                      #mainAreaLeft {

                          float: left;

                          width: 235px;

                      }

                      #mainAreaRight {

                          float: left;

                          width: 740px;

                      }

                      #mainAreaTop {

                          min-height: 320px;

                          background-color: #CCC;

                          margin-bottom: 15px;

                              -moz-border-radius: 5px;

                      -webkit-border-radius: 5px;

                      -o-border-radius: 5px;

                      }

                      #mainAreaBlueBox {

                          min-height: 250px;

                          float: left;

                          width: 450px;

                          background-color:#DC143C;

                          -moz-border-radius: 5px;

                          -webkit-border-radius: 5px;

                          -o-border-radius: 5px;

                      }

                      #mainAreaGreenBox {

                          min-height: 250px;

                          float: left;

                          width: 280px;

                          margin-left: 10px;

                          background-color:#CCCCCC;

                          -moz-border-radius: 5px;

                          -webkit-border-radius: 5px;

                          -o-border-radius: 5px;

                      }

                      #wrapper #mainAreaWrapper #mainAreaRight #mainAreaBlueBox div #red {

                          padding-left: 10px;

                          padding-top: 10px;

                          text-align: justify;

                          padding-right: 10px;

                      }

                      #wrapper #mainAreaWrapper #mainAreaRight #mainAreaGreenBox #grey {

                          padding-top: 10px;

                          padding-left: 10px;

                      }

                       

                       

                       

                       

                      #threeBoxWrapper {

                          float: left;

                          width: 250px;

                          margin-left: 10px;

                      }

                       

                      #newBox {

                          background-color: #0099FF;

                      }

                      #newBox1 {

                          background-color: #0099FF;

                          margin-top: 10px;

                      }

                       

                      #newBox3 {

                      background-color: #0099FF;

                      margin-top: 10px;

                      }

                      #newBoxr {

                          background-color: #FF0000;

                          float: right;

                          width: 100px;

                          margin-left: 5px;

                          margin-right: 5px;

                          height: auto;

                          padding-left: 2px;

                      }

                      #newBoxleft {

                          background-color: #0099FF;

                          float: left;

                          width: 226px;

                          margin-top: 10px;

                      }

                      #newBoxleftt {

                          background-color: #0099FF;

                          float: left;

                          width: 226px;

                          margin-top: 0px;

                      }

                      </style>

                       

                       

                      <!-- codestart slide transition-->

                       

                      <link rel="stylesheet" href="css/global.css">

                       

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

                      <script src="js/slides.min.jquery.js"></script>

                       

                      <script>

                              $(function(){

                                  $('#slides').slides({

                                      preload: true,

                                      preloadImage: 'img/loading.gif',

                                      play: 5000,

                                      pause: 2500,

                                      hoverPause: true,

                                      animationStart: function(current){

                                          $('.caption').animate({

                                              bottom:-35

                                          },100);

                                          if (window.console && console.log) {

                                              // example return of current slide number

                                              console.log('animationStart on slide: ', current);

                                          };

                                      },

                                      animationComplete: function(current){

                                          $('.caption').animate({

                                              bottom:0

                                          },200);

                                          if (window.console && console.log) {

                                              // example return of current slide number

                                              console.log('animationComplete on slide: ', current);

                                          };

                                      },

                                      slidesLoaded: function() {

                                          $('.caption').animate({

                                              bottom:0740   

                                          },200);740

                                      }

                                  });

                              });

                          </script>

                      <!-- codeend slide transition -->

                       

                      <!--[if gte IE 5.5]>

                      <![if lt IE 7]>

                      <style type="text/css">

                      div#Sticky {

                      /* IE5.5+/Win - this is more specific than the IE 5.0 version */

                      right: auto; bottom: auto;

                      left: expression( ( 0 - Sticky.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );

                      top: expression( ( 0 - Sticky.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

                      }

                      </style>

                      <![endif]>

                      <![endif]-->

                       

                       

                      </head>

                       

                      <body>

                      <div id="wrapper">

                      <div id="header">

                      <div id="headerLeft">

                       

                        <div id="logo"><img name="" src="" width="226" height="107" alt=""></div>

                       

                      <div id="threeBoxWrapper">

                        <div id="newBox">New Box</div>

                        <div id="newBox1">New Box</div>

                        <div id="newBox3">New Box</div>

                        </div>

                        <div id="newBoxr">New Box</div>

                        </div>

                       

                      <!-- end headerLeft -->

                      <div id="headerRight">Header Right</div><!-- end headerRight -->

                      </div><!-- end header-->

                      <div id="mainAreaWrapper">

                       

                      <div id="mainAreaLeft">

                      <!-- left side box start-->

                      <div id="newBoxleftt">New Box</div>

                      <div id="newBoxleft">New Box</div>

                      <div id="newBoxleft">New Box</div>

                      <div id="newBoxleft">New Box</div>

                      <div id="newBoxleft">New Box</div>

                       

                      <!-- end leftside box-->

                      </div>

                       

                      <!-- end mainAreaLeft -->

                      <div id="mainAreaRight">

                      <div id="mainAreaTop"><div id="example">

                      <div id="slides">

                                      <div class="slides_container">

                                          <div class="slide">

                                              <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="740" height="270" alt="Slide 1"></a>

                                              <div class="caption" style="bottom:0">

                                                  <p>Happy Bokeh Thursday!</p>

                                              </div>

                       

                                          </div>

                                          <div class="slide">

                                              <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="740" height="270" alt="Slide 2"></a>

                                              <div class="caption">

                                                  <p>Taxi</p>

                                              </div>

                                          </div>

                                          <div class="slide">

                       

                                              <a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="740" height="270" alt="Slide 3"></a>

                                              <div class="caption">

                                                  <p>Happy Bokeh raining Day</p>

                                              </div>

                                          </div>

                                          <div class="slide">

                                              <a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="740" height="270" alt="Slide 4"></a>

                                              <div class="caption">

                       

                                                  <p>We Eat Light</p>

                                              </div>

                                          </div>

                                          <div class="slide">

                                              <a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="740" height="270" alt="Slide 5"></a>

                                              <div class="caption">

                                                  <p>&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>

                                              </div>

                       

                                          </div>

                                          <div class="slide">

                                              <a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="740" height="270" alt="Slide 6"></a>

                                              <div class="caption">

                                                  <p>twelve.inch</p>

                                              </div>

                                          </div>

                                          <div class="slide">

                       

                                              <a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="740" height="270" alt="Slide 7"></a>

                                            <div class="caption">

                                                  <p>Save my love for loneliness</p>

                                            </div></div></div></div>

                      </div>

                      </div>

                      <!-- end mainAreaTop -->

                      <div id="mainAreaBlueBox">

                        <div>

                          <div id="red"> Lorem

                            <p>ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>

                       

                          </div>

                        </div>

                      </div>

                      <!-- end mainAreaBlueBox -->

                      <div id="mainAreaGreenBox">

                        <div id="grey">

                          <p>Green Box</p>

                          <p>ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>

                        </div>

                       

                      </div><!-- end mainAreaBlueBox -->

                      </div><!-- end mainAreaRight -->

                      </div><!-- end mainAreaWrapper -->

                       

                      </div><!-- end warpper -->

                      <div id="footer">

                        <div id="content">Footer</div>

                      </div>

                      </body>

                      </html>

                      • 8. Re: div problem
                        manojb05 Community Member

                        Dear Osgood thanks for your hard effort for me, i don't know how can i express. anyway thank you so much.

                        I have knowledge in table based layouts, but i never create a div based layout. This is my first div based layout.

                        i success that layout with your valuable feedback & guides. Once again thank you so much.

                        N.B: U have a any tutorial for beginner div based layout.

                        • 9. Re: div problem
                          osgood_ CommunityMVP

                          manojb05 wrote:

                           

                          This is my first div based layout. i success that layout with your valuable feedback & guides.

                           

                          It takes a bit of time moving from tables to <divs> but you really just need to think of <divs> as a series of containers, like cardboard boxes, in which you insert your content. Then position them using css.

                           

                           

                          manojb05 wrote:

                           

                          N.B: U have a any tutorial for beginner div based layout.

                           

                          I don't know of any tutorials that I would recommend but I'm sure if you search Google there are plenty of resources out there that will give you a basic insight into building with <divs>.

                          • 10. Re: div problem
                            manojb05 Community Member

                            thanks