Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Sections with equal dynamic width

    How do I set up a container of dynamic width, but each section in it has equal width so that they all resize at the same time with the container?

    For example:

    Code:
    .container{
    width:80%; /*of viewport*/
    }
    .section{
    position:relative;
    float:left;
    width: 80%/6; <---- pseudo code
    }
    There are 6 equal sections. For example if the .container is 900px, then each .section would be 150px. If .container is 1200px, then each .section would be 200px.
    Thanks.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 600 Times in 599 Posts
    You do get your hands slapped for position:relative; around here.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    .container{
    width:80%;
    height: 400px;
    background-color: blue;
    }
    .section{
    float:left;
    width: 13%;
    height: 350px;
    background-color: green;
    margin-right: 5px;
    
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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