SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: div help

  1. #1
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question div help

    Sorry for double posting but I really need help on this.. http://www.sitepointforums.com/showt...hreadid=135718

    I looking to design a homepage that looks similar to a newspaper. I have 3 div columns, 33%. We will be using a database to bring in 'blocks' of information.

    I would like the blocks to be tiled, so for example if 1 block has more information than the other, the block below the smaller block starts immediately and do's not get a huge white space.

    Any idea's?

    Thankyou

  2. #2
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have your 3 divs (#left, #middle, and #right - notice they are ID ones, not class), Then create a .contentdiv which you can put each block of info in. And each .contentdiv lives inside a #left, #middle or #right. Hence each block will just continue below the one above it.

    Eg.

    Code:
    <head>
    <style type="text/css">
    body {margin: 0;
    padding:0;
    font-size:10px;
    }
    
    #left,#right {
    	position:absolute;
    	top:35px;
    	margin:5px 10px 10px 10px; 
    	background:#eee;
    	width:120px;
    	text-align:center;
    	border: 1px solid #d9e1d6;
    
    	}
    
    #right {
    	right:0
    	}
    
    #left{
    	left:0;
    	}
    
    #title {
    	text-align: center;
    	background: #f1f1f1; 
    	margin: 0px 0 8 0  ;
    	padding: 5 0 0 0 ;
    	height:26;
    	min-width:380;
    	font-size:14;
    	font-weight:bold;
    	border-bottom: 1px solid #d9e1d6;
    	}
    
    #content {
    	text-align: center;
    	background: #fff; 
    	margin: 5px 140px 8px 140px; 
    	}
    	
    #footer {
    	text-align:center;
    	background: #d9e1d6;
    	min-width:380;
    	border-top: 1px solid #c1c9bd;
    	border-bottom: 1px solid #c1c9bd;
    	}
    .side_div {
    	background:white;
    	width:108;
    	margin:5 5 5 5;
    	border: 1px solid #d9e1d6;
    	}
    .content_div {
    	background:#eee;
    	margin: 0 0 5 0;
    	border: 1px solid #d9e1d6;
    	}
    
    h1 {
    	font-size:14px;
    	}
    </style>
    </head>
    
    
    <body>
    
    <div id="left"><div class="side_div">Login<p>Name:</p><p>Pass:</p></div><div class="side_div">NewsLetter?</br>Address:</div></div>
    
    <div id="right">Right</div>
    
    <div id="title"> Title </div>
    
    <div id="content"> 
    	<div class="content_div"><h1>News</h1><p>Blah blah</p></div> 
    	<div class="content_div"><h1>Articles</h1><p>Blah blah</p></div>
    	<div class="content_div"><h1>Articles</h1><p>Blah blah</p></div>
    	<div class="content_div"><h1>Articles</h1><p>Blah blah</p></div>
    </div>
    <div id="footer">Here's the footer</div>
    </body>

  3. #3
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gamblingharry
    Have your 3 divs (#left, #middle, and #right - notice they are ID ones, not class), Then create a .contentdiv which you can put each block of info in. And each .contentdiv lives inside a #left, #middle or #right. Hence each block will just continue below the one above it.
    Thanks for the great response. That would work great if the bottom 4 row's were columns, along with the 'login' and 'right' columns. How easy is that to convert?

    Thanks
    (css and div newbie)

  4. #4
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, this one should be just what you want i think,

    Here you go,

    PS. would like to see how it goes, as I am just beginning with CSS myself!
    Code:
     <head>
    <style type="text/css">
    body {margin: 0;
    padding:0;
    font-size:10px;
    }
    
    #left,#right {
    	position:absolute;
    	top:35px;
    	margin:5px 10px 10px 10px; 
    	background:#eee;
    	width:120px;
    	text-align:center;
    	border: 1px solid #d9e1d6;
    
    	}
    
    #right {
    	right:0;
    	z-index:1;
    	}
    
    #left{
    	left:0;
    	z-index:3;
    	}
    
    #title {
    	text-align: center;
    	background: #f1f1f1; 
    	margin: 0px 0 8 0  ;
    	padding: 5 0 0 0 ;
    	height:26;
    	min-width:680;
    	font-size:14;
    	font-weight:bold;
    	border-bottom: 1px solid #d9e1d6;
    	}
    
    #content {
    	text-align: center;
    	background: #fff; 
    	margin: 5px 140px 8px 140px; 
    	min-width:100px;
    	min-height:100px;
    	z-index:2;
    	}
    	
    #footer {
    	text-align:center;
    	background: #d9e1d6;
    	min-width:380;
    	border-top: 1px solid #c1c9bd;
    	border-bottom: 1px solid #c1c9bd;
    	}
    .side_div {
    	background:white;
    	width:108;
    	margin:5 5 5 5;
    	border: 1px solid #d9e1d6;
    	text-align:left;
    	}
    .content_div , .l, .r{
    	background:#eee;
    	
    	border: 1px solid #d9e1d6;
    	margin-left: 34%;
    	margin-right: 34%;
    	position : relative;
    	
    	}
    .l {
    float: left;
    margin:0;
    	
    	width:32%
    }
    .r{
    float:right;
    	margin:0;
    	width:32%
    }
    .content_block{
    	background:white;
    	margin:5px;
    	border:1px solid #dddddd;
    }
    
     p{
    	font-size:14px;
    	
    	}
    </style>
    </head>
    
    
    <body>
    
    <div id="left"><div class="side_div">Login<p>Name:</p><p>Pass:</p></div><div class="side_div">NewsLetter?</br>Address:</div></div>
    
    <div id="right">Right</div>
    
    <div id="title"> Title </div>
    
    <div id="content"> 
    	<div class="l"><div class="content_block"><h1>News</h1><p>Blah blah</p></div><div class="content_block"><h1>Articles</h1><p>Blah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah  blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blah</p></div> <div class="content_block"><h1>News</h1><p>Blah blah</p></div></div> 
    	<div class="r"><div class="content_block"><h1>Articles</h1><p>Blah blah</p></div><div class="content_block"><h1>Articles</h1><p>Blah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlahblahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blah</p></div> <div class="content_block"><h1>News</h1><p>Blah blah</p></div></div> 
    	<div class="content_div"><div class="content_block"><h1>Articles</h1><p>Blah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blh blahBlah blahBlah 
    blahBlah blah</p></div><div class="content_block"><h1>Articles</h1><p>Blah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah 
    blahBlah blah</p></div></div> 	</div><div id="footer">Here's the footer</div></body>


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
  •