Page 1 of 1

how to float sidebar

Posted: Wed Oct 02, 2013 1:23 pm
by same2cool
My sidebar css code is here.

tell me main problem how to adjust sidebar at right and what is error.

Code: Select all

@charset "utf-8";
/* CSS Document for : SameeArticles.Blogspot.com */
#logo
	{
		width:200px;
		height:200px;
		float:right;
		background-color:#F6F2B1;
	}

html
	{
		height:100%;
		width:100%;
		background:url(http://www.southsoft.co.za/images/mysql.jpg) center center no-repeat;
		background-position:center;
		/* You can also give local file path */
	}

h1
	{
		background:#00FF00;
		border-style:dotted;
		margin-right:200px;
		color:#000000;
		font-family:"Times New Roman", Times, serif;
		text-transform:uppercase;
	}

h2, h3
	{
		background:#CCCCCC;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:16px;
		color:#000000;
		font:Georgia, "Times New Roman", Times, serif;
	}

a:link 
	{
		color:#000000;
		text-decoration:none;
	}

body
	{
	color:#0000FF;
	font-family:"Courier New", Courier, monospace;
	background-color:F6F2B1;
	/*background-image:url(http://www.getacho.com/download/phpcss/images/bg-color.png);
	background-repeat:repeat;
	background-attachment:fixed;*/
	}
	
#sidebar
	{
	float:right;
	border:solid;
	border-color:#0000FF;
	border-width:medium;
	height:100%;
	width:200px;
	margin-top:200px;
	background-color:#00FF00;
	position:fixed;
	}
I am now getting :banghead:

here is my Tamplate,

Don't make bad comment about my css, I am newbie in css. learning it

http://www.getacho.com/download/

Re: how to float sidebar

Posted: Wed Oct 09, 2013 11:59 am
by penweb
Can you post your HTML? That would help me see what your working with in more detail..

Otherwise, from just a quick glance, I can only see two divs in your css. If your looking for a sidebar, I would try something like this:

Code: Select all

#mainBody {
 setup to be your main container element for your whole page
}

#contentBody {
this div contains both your #content and #sidebar divs
}

#content {
this contains your main content
}

#sidebar {
this contains your sidebar content
}
When you have a parent div you can then just use a simple float, i.e. float: right; You do NOT need to set the position to absolute. That is unnecessary. Instead when you do your HTML, set sidebar to read by the browser first, like this:

Code: Select all

<html>
<head></head>
<body>
<div id="mainBody">
<div id="contentBody>
<div id="sidebar"></div>
<div id="content"></div>
</div>
</div>
</body>
</html>