SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS grid with no tables

    I'm was hoping to get some help on a layout i'm working on. I'm trying to create a left div and a right div each aprox half of the page. Inside the right div there are the following 4 divs: top right, top left, bottom right, bottom left. Each of these will have the same height and width (227x158) with a padding of aprox 10px (5 for each)

    here is my HTML:
    HTML Code:
    <body>
    <div id="main" class="centerContainer"> 
      
      <div id="leftContainer" class="fl">
      </div><!-- close id=leftbox-->
      
      <div id="rightContainer" class="fr">
      	
            <div id="topleft"  class="videoBoxes" class="fl" > <h1>top left</h1> </div>
            <div id="topright" class="videoBoxes" class="fr"> <h1>top right</h1> </div>
            <div id="botleft"  class="videoBoxes" class="cl" class="fl"> <h1>bottom left</h1> </div>
            <div id="botleft"  class="videoBoxes" class="cb" class="fr"> <h1>right left</h1> </div>
      
      </div><!-- close right box-->
    
    </div><!-- close id=main-->
    </body>
    here is the css I have so far.
    HTML Code:
    div.centerContainer {
    	width: 960px;
    	margin-top:50px;
    	margin: 0 auto;
    	overflow: hidden;
    }
    
    div#leftContainer {
    	width: 500px;
    	min-height:400px;
    	margin-top:50px;
    	margin-right: 10px;
    	background-color:#0FF
    }
    
    div#rightContainer {
    	width: 450px;
    	margin-top:50px;
    	min-height:400px;
    	background-color:#C9F
    }
    
    div.videoBoxes {
    	width: 100px;
    	min-height:100px;
    }
    
    div#topleft {
    	
    	
    }
    
    div#topright {
    	
    }
    
    div#botleft {
    	
    }
    
    div#botright {
    	
    }

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    How do you want the grid to behave? Do you have a mockup of what you are trying to achieve?

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Welcome to Sitepoint
    From your description I think this is the layout you are after.
    Code html5:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    #main {
    	width: 1010px;
    	margin-top: 50px;
    	margin: 0 auto;
    	overflow: hidden;
    }
    #leftContainer {
    	width: 500px;
    	min-height: 500px;
    	margin-right: 10px;
    	background-color: #0FF;
    	float: left;
    }
    #rightContainer {
    	width: 500px;
    	min-height: 500px;
    	background-color: #C9F;
    	float: left;
    }
    .videoBoxes {
    	width: 250px;
    	min-height: 250px;
    	float: left;
    }
     
    </style>
    </head>
    <body>
    <div id="main"> 
     
      <div id="leftContainer">
      </div>
     
      <div id="rightContainer">
     
            <div id="topleft" class="videoBoxes"> <h1>top left</h1> </div>
            <div id="topright" class="videoBoxes"> <h1>top right</h1> </div>
            <div id="botleft" class="videoBoxes"> <h1>bottom left</h1> </div>
            <div id="botRight" class="videoBoxes"> <h1>right left</h1> </div>
     
      </div>
     
    </div>
    </body>
    </html>
    I've changed the widths to make the maths easier but you can adjust these.

    A few points though

    Validate your html when you're learning it will help find issues and point you in the right direction.
    You can't have more than one class attribute on a single element
    Code:
    class="videoBoxes" class="cl" class="fl"
    should be
    Code:
    class="videoBoxes cl fl"
    When floating something left and something right, because of a bug in IE you should always put your right floats first in the markup.
    With your layout I avoided this entirely by floating everything left, this works because the blocks are all the same size - and floats stack up against each other.

    If the content will vary you might want to change the order of the blocks so you can get the floats and clearing working..
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    #main {
    	width: 1010px;
    	margin-top: 50px;
    	margin: 0 auto;
    	overflow: hidden;
    }
    #leftContainer {
    	width: 500px;
    	min-height: 500px;
    	margin-right: 10px;
    	background-color: #0FF;
    	float: left;
    }
    #rightContainer {
    	width: 500px;
    	min-height: 500px;
    	background-color: #C9F;
    	float: left;
    }
    .videoBoxes {
    	width: 250px;
    	min-height: 250px;
    	float: left;
    }
    #topright, #botright { float: right; clear: both }
    
    </style>
    </head>
    <body>
    <div id="main"> 
    
    	<div id="leftContainer">
    	</div>
    
    	<div id="rightContainer">
    
    		<div id="topright" class="videoBoxes">
    			<h1>top right</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    		</div>        
    		<div id="topleft" class="videoBoxes"> <h1>top left</h1> </div>
    
    		<div id="botright" class="videoBoxes"> <h1>right left</h1> </div>
    		<div id="botleft" class="videoBoxes"> <h1>bottom left</h1> </div>
    	
    
    	</div>
    
    </div>
    </body>
    </html>
    Hope that helps explain a little about how floats work for creating these types of layouts.

  4. #4
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by aaron4osu View Post
    I'm trying to create a left div and a right div each aprox half of the page.
    but you're using fixed widths. You might be better off with an elastic layout using % widths or em's to cater for users using different window sizes or even just resizing their browser.

    How do you want the 4 video boxes to behave, if using an elastic layout, when the rightcontainer is more than double the width of a video box?

    Really need more details from you otherwise any suggested solution is a guess based on assumptions.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No that should do it. Thanks everyone!!!


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
  •