WordPress › Support » How can I increase the gap between the sidebar and the posts?

BrianVS
Member
Posted 2 years ago #

My website is want-signed.com and if you notice there's not enough space between the sidebar and the main content. I can't figure out which style to edit to increase the width of the sidebar, or the distance between sidebar and content to make it look better.

Any help would be appreciated.

PS. Here's the two stylesheets in my theme:

/*reset.css*/body{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*fonts.css*/body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:99%;}
/*grids.css*/body{text-align:center;}#ft{clear:both;}#doc333,#doc3332,#doc3333,#doc3334,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}#doc3332{width:73.074em;*width:71.313em;}#doc3333{margin:auto 10px;width:auto;}#doc3334{width:74.923em;*width:73.117em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.3207em;*width:12.0106em;}.yui-t1 #yui-main .yui-b{margin-left:13.3207em;*margin-left:13.0106em;}.yui-t2 .yui-b{float:left;width:13.8456em;*width:13.512em;}.yui-t2 #yui-main .yui-b{margin-left:14.8456em;*margin-left:14.512em;}.yui-t3

html>body #content {
	height: auto;
	min-height: 580px;
}

body{
	font-family: verdana;
	font-size: 95%;
	line-height: 115%;
	background-color: #1A1A1A;
	background-image: url(images/bg_flower.gif);
	background-repeat: repeat;
	background-position: center top;
	text-align: center;
}

body,td,th {
	color: #FFFFFF;
}

a, a:link {
	padding: 1px;
	color: #FFFFCC;
	text-decoration: underline;
}

a:hover {
	color: #FFFFCC;
	text-decoration: none;
	;
}

h1 {
	font-family: georgia;
	font-weight: bold;
	font-size: 190%;
	padding-top: .1em;
	padding-bottom: .5em;
}

h2 {
	font-family: Arial;
	font-weight: bold;
	font-size: 150%;
}

h3 {
	font-family: georgia;
	font-size: 130%;
}

h4 {
	font-size: 105%;
}

p {
	font-size: 80%;
	margin-bottom:1em;
}

strong, b {
	font-weight: bold;
}

em, i {
	font-style: italic;
}

code {
	font: 1.1em 'Courier New', Courier, Fixed;
}

acronym, abbr
{
	font-size: 0.9em;
	letter-spacing: .07em;
}

a img {
	border: none;
}

#hd{
	text-align: center;
	padding-top: 24px;
}
#hd h1{
	font-size: 290%;
	color: texttitlecolor;

}

#hd h1 a{
	text-decoration: none;
	color: texttitlecolor;
}

h3 a:link, h3 a:hover, h3 a:visited{
	color: #0099DD;
}

.item {
	padding: 10px;
	background-color: #1A1A1A;
	background-image: url(images/bg_overlay.png);
	background-repeat: repeat;
	text-align:left;
	border: 1px solid #1A1A1A;
	margin-bottom: 1em;
	border: 1pt solid #000000;

}

.item ul {
	list-style-type: disc;
	padding-left: 15px;
	margin-left: 10px;
	font-size: 80%;
}

.item ol{
	list-style-type: decimal;
	padding-left: 15px;
	margin-left: 10px;
	font-size: 80%;
}

.itemhead{
	padding-top: 5px;
	padding-bottom: 5px;
}

.chronodata {
	display: inline;
	text-align: right;
	margin-left: 2em;
	font-size: 80%;
}

.itemhead h3{
	display: inline;
}

input{
	font-size: 80%;
}

.metadata{
	line-height: 190%;
	font-size: 75%;
}

.metadata a:link, .metadata a:hover, .metadata a:visited{
	color: #FFFFCC;
}

.tags, .catagory {

	display: block;

}

.commentlist p {
	clear: both;
	font-size: 95%;
}

cite{
	font-size: 95%;
}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
}

.commentmetadata {
	font-size: 80%;
	float: right;

}
.commentlist {
	margin-top: 5px;
}
.commentlist li {
	padding: 2px;
	border-top: 1px solid #1A1A1A;
}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #FFFFCC;
}

.navigation a:link, .navigation a:hover, .navigation a:visited{
	color: #FFFFCC;
}

.alignright {
	float: right;
}

.alignleft {
	float: left
}

#secondary, #third{
	background-color:  ;
	background-image: url(/);
	background-repeat: repeat;
	text-align:left;
	padding: 0px;
	border: 1px solid #1A1A1A;
	SP_GRADIENT
}

#secondary h4, #third h4{
	color: #859E6C;
	font-family: Trebuchet MS, arial, sans-serif;
	margin-top: 5px;
	padding: 3px;

}

#secondary p, #third p{
		padding: 3px;
		font-size: 70%;
}

#searchform {
	clear: both;
	margin-bottom: 5px;
	margin-left: 2px;
	padding: 3px;
}

#third {
	margin-left: 9px;
}

#menu {padding:0; border:0px solid #fff }
#menu ul {list-style:none; margin:0; padding:0; font-size:85%; }
#menu ul li { padding:0; margin:0; border-bottom:1px solid #FFFFFF; }
#menu ul li a { display:block; padding:4px 4px 4px 10px; text-decoration:none; color: #FFFFFF; }
#menu ul li a:hover { color:myheadttcolor; background: #0FF722; }

li .categories, li .linkcat, li .pagenav {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.yui-nav{
	margin-bottom: -1px;
}

.yui-navset .yui-nav a:hover {
	background-color: #0FF722;
	color: #FFFFFF;
}

.yui-navset .yui-nav li a {
    background-color: #1A1A1A;
	background-image: url(images/bg_overlay.png);
	background-repeat: repeat;
	border-bottom: 0px;
	color: #FFFFFF;
	padding: .3em .7em .3em .7em;
	text-decoration:none;
	font-size: 85%;
}

#wp-calendar {
	empty-cells: show;
	font-size: 90%;
	margin: 0;
	width: 90%;
	padding: 3px;
}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a {
	display: block;
	text-decoration: none;
}

#wp-calendar td {
	color: #FFFFFF;
	font-size: 70%;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
}

#wp-calendar #today {
	background: ;
	color: #0FF722;
}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}

#ft {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #FFFFCC;
}

#ft a:link, #ft a:hover, #ft a:visited{
	color: #FFFFCC;
}

David Calhoun
Member
Posted 2 years ago #

From your linked CSS files, it looks like you are using some sort of grid system? Typically grid systems have the margins/padding built into them.

But to add space between the sidebar and middle column you would have to add either margin or padding to one or both of the <divs> in the CSS. Like:

.divname {
     margin-right: 20px;
}

or

.divname {
     padding-right: 20px;
}

The ".divname" would be the name of the <div> your side bar is included in.

BrianVS
Member
Posted 2 years ago #

#menu {  margin-right: 10px; 

 border:0px solid #fff }
#menu ul {list-style:none; margin:0; padding:0; font-size:85%; }
#menu ul li { padding:0; margin:0; border-bottom:1px solid #FFFFFF; }
#menu ul li a { display:block; padding:4px 4px 4px 10px; text-decoration:none; color: #FFFFFF; }
#menu ul li a:hover { color:myheadttcolor; background: #0FF722; }

I've narrowed down that the sidebar is under the menu div. But i still can't figure out how to increase the distance. I made margin-right as extreme as 80 px, and all it did was decrease the space for the lettering.

The main problem is that my category dropdown goes too far right.
What should I edit in this code to shorten it a bit?

WordPress.org

Forums

[resolved] How can I increase the gap between the sidebar and the posts? (3 posts)

Topic Closed

About this Topic

Tags

Code is Poetry