Jump to content

styling border boxes


harryd

Recommended Posts

We don't recommend tables and td cells here for layout, try divs like this which produces three equal width columns with the same height. You can separate the styles for the columns and gve them different widths or heights if you want.

br />"http://www.w3.org/TR/html4/strict.dtd"> 








Test

<br />#content { width: 600px; margin: auto; }<br />.col1, .col2, .col3 { float: left; width: 200px; height: 50px; }<br />.clear: { clear: both; width: 100%; height: 0; visibility: none; }<br />




Column 1 row 1
Column 2 row 1
Column 3 row 1
 
Column 1 row 2
Column 2 row 2
Column 3 row 2
 
Column 1 row 3
Column 2 row 3
Column 3 row 3
 






Link to comment
Share on other sites

This is what I used in Dremweaver and it does not show any borders.

 

 

 

 

could you help me with the first col and where should the code go in the style.

 

Column 1 row 1

 

#content {

float: left;

color: #333;

border: 1px solid #FFFFFF;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 630px;

width: 506px;

display: inline;

background-color: #FFFFFF;

}

 

I hope I am not asking to much.

You guys are huge help.

Edited by harryd
Link to comment
Share on other sites

This is what I did till now and everything is broken.

 

#content { width: 506px;

height: 630px;

margin: auto;

background-color:#FFFFFF;

display:inline;

padding: 10px; }

.col1, .col2, .col3 { float: left; width: 200px; height: 50px; border:#006633; }

 

P

 

Here is my original content.

 

#content {

float: left;

color: #333;

border: 1px solid #FFFFFF;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 630px;

width: 506px;

display: inline;

background-color: #FFFFFF;

}

 

I am stuck :|

Help

Link to comment
Share on other sites

It is broken because your content div is only 506px wide and you have 3 columns of 200px each plus the extra 1px on each side for the border. So you need to make your content div 200px times 3, plus 6px for the borders.

 

In other words:

 

#content {

width: 606px;

height: 630px;

margin: auto;

background-color:#FFFFFF;

display:inline;

padding: 10px;

}

 

.col1, .col2, .col3 {

float: left;

width: 200px;

height: 50px;

border: 1px solid #006633; }

Link to comment
Share on other sites

Here are two styles I used for my content. If anybody could take a look.

 

This is the new style but it does not match the line up like the old one.

 

#content {

float: left;

width: 522px;

height: 630px;

margin: auto;

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

}

.col1, .col2, .col3 {

float: left;

width: 150px;

height: 150px;

border: 1px solid #006633;

margin: 0px 0px 0px 0px;

}

 

Here is the old style

 

#content {

float: left;

color: #333;

border: 1px solid #ccc;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 530px;

width: 526px;

display: inline;

background-color: #FFFFFF;

 

My goal is not to use tables. I did follow the advice above but still need some help.

 

Thanks

Link to comment
Share on other sites

I did change html.

Thanks for the link and your help guys.

Since I started to work on #content footer and right column went out of line. I cant figure out the spacing between cols.

I would appreciate a tutorial link.

 

Thanks again!

Edited by harryd
Link to comment
Share on other sites

here is the css that I am woking on.

 

#content {

float: left;

width: 526px;

height: 630px;

margin: auto;

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

}

 

I am not able to work with cols and rows. Space between them etc. Wickham and Virtual were helpful but still need more help.

 

.col1, .col2, .col3 {

float: left;

width: 150px;

height: 150px;

 

}

 

Thanks

Edited by harryd
Link to comment
Share on other sites

Needed to use a different technique to clear the content div.

 

br />"http://www.w3.org/TR/html4/strict.dtd"> 








Test

<br />    <br />body { <br />    margin: 0;<br />    padding: 0;<br /><br />    }<br />    <br />#content  {<br />    <br />    width: 490px;<br />    height: auto;<br />    border: 10px dotted #cff;<br />    padding: 2px;<br />    <br />    }<br />    <br />.col1, .col2, .col3 {<br />    float: left;<br />    width: 150px;<br />    height: 150px;<br />    border: 3px solid #000;<br />    background-color:#FFc;<br />    margin: 3px;<br />   <br />}<br /><br /><br />.clear:after{ <br />    content: "."; <br />    display: block; <br />    height: 0; <br />    font-size:0; <br />    clear: both; visibility:hidden; <br />    } <br />.clear {<br />    display: inline-block;<br />    } <br />    <br />/* Hides from IE Mac \*/ <br />* html .clear{<br />    height: 1%;<br />    } <br />.clear{<br />    display:block;<br />    } <br />/* End Hack */ <br /><br />





Column 1 row 1
Column 2 row 1
Column 3 row 1

Column 1 row 2
Column 2 row 2
Column 3 row 2

Column 1 row 3
Column 2 row 3
Column 3 row 3




 

More info on this clearing method can be found at http://csscreator.com/?q=attributes/containedfloat.php

Edited by jlhaslip
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...