SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    733
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get boxes under columns

    I have this page code, where it has a right column and a left column.
    The right column has a top box and three column boxes under that. It all works well together.

    I'm trying to add two colums 13 and 14 under the right column but they seem to be under the left column, instead of the right. Can you help me?

    Code:
    <div id="wrapit">
    
    <div class="col_left">
    
    <div id="box1">TEXT</div>
    
    <div id="box2">TEXT</div>
    
    <div id="box3">TEXT</div>
    
    </div><!--div col_left>-->
    
    <div class="topbox">TEXT</div>
    
    <div class="col_a">TEXT</div>
    
    <div class="col_b">TEXT</div>
    
    <div class="col_c">TEXT</div>
    
    <div class="col_13">TEXT</div>
    
    <div class="col_14">TEXT</div>
    
    </div><!--<wrapit>-->

    Code:
    wrapit {
    		margin: 0px auto;
    		padding: 0px 0px 10px 0px;
    		width: 970px;
    		background: #;
    		border: 1px solid #;
    		overflow: auto;
    		}
    		
    		.col_left {
    				float: left;
    				width: 225px;
    				height: 600px;
    				margin: 28px 5px 0px 0px;
    				padding: 0px 0px 0px 0px;
    				background:url(../images/Q9.jpg);
    				background-repeat: no-repeat;
    				background: #;
    				}
    				
    				#box1 p {
    				width: 200px;
    				  margin: 15px;
    				  padding: 5px;
    				  background-color: #;
    				  border:1px solid #;
    				} 
    				
    				#box2 p {
    				width: 200px;
    				  margin: 15px;
    				  padding: 5px;
    				  background-color: #;
    				  border:1px solid #;
    				} 
    				
    				#box3 p {
    				width: 200px;
    				  margin: 15px;
    				  padding: 5px;
    				  background-color: #;
    				  border:1px solid #;
    				} 
    		
    		
    		.topbox {
    		float: left;
    		width: 690px;
    		height: 40px;
    		margin: 25px 0px 0px 20px;
    		padding: 15px 10px 10px 10px;
    		border: 1px solid #;
    		background:url(../images/rBox.gif);
    		background-repeat: no-repeat;
    		background: #;
    		}
    		
    		.col_a {
    		float: left;
    		width: 198px;
    		height: 385px;
    		font-size:1em;
    		margin: 10px 5px 0px 20px;
    		padding: 10px 12px 5px 16px;
    		border: 1px solid #;
    		background:url(../images/2box.gif);
    		background-repeat: no-repeat;
    		background: #;
    		}
    		
    		.col_b {
    		float: left;
    		width: 198px;
    		height: 485px;
    		font-size:1em;
    		margin: 10px 5px 0px 12px;
    		padding: 20px 12px 5px 16px;
    		border: 1px solid #;
    		background:url(../images/2box.gif);
    		background-repeat: no-repeat;
    		background: #;
    		}
    		
    		.col_c {
    		float: left;
    		width: 198px;
    		height: 485px;
    		font-size:1em;
    		margin: 10px 0px 0px 12px;
    		padding: 20px 12px 5px 16px;
    		background:url(../images/2box.gif);
    		background-repeat: no-repeat;
    		border: 1px solid #;
    		background: #;
    		}		
    
    
    
    		.col_13 {
    		float: left;
    		width: 330px;
    		height: 105px;
    		margin: 10px 0px 0px 20px;
    		padding: 20px 5px 5px 15px;
    		border: 1px solid #ccc;
    		background: #;
    		}
    		
    		.col_14 {
    		float: left;
    		width: 330px;
    		height: 105px;
    		margin: 10px 0px 0px 8px;
    		padding: 20px 5px 5px 15px;
    		border: 1px solid #ccc;
    		background: #;
    		}

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to create a block formatting context for the right column. Else, as soon as possible, things will wrap under the left column.
    simply wrap the right column in a div, and give the div's style {overflow: hidden;}.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gary is right. This way it will never work. You could do with less CSS as well. There are quite some rules repeated in your stylesheet which you could combine:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    wrapit {
    	width: 970px;
    	margin: 0px auto;
    	padding: 28px 0px 10px 0px;
    	background: #;
    	border: 1px solid #;
    	color: #FFF;
    }
     
    .content {
    	width: 225px;
    	height: 600px;
    	float: left;
    	background:url(../images/Q9.jpg) no-repeat;
    }
     
    .right {
    	width: 714px;
    	margin-left: 20px;
    	dispay: inline;	
    }
     
    .box {
    	width: 200px;
    	margin: 15px;
    	padding: 5px;
    	border:1px solid #000;
    } 
     
    .topbox {
    	height: 40px;
    	padding: 15px 10px 10px 10px;
    	border: 1px solid #000;
    	background:url(../images/rBox.gif) no-repeat #FF0000;
     
    }
     
    .col {
    	width: 198px;
    	height: 385px;
    	margin: 10px 18px 0 0;
    	padding: 10px 12px 5px 16px;
    	float: left;
    	display: inline;
    	font-size:1em;
    	border: 1px solid #;
    	background:url(../images/2box.gif) no-repeat;
    	background: green;
    }
     
    .b,
    .c {
    	height: 485px;
    	background: yellow;
    }
     
    .c {
    	margin-right: 0;
    	background: blue;
    }
     
    .col_13,
    .col_14 {
    	width: 330px;
    	height: 105px;	
    	float: left;
    	margin: 10px 8px 0 0;
    	padding: 20px 5px 5px 15px;
    	border: 1px solid #ccc;
    	background: #;
    }
     
    .col_14 {
    	margin-right: 0;
    }
    </style>
    </head>
     
    <body>
    <div id="wrapit">
     
    <div class="content">
     
    <div class="box">TEXT</div>
     
    <div class="box">TEXT</div>
     
    <div class="box">TEXT</div>
     
    </div><!--div col_left>-->
     
    <div class="content right">
     
    <div class="topbox">TEXT A</div>
     
    <div class="col">Column Left</div>
     
    <div class="col b">Column Middle</div>
     
    <div class="col c">Column Right</div>
     
    <div class="col_13">TEXT</div>
     
    <div class="col_14">TEXT</div>
     
    </div>
     
    </div><!--<wrapit>-->
    </body>
    </html>


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
  •