Results 1 to 3 of 3

Thread: How to adjust one div into another in html/css

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Nov 2010
    Posts
    965

    How to adjust one div into another in html/css

    Hi. I took a div the main_div and inside this div i have others i.e. Menus_div and content_div. Inside the content div i want to take another div for news section means (div into div). The problem I'm facing is that when i create the div into content_div so it does not get adjusted into content_div. I want to place the new_div into right side of the content div. Name:  News_div.jpg
Views: 10687
Size:  11.9 KB

    In this image, created the news_div separately, inside the main_div but that's not what i want. I just want to put it inside the content_div.

    This is my code for html:

    Code:
    <div id="main_div">
    
    
    <!-- Header1_div Starts -->
    <div id="Header1_div">
    <h3 align="center" style="padding-top:40px">This is Header</h3>
    
    </div>
    <!-- Header1_div Ends -->
    
    
    <!-- Menus_div Starts -->
    <div id="Menus_div">
    <ul>
    <li><a href="index.html">HOME </a></li>
    <li><a href="contact.html">CONTACT US</a></li>
    <li><a href="products.html">PRODUCTS</a></li>
    <li><a href="about_us.html">ABOUT US</a></li>
    </div>
    
    <!-- Menus_div Ends -->
    
    <!-- body_div Starts -->
    <div id="body_div">
    
    <h3 align="center" style=" padding-top:150px;">
    This is Home Page with body div.
    </h3>
    </div>
    <!-- body_div Ends -->
    
    
    <!-- News_div Starts -->
    <div id="news_div">
    <marquee scrollamount="3" direction="up"><h3 align="center"> Hello </h3></marquee>
    </div>
    <!-- News_div Ends -->
    
    
    
    <!-- footer_div Starts -->
    <div id="footer_div">
    
    <h3 align="center" style="padding-top: 20px;"> This is Footer Division </h3>
    </div>
    <!-- footer_div Ends -->
    
    </div>
    and this is css code:

    Code:
    #main_div
    {
        background-color:#3CF;
        height: 600px;
        width: 1000px;
        margin: 0px auto;
    }
    
    
    
    
    #news_div
    {
        background-color:#999999;
        height: 70%;
        width: 200px;
        float:left;
    }

  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: How to adjust one div into another in html/css

    Sounds like you want to use the flexbox layout. The guide at CSS Tricks shows an example matching your image above. Three columns with a header and footer.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  3. #3
    New Member
    Join Date
    May 2015
    Posts
    6

    Re: How to adjust one div into another in html/css

    create the container
    and make div's are inside the container give width and height of each div whatever if u want mention all div float left its going to be show your requirement you will not get clear understand this take some reference website for solve this

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width