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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with grid layout

    Hi im trying to build a Ui to display what's going on with different machines, i am trying to create a grid of 14 squares with 3 boxes within each square for information,however what ever i try doesn't seem to work correctly Help with grid layout-grid.jpg This is the desired layout i am going for.
    Any help would be much appropriated

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,301
    Thanks
    23
    Thanked 612 Times in 611 Posts
    See if this helps
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .small{
    	height: 10%;
    	width: 90%;
    	border: 1px solid gray;
    	margin: 10px;
    }
    .big{
    	height: 60%;
    	width: 90%;
    	border: 1px solid gray;
    	margin: 15px 10px;
    }
    #box{
    	height: 300px;
    	width: 200px;
    	border: 1px solid black;
    }
    </style>
    </head>
    
    <body>
    <div id="box">
    	<div class="small"></div>
    	<div class="big"></div>
    	<div class="small"></div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    See if this helps
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .small{
    	height: 10%;
    	width: 90%;
    	border: 1px solid gray;
    	margin: 10px;
    }
    .big{
    	height: 60%;
    	width: 90%;
    	border: 1px solid gray;
    	margin: 15px 10px;
    }
    #box{
    	height: 300px;
    	width: 200px;
    	border: 1px solid black;
    }
    </style>
    </head>
    
    <body>
    <div id="box">
    	<div class="small"></div>
    	<div class="big"></div>
    	<div class="small"></div>
    </div>
    </body>
    </html>

    Hi and thanks for the response, That's exactly the structure i was looking for, what would be the easiest way to put 4 in a row and have them auto adjust if the page got smaller?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,301
    Thanks
    23
    Thanked 612 Times in 611 Posts
    If the text inside becomes too small to read use responsive design to set the display of boxes to two in a row.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *, body{
    	margin: 0;
    	padding: 0;
    }
    .wrap {
    	text-align: center;
    }
    .box{
    	height: 300px;
    	width: 22%;
    	display: inline-block;
    	text-align: left;
    	margin-right: 1%;
    	margin-top: 10px;
    	outline: 1px solid black;
    }
    .small{
    	height: 10%;
    	width: 90%;
    	margin: 10px auto;
    	outline: 1px solid gray;
    }
    .big{
    	height: 60%;
    	width: 90%;
    	margin: 15px auto;
    	outline: 1px solid gray;
    }
    
    
    /*.box {display: inline-block; text-align: left; margin-right: 1%;height: 300px;outline: 1px solid black;}*/
    </style>
    </head>
    
    <body>
    <div class="wrap">
    	<div class="box">
    		<div class="small"></div>
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    
    	<div class="box">
    		<div class="small"></div>
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    
    	<div class="box">
    		<div class="small"></div>
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    
    	<div class="box">
    		<div class="small"></div>
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    
    <!--  START OF SECOND ROW  -->
    	<div class="box">
    		<div class="small"></div>
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    
    	<div class="box">
    		<div class="small"></div>
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    
    	<div class="box">
    		<div class="small"></div>
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    
    	<div class="box">
    		<div class="small"></div>
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks you very much this has worked great for wanted


  •  

    Posting Permissions

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