Results 1 to 6 of 6

Thread: How to nest boxes inside parent boxes in CSS?

  1. #1
    Join Date
    Aug 2006
    Posts
    253

    How to nest boxes inside parent boxes in CSS?

    I am doing the assignment in CSS. I want to nest boxes inside parent boxes. I have tried many methods but I was not successful. Can anyone explain me how to nest boxes inside parent boxes in CSS? Also can I change the position of that boxes according to my need..?? Please tell me if there is any way to do this.!! Any coding regarding the same topic will be highly appreciable.

  2. #2
    Join Date
    Nov 2008
    Posts
    1,192

    Re: How to nest boxes inside parent boxes in CSS?

    Once you understand the CSS Box Model, that means you will able to arrange the objects accordingly. The Box Model of CSS contains the following things :
    1. The Margin is situated at the outer brand.
    2. Then the next brand inside that is the Border.
    3. The brand inside that represents the padding.
    4. And the innermost brand represents the content that is present in Box.

    Margins, borders, and padding sizes can be declared to be a certain amount of measured units, such as points (px), inches (in).

  3. #3
    Join Date
    Nov 2008
    Posts
    996

    Re: How to nest boxes inside parent boxes in CSS?

    You can also create a box which can be the full width of the window. The following coding describes the same enlarged box :
    Code:
    div.demo2 {
        width: 100%;
        border: 3px red solid;
        padding: 12px;
    }
    After using this coding, the box will get generated as bib as your window size.

  4. #4
    Join Date
    May 2008
    Posts
    2,389

    Re: How to nest boxes inside parent boxes in CSS?

    You will have to make the changes properly in the settings of the width of the outer box, for creating the nested boxes. You can use the following code for the nested boxes :
    Code:
    demo {
        width: 150px;
    }
    demo div {
        border: 7px red solid;
        padding: 12px;
    }
    		
    <div class="demo">
        <div>
            This is trial text
        </div>
    </div>

  5. #5
    Join Date
    May 2008
    Posts
    2,297

    Re: How to nest boxes inside parent boxes in CSS?

    By using the parent boxes you can also align the Boxes to the following :
    • The Left Column
    • The Right Column
    • Dual Columns

    For setting to the Left Column, you can use the following coding :
    Code:
    #parentbox {
    position: absolute;
    top: 7px;
    left: 7px;
    }
    For doing the setting towards the Right Column, use the code :
    Code:
    #parentbox {
    position: relative;
    float: right;
    }

  6. #6
    swapantech1 Guest

    Re: How to nest boxes inside parent boxes in CSS?

    Dear Sirs,

    Thanks for all

Similar Threads

  1. How to use CSS content boxes
    By Botan in forum Software Development
    Replies: 1
    Last Post: 08-01-2011, 12:18 PM
  2. Boxes 1.05 application not able to install
    By Mariah-Simpson in forum Operating Systems
    Replies: 5
    Last Post: 24-03-2010, 12:37 AM
  3. Script for RSS Display Boxes
    By The Recruiter in forum Software Development
    Replies: 5
    Last Post: 07-02-2010, 12:39 AM
  4. Converter boxes and vcr taping
    By Yusuf Khan in forum Monitor & Video Cards
    Replies: 3
    Last Post: 24-07-2009, 07:23 PM
  5. Graphics card boxes
    By GabrieL in forum Monitor & Video Cards
    Replies: 1
    Last Post: 27-12-2008, 04:57 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Page generated in 1,711,645,262.97060 seconds with 17 queries