I just started to learn CSS. So I decided to initiate a blog template using CSS. Of course it's only for learning purpose and by creating it I just want to make myself good in CSS. However I am stuck right at the initial phase. Below I am posting the code and then will explain the problem. The code in .css file named as my_first.css: body { background-color:#000000; width:100%; height:100%; } h1 { color:#ffffff; margin-top:50px; text-align:center; } #container { background-color:#ffffff; margin:100 0 0 100; width:55%; } #sidebar { float:right; margin-right:100px; margin-top:0px; background-color:#ffffff; width:320px; display:inline; } Coding in HTML file: <html><head> <title>My Blog Page</title> <link rel="stylesheet" type="text/css" href="my_first.css" /> </head> <body><h1>My Blog Page</h1> <div id="container"><center><b>My first text of my blog.</b></center></div> <div id="sidebar"><center><b>Widgets Go Here</b></center></div> </body> </Html> The problem is with the side bar. I mean that I want the side bar to be right exactly beside the main container i.e "my first text of my blog". However the side bar though appearing beside it, but it is slightly below it as well. I want it to be right exactly beside the container and not above or below it. So please figure out the corrections I can make in it to achieve my desired result. Thanks in advance
First thing i would like to point out is that you need to define your HTML Document type ( include DTD at your HTML ) : read more here : [ url=http://w3schools.com/tags/tag_doctype.asp]HTML < ! DOCTYPE > Declaratio[/url] Next, if you want to use float to make that #sidebar positioned right you need to place it before the #container. Else it will be positioned below ( right below ) after the #container. However, i think you want to make that #container to stretch out filling the page .. your approach isn't right. Read more about blocks & float box behaviour. Just a sample case, lets say we'll use XHTML 1 Strict DTD, with fixed width on the right #sidebar and the content would fill out the rest of the page here's my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head> <title>My Blog Page</title> <style type="text/css"> body{ background-color:#000000; } h1{ color:#ffffff; margin-top:50px; text-align:center; } p{ color:#000; font:normal 10px/15px verdana, sans-serif; } #wrap{ background:#ccc; margin:0 auto; } #container{ margin:0; padding:4px } #sidebar{ float:right; background-color:#ffffff; width:320px; padding:4px; border:1px solid #999; } .clear{ clear:both; } </style> </head> <body><h1>My Blog Page</h1> <div id="wrap"> <div id="sidebar"><p>Widgets Go Here</p></div> <div id="container"><p>My first text of my blog.</p></div> <div class="clear"></div> </div> </body> </html> Code (markup):
NOT that there is any reason to be wasting code on that clearing nonsense Though designmonkey rightly removed a bunch of tags you shouldn't have been using in the first place; specifically CENTER. If you are going to use CSS, you should probably use a MODERN (aka STRICT) doctype and not use deprecated tags like FONT and CENTER, or deprecated attributes like ALIGN. (only legitimate place for align is on a COL tag, and Firefux still ignores that) I would also suggest that you use a CSS reset. The one I use is 'in-between' the fatter bloated ones like Eric Meyer's "reset reloaded" but still a bit heftier than the problematic "* { margin:0; padding:0; }" - it targets what I need reset and nothing more. Oh, and NEVER set content paragraphs in px metric fonts, much less a completely inaccessible/illegible 10px... it's called %/em, use it! I also usually prefer to have my content area BEFORE my sidebar, but that really hinges on where you plan on placing your menu; across the top or in the sidebar. Since you seem to have it on the right, it makes more sense to put it after - and designmonkey's is flawed in that your content area would flow UNDER the sidebar if the sidebar is shorter than the content. Here's how I'd approach that: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <title> My Blog Page </title> <style type="text/css"> /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } body{ font:normal 85%/130% arial,helvetica,sans-serif; color:#FFF; background:#000; } h1{ font:bold 120%/120% arial,helvetica,sans-serif; padding-top:50px; text-align:center; } p { padding:0.5em; } #fauxColumns { overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats in IE6/earlier */ color:#000; background:#CCC; } #contentWrapper { float:left; width:100%; } #content { margin-right:322px; /* make room } #sidebar{ position:relative; float:left; width:320px; margin-left:-322px; /* make zero width for float calculations fitting it next to 100% contentWrapper */ border:1px solid #999; } </style> </head><body> <h1>My Blog Page</h1> <div id="fauxColumns"> <div id="contentWrapper"><div id="content"> <p>My first text of my blog.</p> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"> <p>Widgets Go Here</p> <!-- #sideBar --></div> <!-- #fauxColumns --></div> </body></html> Code (markup): the zero width float trick used there is a close relative of the 'holy grail' type layouts. I find even when you only have two columns it is the least problematic float handling method - even if it does seem a bit counterintuitive at first. About three years ago I wrote a page that explains how it works.
Haha, okay. Since saadi said he just started to learn css i thought it would be good to introduce him one step of the ladder at a time. However, you're right Deathshadow, if using my code sidebar wont fill the layout heights. Thorough reply and nice article you got. Kudos.
@designmonkey @deathshadow Thanks for the tips. I have some more questions. at some places where you have set the font size, you have attributed two font sizes to an element like 10px/15px. so what does it mean? Will the font size be 10 or 15? And if I do not specify the doctype, would this effect my design in fire fox also? Or in other words my sidebar is appearing below the container is because I have not specified the doctype...!!! And thanks again for posting.
On the shorthand properties for font 10px/15px would set the font-size to 10px and the line-height to 15px . Its the same case if you use percentage ( % ) or ems ( em ), however the better part of using % or em is that your font would render more nicely even when the page zoomed. Thats why defining Doctype is mandatory IMO, by specifying the Doctype you tell the browser what type of document u're coding, so the browser could render it accordingly. If you didn't specify they'll use their own method to render ( every browser have different approach on rendering the page if you didn't specify DTD ), it might even fall to quirks mode. To sum it up, you can't control browser rendering behavior if you didn't specify DTD.
OK got that... I still have more questions. What about the <div></div> heights? I mean that how to set the height of this tag so that it accommodates and displays all the material in it and expands and contracts according to the material present in it. The div tags in the layout (created from the above rectified coding) are vanishing the text after certain length as they are not expanding. So how to deal with it?