Hi, im a fairly good html and css programmer, and was making a website template for my friend, and came across a problem, all my css looks fine, but it just doesnt apply to the html, tell me if you guys spot any problems, it just doesnt function. please note: i have tried <div id = ""> as <div class = ""> and in the style sheet changed the # to a . and vice versa, no results from that, and all the files are in one folder. Css: html: thanks in advance.
Can you clarify when you say things like "it just doesnt apply to the html" and "it doesnt function," you may know what you are saying but we don't, talk to us about alignment, rendering issues, how does it not "function" etc... Be specific or else no help will be found at this forum
If you are trying to do a 3 column design, you should chuck all of the three columns into an overarching div, then you use the following with the div margin: 0px auto 0px; (that aligns it to the center) you should specify width: e.g. 950px; then you should tell the left sidebar to float: left then the content to float: left then the right sidebar to float: right; if you want to get equal height columns you will probably need to use "faux columns" which I hate is that what you were looking for?
does it give you visualization problems or it's like the HTML page can't load the Css or what? are you stored the css in the same directory as you html file? (with the <link rel="stylesheet" type="text/css" media="screen" href="style.css"> you need to put them in the same directory content div can't work as it's declared as class in the html and as id in the css file
its the visualization problem, the css isn't being applied, because the small bar i made fast is just displayed in the top left corner, when it should be in the content id. ill try what small fish said, thanks. edit: nope didn't work, still stumped!
this is the stuff from my placeholder over at: http://smallfishbigmoney.com #placeholder { display: block; background-color: #FFFFFF; border: 1px solid #003366; margin: 0px auto 0px; width: 960px; }
never use a position: absolute; if you're making 2 or 3 column... use float: left; and float: right; instead... and be sure to put a container with a width that holds left and right block to prevent them going leftmost and right most of your screen... hope this helps....
Position:absolute for columns = /FAIL/ HARD Left:25% + position:static = /FAIL/ HARDER (since static means that left declaration should be IGNORED, as would top, right and bottom) That is NOT how one makes columns. Of course, being that you are trying to work in percentages on your side columns is GOING to fail unless you go back to table land, since margin in a number of needed spots will base it on font size, not container width. Take a look at this site: http://blog.html.it/layoutgala/ Try one of those instead.
Thanks for the awesome link DeathShadow. That is probably one of the best places for clean 3 column layouts that I have seen.
You don't really have to float one column left and the other right, you can just let them all float on the same side, and if one of the floats exceeds the width of the container then just set a width and overflow hidden on the container. If there are multiple floats, they'll just get kicked down if none of them (individual) exceed the width of the container. The overflow will contain the floats in modern browsers and the width will trigger hasLayout to contain floats in lte msie6.