how to float sidebar

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
same2cool
Forum Newbie
Posts: 11
Joined: Tue Sep 24, 2013 5:05 am
Location: Lahore, Pakistan
Contact:

how to float sidebar

Post 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/
User avatar
penweb
Forum Newbie
Posts: 7
Joined: Mon Oct 07, 2013 12:32 pm

Re: how to float sidebar

Post 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>
Post Reply