#1
  1. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144

    stretching 2 or 3 divs to parent width


    Hi--

    I've got a parent div that can contain either two or three child divs. I need the child divs to fit the width of the parent. I can hard code this, but would really like to use one style so they all just fit. Something like this:


    Code:
    #parent {max-width: 700px;}
    .child {max-width: 50%; float: left;}
    With that, I can add 2 children and they fit nicely, but if I add a third, the last one breaks to a new line. Any ideas?
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  2. #2
  3. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    Okay. My brain is on vacation. CSS tables worked perfectly:

    <div id="parent">
    <div id="parentRow">
    <div class="childCell"></div>
    <div class="childCell"></div>
    <div class="childCell"></div>
    </div><!-- row -->
    </div><!--table-->
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Location
    Ahmedabad
    Posts
    17
    Rep Power
    0
    Hi,

    You Can use the below code

    Code:
    <html>
    <head>
    	<title></title>
    	<style>#parent {max-width: 100%;height:100%;border:1px solid;}
    .child {width: 33.20%;height:100%; float: left;border:1px solid;}</style>
    	</head>
    <body>
    	<div id="parent">
    		<div class="child">
    			
    		</div>
    		
    			<div class="child">
    			
    			</div>
    		<div class="child">
    			
    			</div>
    	</div>
    </body>
    </html>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Location
    Gujarat, India
    Posts
    14
    Rep Power
    0
    Here you go A Pen by Aslam Doctor
    Using CSS flex, you can add as many child divs as you want and they will stretch inside the parent div

IMN logo majestic logo threadwatch logo seochat tools logo