homepage Welcome to WebmasterWorld Guest from 54.205.189.156
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
problems with DIV elements not rendering correctly
Maybe a float problem?
naitsirhc26




msg:3612729
 9:28 pm on Mar 27, 2008 (gmt 0)

Hello,

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>

 

Mathieu Bonnet




msg:3613254
 1:11 pm on Mar 28, 2008 (gmt 0)

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]

naitsirhc26




msg:3617648
 11:00 pm on Apr 2, 2008 (gmt 0)

Okay - here is a clearer sample. The problem I am having is that everything works perfectly, UNTIL I add a PADDING: 5px CSS code to the #main div. When I do that it pushes the #sidebar div down. Why is it doing this? Am I missing a piece of code that would fix this? Thanks!

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;
}

swa66




msg:3617693
 11:41 pm on Apr 2, 2008 (gmt 0)

Take a look at the first picture in the CSS2.1 box model doc:

[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.

naitsirhc26




msg:3617731
 12:40 am on Apr 3, 2008 (gmt 0)

Thank you very much for the response. Problem fixed. :-) Now I have two other questions with this same code. In FireFox the border going around the #wrapper div only wraps around the top and a bit on the sides of the div. It isn't wrapping all the way around. I've never seen anything like this - and can't quite figure out the problem.

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!

swa66




msg:3617775
 4:00 am on Apr 3, 2008 (gmt 0)

the containing box (#wrapper) only has two floated elements in it. Floats are (standard wise speaking) not part of the flow and take up no height in the container. Hence your wrapper has no height. The easiest solution is to add something after the two floated divs that's not floated and has "clear:both" on it. That should remain part of the flow and stretch out the containing element. [IE's box model is borked, don't use it as a reference]

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.

naitsirhc26




msg:3622406
 7:31 am on Apr 9, 2008 (gmt 0)

Does anyone have any further information/tips on how to get my sidebar to extend and match the length of the main content area? Thanks!

SuzyUK




msg:3622409
 7:50 am on Apr 9, 2008 (gmt 0)

Yes fake it :) - My layout (the demo of flexifloats) uses the "Faux Column" technique in conjunction with a bit of 'Sliding doors', the rounded corners at the bottom of each column are actually sliding tabs attached to the footer divs. This (rounding of all columns) will only work if at least some of the columns are fixed widths, which in my sample the sidebars are, and the centre is flexible.

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 ;)

naitsirhc26




msg:3622932
 7:28 pm on Apr 9, 2008 (gmt 0)

Thank you SuzyUK! I sent you a personal message.

SuzyUK




msg:3622948
 7:57 pm on Apr 9, 2008 (gmt 0)

You're Welcome and thanks for message!

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..

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved