Skip navigation
Currently Being Moderated

div problem

Apr 5, 2012 8:17 AM

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

 
Replies
  • Currently Being Moderated
    Apr 5, 2012 9:26 AM   in reply to manojb05

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 1:47 AM   in reply to manojb05

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 4:04 AM   in reply to manojb05

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 8:05 AM   in reply to manojb05

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 9:06 AM   in reply to manojb05

    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>.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points