So i was up all night and i gott realllly bored. And i was messing around with a 3 column templates that i created. I was wondering to myself about some of these questions.Here are some basic questions that i was iffy about when i was Developing the markup. 1.What is making my text not wrap around the div? -------------------------------------------------------------- 2.Why does my Div #header collapse when i give it a border of 1px the same with the sidebar and the footer. -------------------------------------------------------------- 3.Why doesnt my layout expand all the way down to the the bottom of the browser? without having to give my Main#div a Height? Isnt 100 px long enough? -------------------------------------------------------------- 4.The Div #nav coloumn is reallllyyy wide LOL, so why is this div not becoming more narrower when i set the specific width to 5% or less? -------------------------------------------------------------- 5. I have a template that im currently coding at the moment. and it has 3 Nav Middle section bars. inside The main main content. How do i create 3 divs for these Content sections? Is it a <ul><li></li></ul> list? and then i create something like .middlesection1 { height:40; width:100; float:left; padding:10px; margin:25; ?????? -------------------------------------------------------------- 6. what does margin Exactly do? -------------------------------------------------------------- 7. Im using floats. Ok, so what does Clearing my floats do? does it clear floats so when ur positioning them they dont collide together? -------------------------------------------------------------- 8. Whats the easiest thing to do when your given a PSD file and you need to convert it into Xhtml, do you start with your html first or your css? afterr you have sliced the PSD, into images. -------------------------------------------------------------- 9. I have a sidebar, and i want three sidebars like this template(example) all im doing is creating a <li> list with 3 images vertically align with the div correct? -------------------------------------------------------------- 10.My middle section Content div. I can floats divs inside of divs? Like i want another div to be wrapped around a image with some text around it. Ive seen this before. -------------------------------------------------------------- 11. Setting my divs to Overflow. i want my 3 divs my content,sidebar, and right sidebar to be set to overflow.. how do you do this ? Thats enough ill be writing up more more markup to answer basic questions.. About Basic Divs and Positioning. here is a live page www.blakeanthonydesign.com/testpage.html <html lang="en"> <head> <title>Basic Problems questions about 3 coloumn websites.</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="content-language" content="en"> <meta name="MSSmartTagsPreventParsing" content="true"> <meta http-equiv="imagetoolbar" content="no"> <meta name="robots" content="noodp"> <!-- to Hell with the Open Directory Project --> <meta name="description" content="A brief description of the current page goes here."> <meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished"> <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/screen.css" media="screen,projection"> <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/printer.css" media="print"> <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/handheld.css" media="handheld"> <script type="text/javascript" src="http://www.example.com/scripts/library.js"></script> </head> <style> type="text/css"> body { margin: 0px; padding: 0px; } div#header { text-align: center; background-color: #CCCCCC; height: 100px; margin: 0px; padding: 1px; border:px; } div#wrapper { background-color: #FFFF99; margin: 0px; padding: 0px; width: 100%; } div#navcol { padding: 10px; float: left; width: 5%; } div#main { background-color: #99FFFF; padding: 50px; margin-left: 26%; margin-right: 27%; } div#sidecol { float: right; width: 25%; padding: 10px } div#foot { border-top: solid #000 1px; background-color: #CCCCCC; padding: 10px; text-align: left; clear: both; } </style> <body> <div id="header"> <h1>Header Text</h1> </div> <div id="wrapper"> <div id="navcol"> <h4>This is a Nav bar</h4> <ul> <li><a href="http://www.blakeanthonydesign.com">link</a></li> <li><a href="http://www.blakeanthonydesign.com">link</a></li> <li><a href="http://www.blakeanthonydesign.com">link</a></li> <li><a href="http://www.blakeanthonydesign.com">link</a></li> <li><a href="http://www.blakeanthonydesign.com">link</a></li> </ul> </div> <div id="sidecol"> <h4>blahblahblahblahblahblahblahblahblahblah</h4> <ul> <li>blahblahblahblahblahblahblahblahblahblah</li> <li>blahblahblahblahblahblahblahblahblahblah</li> <li>blahblahblahblahblahblahblahblahblahblah</li> <li>blahblahblahblahblahblahblahblahblahblah</li> <li>blahblahblahblahblahblahblahblahblahblah</li> </ul> </div> <div id="main"> <h2>blahblahblahblahblahblahblahblahblahblah</h2> <p>blahblahblahblahblahblahblahblahblahblah</p> <p>blahblahblahblahblahblahblahblahblahblah</p> <p>blahblahblahblahblahblahblahblahblahblah</p> <p>blahblahblahblahblahblahblahblahblahblah</p> </div> </div> <div id="foot"> <p>www.BlakeAnthonyDesign.com</p> <p> <a href="mailto:john@blakeanthonydesign.com">Go check ur Inbox its full of spam</a> </p> </div> </body> </html> HTML: (heres the template i was referring to)
Your live example just seems to point to an image, so I'll answer what I can for now. 6. what does margin Exactly do? Margins are the external "padding" of an object, relative to it's closest element. I know, it sounds like gibberish. Maybe this helps? Essentially, it's similar to padding but it's applied outside the elements. 7. Im using floats. Ok, so what does Clearing my floats do? does it clear floats[...] It ensures that your block elements don't crash or overlap, and that your floats don't end up all over the map. 8. Whats the easiest thing to do when your given a PSD file and you need to convert it into Xhtml, do you start with your html first or your css? afterr you have sliced the PSD, into images. I usually start doing the CSS and XHTML frame, then start grabbing images from my PSD as I go. 11. Setting my divs to Overflow. i want my 3 divs my content,sidebar, and right sidebar to be set to overflow.. how do you do this ? I'm not sure why you want to declare an overflow value unless you need to, but here's the syntax: div.whatever { overflow: value; }