-
1. Re: Trying to learn to code div tag so that i can make 3 columns
Nancy O. Aug 27, 2013 11:10 AM (in response to iBabs2)#wrapper{
width:900px;
margin:0 auto;
background-color:#CCCC66;
overflow:hidden; /**float containment**/
}
#history,
#attitudes,
#per {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
float:left;
width:33.33%
min-height:80px;
}
#history { background-color:#FF9999;}
#attitudes { background-color:#CCFF99;}
#per { background-color:#FFFF99;}
Nancy O.
-
2. Re: Trying to learn to code div tag so that i can make 3 columns
iBabs2 Aug 27, 2013 11:21 AM (in response to Nancy O.) -
3. Re: Trying to learn to code div tag so that i can make 3 columns
Nancy O. Aug 27, 2013 11:38 AM (in response to iBabs2)Copy & paste this code into a new, blank document in code view. Save and preview in browsers.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 document</title> <style> body { margin:0; padding:0; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; font-size:16px; } #wrapper { width: 900px; margin: 0 auto; background-color: #CCCC66; overflow: hidden; /**float containment**/ } /**three columns**/ #history, #attitudes, #per { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: left; width: 33.33%; min-height: 80px; padding:12px; } #history { background-color: #FF9999; } #attitudes { background-color: #CCFF99; } #per { background-color: #FFFF99; } </style> </head> <body> <div id="wrapper"> <div id="history"> <h3>History</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p> </div> <div id="attitudes"> <h3>Attitudes</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p> </div> <div id="per"> <h3>Per</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p> </div> <!--end wrapper--></div> </body> </html>Nancy O.
-
4. Re: Trying to learn to code div tag so that i can make 3 columns
iBabs2 Aug 27, 2013 11:48 AM (in response to Nancy O.)Hi Nancy!!
That worked!!!
Because of the padding I added width to the wrapper and made the percent 30% wide...I will play with it to even things out...but it doing what I was hoping.
The code seems the same except its an Internal style sheet.....do you think there was an issue with the linked one????
thanks so much!!!
babs
-
5. Re: Trying to learn to code div tag so that i can make 3 columns
Nancy O. Aug 27, 2013 11:56 AM (in response to iBabs2)It's possible your HTML and/or linked CSS had errors in it. Use the W3C validation tools to check your code.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
-
6. Re: Trying to learn to code div tag so that i can make 3 columns
iBabs2 Aug 27, 2013 11:57 AM (in response to Nancy O.)thanks!!!
I will
-
7. Re: Trying to learn to code div tag so that i can make 3 columns
iBabs2 Aug 29, 2013 12:11 PM (in response to iBabs2)HI Nancy,
I have a question...I have been trying to research this myserlf, but I am not finding any good answers....
can you please explain what these 2 lines of code mean?
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
thank you!!!!!
babs
-
8. Re: Trying to learn to code div tag so that i can make 3 columns
Nancy O. Aug 29, 2013 12:41 PM (in response to iBabs2)Those are browser prefixes for Firefox (mozilla) and Safari (webkit) because the CSS3 specs haven't been fully implemented yet.
If you want to know what box-sizing does, Chris Coyier at CSS Tricks had this to say:
http://css-tricks.com/box-sizing/
Nancy O.
-
9. Re: Trying to learn to code div tag so that i can make 3 columns
iBabs2 Aug 29, 2013 12:42 PM (in response to Nancy O.)Thank you so much
Trying to really understand all fo this!!
babs





