Forum Moderators: not2easy
I have two DIV elements that are side by side - and are supposed to be two columns in a web layout. Everything works perfectly AS LONG AS I don't have any text or elements in the first (left) div. As soon as I put an image or text in the left content bar - it pushes whatever is in the right sidebar out of its div a bit. In IE when there is text in the left bar - it pushes the right sidebar down completely, and it won't even float next to it. So I am thinking I have a div problem. I will attach my HTML and CSS code. It's kind of hard to explain without showing a link! :-)
.narrowcolumn {
float: left;
clear: none;
padding: 5px;
display: block;
position: relative;
margin: 0 auto;
width: 680px;
}#sidebar
{
padding: 5px 0px 5px 5px;
margin: 0px 0px 0px 680px;
width: 300px;
display: block;
position: static;
clear: none;
height: 100%;
background: url(.gif) #F1F1F1;
}
And here is my HTML...
<!--Start Narrowcolumn--><div id="content" class="narrowcolumn">
Hello thsi is asdkljfa d
</div>
<!--End Narrowcolumn-->
<div id="sidebar">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') ¦¦ !dynamic_sidebar() ) : ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : ?>
</ul>
</div>
<?php return; ?>
<?php endif; ?>
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
<li><h2>Author</h2>
<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
</li>
-->
<?php if ( is_404() ¦¦ is_category() ¦¦ is_day() ¦¦ is_month() ¦¦
is_year() ¦¦ is_search() ¦¦ is_paged() ) {
?> <li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>
<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
for the day <?php the_time('l, F jS, Y'); ?>.</p>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
for <?php the_time('F, Y'); ?>.</p>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
for the year <?php the_time('Y'); ?>.</p>
<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
<p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>
<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives.</p>
<?php } ?>
</li> <?php }?>
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
<?php /* If this is the frontpage */ if ( is_home() ¦¦ is_page() ) { ?>
<?php wp_list_bookmarks(); ?>
<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php $current_site = get_current_site(); ?>
<li><a href="http://<?php echo $current_site->domain . $current_site->path ?>wp-signup.php" title="Create a new blog">New Blog</a></li>
<li><a href="http://<?php echo $current_site->domain . $current_site->path ?>" title="<?php echo $current_site->site_name ?>"><?php echo $current_site->site_name ?></a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>
<?php endif; ?>
</ul>
</div>
I have two DIV elements that are side by side - and are supposed to be two columns in a web layout. Everything works perfectly AS LONG AS I don't have any text or elements in the first (left) div. As soon as I put an image or text in the left content bar - it pushes whatever is in the right sidebar out of its div a bit.
It seems to work without problem, in IE5-6, Firefox, Opera and Konqueror... and it does not seem there would be any reason for it not to work, although, while your sample should have been seriously simplified (well, maybe you should start with simplifying the original code :P), you probably did not copied everything which could matter (and you probably didn't even test your sample code ^_^;).
I guess your problem comes from a container block, which might have a fixed width, which is not enough to contain both your .narrowcolumn, and your #sidebar, so the #sidebar is simply pushed below .narrowcolumn. Just increase this width. I don't know why the problem would not manifest itself when .narrowcolumn is empty, though, as you specify a fixed width, so even if it is empty, it should be displayed by the browser (and it is, in your sample). Maybe some random IE bug, if you only tested in IE.
Otherwise, you should probably repost a clearer sample (without the PHP stuffs, notably), which actually demonstrates the problem :)
[edited by: Mathieu_Bonnet at 1:12 pm (utc) on Mar. 28, 2008]
HTML CODE
<head></head>
<body>
<!--Start Header-->
<div id="header">
<div id="header-container">test</div>
</div>
<!--End Header-->
<div id="wrapper">
<div id="main">this is where main stuff goes</div>
<div id="sidebar">this is where sidebar goes</div>
</div>
</body>
CSS CODE
body {
margin: 0;
text-align: center;
background: url(images/background.gif);
}
#header {
width: 100%;
height: 100%;
background: url(images/header-bg.gif);
border-bottom: 5px solid #000000;
}
#header-container {
height: 150px;
width: 980px;
display: block;
margin: 0 auto;
text-align: left;
}
#wrapper {
width: 980px;
border: 5px solid #DCEAFD;
background-color: #FFFFFF;
padding: 0;
text-align: center;
display: block;
margin: 20px auto 20px auto;
}
#main {
width: 700px;
float: left;
background-color: #FFFFFF;
text-align: left;
display: block;
}
#sidebar {
width: 280px;
float: right;
background-color: #CCCCCC;
display: block;
}
[w3.org...]
width: sets the width of the content, the padding goes around that ... so your stuff gets too wide for it's containing element.
My second question is how to get the #sidebar or #main divs to extend along with the opposing div. So say #main div has more content than the #sidebar on a page - but I still want the #sidebar div to come all the way down parellel with the #main div. How do I get it to extend even though the content is a different size in each div?
I've tried adding HEIGHT: 100% commands for both #main and #sidebar - but that doesn't seem to work. Any thoughts?
Thank you for your awesome help!
Extending both columns to be the same height is a bit trickier. I never use it myself, but I think SuzyUK has some really great examples online. Take a look in her profile [webmasterworld.com] or search for "flexi floats" ... the no URLs rules makes it hard, but you'll find it. ;-)
I've not gotten around yet to figuring out how her flexi floats example looks that stunning.
for your case make a background image as wide as the sidebar and set it as the background to the wrapper div, have it repeat down the right or left side whichever side your bar is at.
a floated div can never be made to actually "stretch" but it can be made to appear to do so as long as the wrapper itself is set to contain/clear it's floated children ;)
swa66, thanks for your comments.. I could/should probably "sprite" that example now too (that would make an interesting howto), but I can't keep up! - it's another project for another day or someone else..
