Back To Website Design Forum

CSS two column three rows of text..should be easy right?

  • e.s.guardian
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 14, 2007
  • Posts: 8
  • Status: Offline

Post August 21st, 2008, 3:45 pm

So I haven't been on here in awhile. Recently took a web design job after being unemployed for a little bit. I admit Im a little rusty.. I have a div on the site that basically houses 6 short areas of text that I will use to anchor link to a newsletter. I don't have this designed yet, all i have is an image example of what Im trying to achieve. Image

Im wondering what css I would use, this is what I think it should be but I can't seem to get it working with out overflowing and changing each div size. I need each div to be comparable to a row in a table per se. Is there an easier way to do this? I need the outside div (previewdiv) to be 472px width and 275px height, and I need to have the 6 divs inside with text in them.
Basically I just need to know how to set this up properly so when text is added or deleted the divs do not change in size. Any help???
Code: [ Select ]
 
        <div class="previewdiv">
        <div class="row1"></div>
        <div class="row2"></div>
        <div class="row3"></div>
        <div class="row4"></div>
        <div class="row5"></div>
        <div class="row6"></div>    
      </div>
 
  1.  
  2.         <div class="previewdiv">
  3.         <div class="row1"></div>
  4.         <div class="row2"></div>
  5.         <div class="row3"></div>
  6.         <div class="row4"></div>
  7.         <div class="row5"></div>
  8.         <div class="row6"></div>    
  9.       </div>
  10.  



Code: [ Select ]
 
@charset "UTF-8";
 
.previewdiv {
    position:absolute;
    left:23px;
    top:311px;
    width:472px;
    height:275px;
    z-index:1;
    background-color: #FFFFFF;
    padding: 5px;
}
 
.row1 {
    position:relative;
    width:235px;
    height:auto;
    float:left;
}
 
.row2 {
        position:relative;
        width:235px;
        height:auto;
        float:left;
 
}
 
.row3 {
       position:relative;
       width:235px;
       height:auto;
       float:left;
 
}
.row4 {
       position:relative;
       width:235px;
       height:auto;
       float:left;
}
 
.row5 {
       position:relative;
       width:235px;
       height:auto;
       float:left;
}
 
.row6 {
       position:relative;
       width:235px;
       height:auto;
       float:left;
}
 
 
  1.  
  2. @charset "UTF-8";
  3.  
  4. .previewdiv {
  5.     position:absolute;
  6.     left:23px;
  7.     top:311px;
  8.     width:472px;
  9.     height:275px;
  10.     z-index:1;
  11.     background-color: #FFFFFF;
  12.     padding: 5px;
  13. }
  14.  
  15. .row1 {
  16.     position:relative;
  17.     width:235px;
  18.     height:auto;
  19.     float:left;
  20. }
  21.  
  22. .row2 {
  23.         position:relative;
  24.         width:235px;
  25.         height:auto;
  26.         float:left;
  27.  
  28. }
  29.  
  30. .row3 {
  31.        position:relative;
  32.        width:235px;
  33.        height:auto;
  34.        float:left;
  35.  
  36. }
  37. .row4 {
  38.        position:relative;
  39.        width:235px;
  40.        height:auto;
  41.        float:left;
  42. }
  43.  
  44. .row5 {
  45.        position:relative;
  46.        width:235px;
  47.        height:auto;
  48.        float:left;
  49. }
  50.  
  51. .row6 {
  52.        position:relative;
  53.        width:235px;
  54.        height:auto;
  55.        float:left;
  56. }
  57.  
  58.  
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 21st, 2008, 3:45 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post August 21st, 2008, 11:51 pm

So what you have now doesn't work? Maybe you could change your CSS to the following:
Code: [ Select ]
.previewdiv {
position:absolute;
left:23px;
top:311px;
width:472px;
height:275px;
z-index:1;
background-color: #FFFFFF;
padding: 5px;
}
.row1,.row2,.row3,.row4,.row5,.row6{
width:235px;
height:auto;
float:left;
}
  1. .previewdiv {
  2. position:absolute;
  3. left:23px;
  4. top:311px;
  5. width:472px;
  6. height:275px;
  7. z-index:1;
  8. background-color: #FFFFFF;
  9. padding: 5px;
  10. }
  11. .row1,.row2,.row3,.row4,.row5,.row6{
  12. width:235px;
  13. height:auto;
  14. float:left;
  15. }

I took the "position:relative" out because I don't see a point to it being there ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • e.s.guardian
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 14, 2007
  • Posts: 8
  • Status: Offline

Post August 22nd, 2008, 8:19 am

This did not fix, although it did clean up the legnth of my CSS. Is there anything wrong with just putting a table with 2 columns and 3 rows inside of my container div? Also I am thinking of trying to make a child container that holds just 3 rows and another one for the last 3 and with the last 3 using position relative and setting actual top left parameters....I can't think of anything else...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post August 22nd, 2008, 8:22 pm

What is preventing you from using tables?
  • e.s.guardian
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 14, 2007
  • Posts: 8
  • Status: Offline

Post August 23rd, 2008, 6:05 am

nothing...and that is what I ended up doing and it works perfectly
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post August 23rd, 2008, 11:18 am

That's good. Especially if you're planning on using it as an e-mail template.
  • videoediting-direct
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Jul 28, 2008
  • Posts: 53
  • Loc: United Kingdom
  • Status: Offline

Post August 25th, 2008, 2:27 am

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.previewdiv {
    position:absolute;
    left:23px;
    top:311px;
    width:472px;
    height:275px;
    z-index:1;
    background-color: #FFFFFF;
    padding: 5px;
    }
    
.previewdiv div{
    height:200px;
    width:200px;
    }
    
.row1 {
    float:left;
    clear:both;
    }
    
.row2 {
    float:left;
    clear:both;
    }
    
.row3 {
    float:left;
    clear:both;
    }
    
.row4 {
    float:right;
    clear:both;
    }
    
.row5 {
    float:right;
    clear:both;
    }
    
.row6 {
    float:right;
    clear:both;
    }
    
.Header {
    color:#996600;
    font-weight:bold;
    clear:both;
    }
</style>
</head>

<body>
    <div class="previewdiv">
    <div class="row1"><span class="Header">Kindergarten Enrollment</span><br />ghfhfsdsdsds</div>

    <div class="row2"><span class="Header">Kindergarten Enrollment</span><br />gfgfg</div>
    <div class="row3"><span class="Header">Kindergarten Enrollment</span><br />gfgfg</div>
    <div class="row4"><span class="Header">Kindergarten Enrollment</span><br />gfgfgfdsdsdsds</div>
        <div class="row5"><span class="Header">Kindergarten Enrollment</span><br />fgfgfsdsdsdsd</div>
    <div class="row6"><span class="Header">Kindergarten Enrollment</span><br />fgfgfgsdsdsdsds</div> 
</div>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. .previewdiv {
  8.     position:absolute;
  9.     left:23px;
  10.     top:311px;
  11.     width:472px;
  12.     height:275px;
  13.     z-index:1;
  14.     background-color: #FFFFFF;
  15.     padding: 5px;
  16.     }
  17.     
  18. .previewdiv div{
  19.     height:200px;
  20.     width:200px;
  21.     }
  22.     
  23. .row1 {
  24.     float:left;
  25.     clear:both;
  26.     }
  27.     
  28. .row2 {
  29.     float:left;
  30.     clear:both;
  31.     }
  32.     
  33. .row3 {
  34.     float:left;
  35.     clear:both;
  36.     }
  37.     
  38. .row4 {
  39.     float:right;
  40.     clear:both;
  41.     }
  42.     
  43. .row5 {
  44.     float:right;
  45.     clear:both;
  46.     }
  47.     
  48. .row6 {
  49.     float:right;
  50.     clear:both;
  51.     }
  52.     
  53. .Header {
  54.     color:#996600;
  55.     font-weight:bold;
  56.     clear:both;
  57.     }
  58. </style>
  59. </head>
  61. <body>
  62.     <div class="previewdiv">
  63.     <div class="row1"><span class="Header">Kindergarten Enrollment</span><br />ghfhfsdsdsds</div>
  65.     <div class="row2"><span class="Header">Kindergarten Enrollment</span><br />gfgfg</div>
  66.     <div class="row3"><span class="Header">Kindergarten Enrollment</span><br />gfgfg</div>
  67.     <div class="row4"><span class="Header">Kindergarten Enrollment</span><br />gfgfgfdsdsdsds</div>
  68.         <div class="row5"><span class="Header">Kindergarten Enrollment</span><br />fgfgfsdsdsdsd</div>
  69.     <div class="row6"><span class="Header">Kindergarten Enrollment</span><br />fgfgfgsdsdsdsds</div> 
  70. </div>
  72. </body>
  73. </html>
  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Joined: Jan 02, 2007
  • Posts: 147
  • Loc: Romania
  • Status: Offline

Post August 28th, 2008, 2:42 pm

why don't you try this:
.previewdiv{
width:400px;
overflow:auto;
}
.cell{
position:relative;
float:left;
width:200px;
}

<div class="previewdiv">

<div class="cell">cell1</div>
<div class="cell">cell2</div>
<div class="cell">cell3</div>
<div class="cell">cell4</div>

</div>

see how this works:)

Page 1 of 1

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 83 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.