Vary width of content depending on sidebar?

(@furiousfoggy)

Hello. I only want to display a side bar on my home page, and for all other pages I want the main content to fill the whole page. I have successfully inserted (into the page template);

<?php if (is_front_page() ) {get_sidebar(); }
else {} ?>

I have been playing with my CSS file for ages (trial and error) to figure out how to vary the width of the main content dependent on the presence of a sidebar, but this has only resulted in pushing the content above or below the side bar. Can any one help, please…

http://arboynehouse.co.uk/

CSS File

@import url(calendarstyle.css);

body{
	padding:0px;
	margin:0px;
	font-family:Trebuchet MS, sans-serif;
	font-size:11px;
	background:url(images/bg.gif) repeat-x top #4d4d4d;
}

img{
	border:0px;
}

a{
	color:#044d8b;
	text-decoration:none;
}

.sub{
	border:0px;
}

input, textarea{
	border:1px solid #cecece;
	font-size:12px
}

div#page{
	width:780px;
	text-align:left;
}

.pagetitle {color: #8a3132;} 

/*header*/
div#page #header{
	width:100%;
	height:210px;
	background:url(images/header.jpg) no-repeat top #FFFFFF;
}

#logo {
position: absolute;
top: 0px;margin: 0;
padding: 0;
background: transparent url(images/title.png) no-repeat 0 0;
width: 526px;
height: 167px;
overflow: hidden;
line-height: 1000px;}

/* h1 - TITLE if you don't want to use an image*/

#h1 {
	position: absolute;
	top:40px;
	padding: 0 0 0 50px;
	font-size: 1.45em;
	color: white;}

#h1 h1 a {text-decoration: none;
	color: #fff;
	letter-spacing: -1px;}

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

#rss2 {
	z-index: 2;
	position: absolute;
	top: 160px;
	width: 763px;
	text-align: right;}

#search {
	position: absolute;
	top: 15px;
	font: Trebuchet MS, Verdana, Sans-Serif;
	width: 763px;
	text-align: right;}

#s {	color: #ababab;
	width: 115px;
	font: Trebuchet MS, Verdana, Sans-Serif;
	font-size:1.15em;
	background: transparent;
	border: 0px solid transparent;

}

#s:focus {
	color: #3c3c3c;
	width: 115px;
	font: Trebuchet MS, Verdana, Sans-Serif;
	font-size:1.15em;
	background: transparent;
	border: 0px solid transparent;}

#s:hover {
	color: #3c3c3c;
	width: 115px;
	font: Trebuchet MS, Verdana, Sans-Serif;
	font-size:1.15em;
	background: transparent;
	border: 0px solid transparent;}

/* Menu */

    #tabs1 {	z-index: 4;
	position: absolute;
	top: 165px;	padding: 0px 0px 0px 22px;
	float:left;
	background:transparent;
	font-size:14px;
	line-height:normal;
	font-weight:bold;
      }
    #tabs1 ul {
          margin:0;
          padding:0px 0px 0px 0px;
          list-style:none;
      }
    #tabs1 li {
      display:inline;
      margin:0;
      }
    #tabs1 a{
	float:left;
	background: transparent url(images/menu.png) no-repeat right top;
	margin:0;
	color: white;
	padding:0px 12px 3px 10px;
	text-decoration:none;
      }

    #tabs1 a:hover {
	float:left;
	color: #4d4d4d;
	margin:0;
	text-decoration:none;}

/*header text*/

div#header_text{
	width:100%;
	height:181px;
	background:url(images/header_text_bg.png) no-repeat top #FFFFFF;
}

div#header_text #header_text_title{
	padding-top:25px;
	padding-left:40px;
	color:#FFFFFF;
	text-align:left;
	font-size:23px;
}

div#header_text #header_text_text{
	padding-top:2px;
	padding-left:40px;
	color:#FFFFFF;
	text-align:left;
	font-size:10px;
	font-family:Trebuchet MS, sans-serif;
	line-height:18px;
	width:55%;
}

/* blog*/

div#page #blog{
	background:#FFFFFF /*url(images/allbg.gif) repeat-y top left*/;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 180px;
	padding:  0 0 10px 0
}

/* SLIDEBAR Box Style */

.calendar {
	text-align:center;
	color: #3b74a4;}

.calendar a:hover {
	background: #3b74a4;
	color: white;
}

.calendar td {
height:15px;
padding:  0px 3px 0px 3px}

.calendar td a {
padding:  0px 3px 0px 3px;background: #cfeeff;
display:block;
color:#3b74a4;
text-decoration:none;
line-height:15px;
}

#today {padding:  0px 3px 0px 3px;	background: #3b74a4;
	font-weight: bold;
	color: white;}

.calendar td a:hover {
display:block;
color: white;
background: #3b74a4;
text-decoration:none;
}

.boxed ul {
        list-style: none;
	padding:0 0 0 0;
	margin:0;}

.boxed a {
	color: #044d8b;
	border-bottom: 1px dotted white}

.boxed a:hover {
	border-bottom: 1px dotted #65b5f9}

.boxed li
{	background: none;
        display: block;
	line-height:1.40em;
	font-size:1.10em;
	padding: 1px 3px 1px 15px;
	font-weight: bold;
	color: #e89642;	background:transparent url(images/mmenu.gif) no-repeat top left;
} 

.boxed {
margin: 0px;
}

.boxed .title {
	height: 23px;
	letter-spacing: 2px;
	padding: 0 0 0 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	color: #FFFFFF;
	background:#FFFFFF url(images/sli_title.gif) repeat-y top left;
}

/* Content */

#content {
		background:#FFFFFF url(images/allbg.gif) repeat-y top left;
	width: 730px;
	margin: 0 auto;
	padding: 0 35px 0px 15px;
}

blockquote {
	margin: 5px;
	padding: 0px 5px 5px 35px;
	background: transparent url(images/blockquote.gif) no-repeat ;
}

/* Content */

#mainhome {
	float: left;
	width: 500px;
	margin: 0 auto;
	padding: 0 30px 0px 5px;
}

#main {
	float: left;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0 30px 0px 5px;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 175px;
}

.white
{color: white;}

/* Footer */

#footer {
	height: 75px;
	padding: 55px 0 0 0;	line-height:1em;
	clear: both;
	color: #FFFFFF;
	width: 780px;
	margin: 0 auto;
	font-size:0.95em;
	background: #4d4d4d url(images/footer.gif);}

#legal {
	margin: 0;
	padding: 0;
	text-align: center;
}

#link {
	margin: 0;
	padding: 0;
	text-align: center;
}

#main a, #main a:hover, #main a:visited,
{
color: #3b74a4;
text-decoration:none;
}

#main h2 {
	margin-bottom: .5em;
	font-size: 1.6em;
	text-decoration:none;
	/*background: transparent url(images/title.jpg);  repeat-x top ; */
	padding: 7px 0px 5px 10px}

#main h2:hover {
	text-decoration: none;
	color: #3b74a4;
}
.post-author, .post-date, .post-comm, .post-time, .post-cath, .post-edit
{	font-size: 1em;
	text-decoration:none;
	color: #044d8b;	}

.entry {text-algin: justify;
	font-size: 1.10em;
	color: #02171d}

.post-author {
	padding: 0 0 3px 18px;
	background: url(images/p_author.gif) no-repeat 0 0;
	}
.post-date {
	margin: 0 0 0 10px;
	padding: 0 0 3px 23px;
	background: url(images/p_date.gif) no-repeat 0 0;
	}
.post-comm {
	padding: 0 0 3px 20px;
	background: url(images/p_commen.gif) no-repeat 0 0;
	}
.post-time {
	padding: 0 0 3px 18px;
	background: url(images/p_time.gif) no-repeat 0 0;
	}
.post-cath {
	padding: 0 0 3px 20px;;
	background: url(images/p_cat.gif) no-repeat 0 0;
}

.post-edit {
	padding: 0 0 3px 3px;
}

.post{margin:0 0 25px 0;}

.post .info{
padding:2px 3px 3px 8px;
border:1px solid #ccc;
background-color:#f7f7f7;
font-size:0.9em;
color:#505050;
}

/* Comments Styling */
#comment {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
font: Trebuchet MS, Verdana, Sans-Serif;
}

#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

#commentform {
margin: 1em 0;
background: #ffffff;
width: 280px;
}

#commentform textarea {
background: white;
	border-top: 1px solid #c8edff;
	border-left: 1px solid #c8edff;
	border-bottom: 1px solid #29a7e4;
	border-right: 1px solid #29a7e4;
width: 280px;
}
#commentform textarea:hover {
	background: white;
	border-top: 1px solid #29a7e4;
	border-left: 1px solid #29a7e4;
	border-bottom: 1px solid #c8edff;
	border-right: 1px solid #c8edff;
}
#commentform textarea:focus {
background: white;
	border-top: 1px solid #29a7e4;
	border-left: 1px solid #29a7e4;
	border-bottom: 1px solid #c8edff;
	border-right: 1px solid #c8edff;
}

#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #fff;
	border-top: 1px solid #c8edff;
	border-left: 1px solid #c8edff;
	border-bottom: 1px solid #29a7e4;
	border-right: 1px solid #29a7e4;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: white;
	border-top: 1px solid #29a7e4;
	border-left: 1px solid #29a7e4;
	border-bottom: 1px solid #c8edff;
	border-right: 1px solid #c8edff;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: white;
	border-top: 1px solid #29a7e4;
	border-left: 1px solid #29a7e4;
	border-bottom: 1px solid #c8edff;
	border-right: 1px solid #c8edff;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}

.submit1{
	width: 280px;
	cursor:hand;
	font-size:1.10em;
	background: #fff;
	border-top: 1px solid #c8edff;
	border-left: 1px solid #c8edff;
	border-bottom: 1px solid #29a7e4;
	border-right: 1px solid #29a7e4;}

.submit1:hover, .submit1:focus{
	background: white;
	border-top: 1px solid #29a7e4;
	border-left: 1px solid #29a7e4;
	border-bottom: 1px solid #c8edff;
	border-right: 1px solid #c8edff;}

Viewing 9 replies - 1 through 9 (of 9 total)

Saurus
(@saurus)

15 years, 4 months ago

Set the width of the page by percentages instead of pixels – the content will expand as required.
Thread Starter furiousfoggy
(@furiousfoggy)

15 years, 4 months ago
Thanks for the idea. I have tried that, and I sort of works. I also put the getsidebar instruction above the content, otherwise it just sat at the bottom of the page. The only problem I have now is that the formatting the sidebar is messed up. I tried for hours to edit the side bar titles, but couldn’t figure out what CSS controls it.

Also, the side bar doesn’t extend all the way to the bottom. ou can see the impact on the site.

I’ll keep trying.
```
/* Content */
#main {
	float: left;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0 30px 0px 5px;
}

/* Sidebar */
#sidebar {
	float: right;
	width: 175px;
}
```
Thread Starter furiousfoggy
(@furiousfoggy)

15 years, 4 months ago

Ok, I fixed it. I’m sure there was a way of doing it just with the CSS, but I don’t really know what I’m doing, I’m just making it up as I go along. In the end I used an if else statement to call up one of two CSS IDs…

`<?php if (is_front_page()) { ?> <div id=”mainhome”>
<?php } else { ?> <div id=”main”>
<?php } ?>’

mainhome is formatted to 500px wide, so the side bar fits.
main is 100% as there is no side bar.
kjagen
(@kjagen)

14 years, 7 months ago
Any idea how I can do this with this header code?
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?php
	global $inove_nosidebar;
	$options = get_option('inove_options');
	if (is_home()) {
		$home_menu = 'current_page_item';
	} else {
		$home_menu = 'page_item';
	}
	if($options['feed'] && $options['feed_url']) {
		if (substr(strtoupper($options['feed_url']), 0, 7) == 'HTTP://') {
			$feed = $options['feed_url'];
		} else {
			$feed = 'http://' . $options['feed_url'];
		}
	} else {
		$feed = get_bloginfo('rss2_url');
	}
?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	<link rel="alternate" type="application/rss+xml" title="<?php _e('RSS 2.0 - all posts', 'inove'); ?>" href="<?php echo $feed; ?>" />
	<link rel="alternate" type="application/rss+xml" title="<?php _e('RSS 2.0 - all comments', 'inove'); ?>" href="<?php bloginfo('comments_rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	
	
	<style type="text/css" media="screen">@import url( <?php bloginfo('stylesheet_url'); ?> );</style>
	
	<?php if (strtoupper(get_locale()) == 'ZH_CN' || strtoupper(get_locale()) == 'ZH_TW') : ?>
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/chinese.css" type="text/css" media="screen" />
	<?php elseif (strtoupper(get_locale()) == 'HE_IL' || strtoupper(get_locale()) == 'FA_IR' || strtoupper(get_locale()) == 'UG_CN' || strtoupper(get_locale()) == 'CKB') : ?>
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/rtl.css" type="text/css" media="screen" />
	<?php endif; ?>
	
	

	
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/base.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menu.js"></script>
	

	<?php wp_head(); ?>
</head>

<?php flush(); ?>

<body>

<div id="wrap">


<div id="container" <?php if($options['nosidebar'] || $inove_nosidebar){echo 'class="one-column"';} ?> >

<?php include('templates/header.php'); ?>
```
kjagen
(@kjagen)

14 years, 7 months ago

I`ve managed to get one page id post content to get less wide
#mainhome.

But how can I get the sidebars to be wider for just some pages
#mainsidebar and so on??

kjagen
(@kjagen)

14 years, 7 months ago

How can I write this if else for both mainhome (page width) AND
#sidebarwide (sidebar width)?

`<?php if (is_front_page()) { ?> <div id=”mainhome”>
<?php } else { ?> <div id=”main”>
<?php } ?>’

So far it\s just the page width. How can I add one more # into this?

krembo99
(@krembo99)

14 years, 7 months ago

I fail to understand exactly what effect you want to achive .
What Saurus wrote you on the first response was the right way of approaching that , maybe combined with display:none on some conditions…. why do you go on manipulating the loop or queries ?

anyhow, to add one more condition (if that is what you want) use

<?php
if (something) {
DoSomething;
} elseif(SomethingElse) {
DoSomethingElse;
} else {
DoAnotherSomething;
}
?>

kjagen
(@kjagen)

14 years, 7 months ago

What I want is the possibility to have wider sidebar for a certain page. Like here
http://www.uka.no/
When you go to another page, its just one sidebar. On the main its 2 columns.

I tried the % but what to set % for main then?
Anyway this changes the layout for all page, right?

krembo99
(@krembo99)

14 years, 7 months ago

you need to float everything inside a container to do that …
the main float left , the sidebar float right, and the content INSIDE the sidebar floats left

for your question . you can set the main to auto
But anyhow , in the example you gave, I suspect they made a CUSTOM PAGE .

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Vary width of content depending on sidebar?’ is closed to new replies.

Vary width of content depending on sidebar?

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics