HTML Forum

**ehentai** · 04-04-2007, 04:11 PM

I can't put a link a to my site, sorry, but I'll try to explain myself the best I can.

I have a blog at blogger (blogspot).
Somewhere in the code I have a section that I call "right" that, inside, has a section called "sidebar", and two columns, side-by-side, called "rightsub" and "rightsub2". You can see the code below:

Code:

<div id='right'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
    </b:section>

    <div class='subcontainer'>
        <b:section class='rightsub' id='rightsub' preferred='yes'>
            <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
            <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
        </b:section>

        <b:section class='rightsub2' id='rightsub2' preferred='yes'>
            <b:widget id='Image1' locked='false' title='ghhghg' type='Image'/>
            <b:widget id='Text3' locked='false' title='sdfgfsgfs' type='Text'/>
        </b:section>
    </div>
</div>

Don't worry about the b:widget... In my case, they function like a piece of text.

The CSS tags that apply to this code are:

Code:

#right{ /* Right Area */
    margin-left:60%; /* related to the space between #left and #right */
    margin-top:0px;
}

#sidebar{
    margin:0px;
    padding:0px;
}

.subcontainer { /* 2 column zone of the right side */
    width:98%;
    margin-top: 25px;
    border:none;
}

.rightsub{
    float:left;
    width:200px;
}

.rightsub2{
    margin-left:57%;
    width:160px;
}

.right{
    text-align:right;
}

/* Don't know if this also helps:*/
.widget {
  margin-bottom: 1em;
}

.widget-content {
  margin: 0 0px;
}

#right h2{
    width:98%;
    font-size:1.6em;
    top: 0px;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

THE PROBLEM is with the sections "rightsub" and "rightsub2", that are side-by-side. The "rightsub" area displays OK, but the "rightsub2" section has a problem: only the first element (in this case, a widget) displays on top of the "rightsub2" area. All other elements are thrown to the bottom of this area. But the bottom of "rightsub2" only starts where the "rightsub" section ends, creating a huge gap...

Confusing? I'll try throwing an image...

PLEASE HELP!!!!

**ehentai** · 04-04-2007, 04:51 PM

Images of the problem

Upper zone:

Bottom zone:

**LadynRed** · 04-04-2007, 06:51 PM

Looks like float drop to me. That means that the 57% of the total container area PLUS the 160px width is too wide to fit into the space you've allowed - so it gets dropped to where there IS space. Do the math, check your widths. Try reducing the width of your rightsub2 and see what happens.

**ehentai** · 08:01 AM

No, that's not the problem. Done that, but it only makes the rightsub2 zone shrink (of course), but the problem remains...

**ehentai** · 04-05-2007, 08:01 AM

And yes, doing the math, the problem shouldn't exist...

**ehentai** · 04-05-2007, 11:52 AM

The images are taken from Firefox... I've noticed that in IExplorer the "rightsub2" (green area) only start displaying where the red zone ends... Not even the first widget shows right...

**LadynRed** · 04-05-2007, 04:12 PM

Quote:

I've noticed that in IExplorer the "rightsub2" (green area) only start displaying where the red zone ends

Yep.. and that is exactly what float drop is.

Suggest you try reading thru the MANY IE bugs and the fixes for them:
http://www.positioniseverything.net/explorer.html

Without seeing ALL of the code and CSS there's no easy way to help you debug this. MANY things could be contributing.

**ehentai** · 04-06-2007, 12:15 PM

But, although in a different way, this also happens in Firefox and Opera...

BTW, here's all the code:

Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Name:        Andreas4 Modified

Original template by:
URL:         http://www.geckandfly.com
Updated by:  http://www.blogcrowds.com
----------------------------------------------- */

body{
    margin:0;
    padding:0; /* Affects the distance of the "container" to the browser-window */
    background:#e6e6e6;
    color:#333;
    text-align:center;
    background-color: #FFFFFF; /* Affects the Background Color */
    font-family: Arial, Helvetica, sans-serif; /* Affects the Blog Title */
    font-size: 76%; /* Affects all the site fonts */
}

a{
text-decoration:none;
color:#269;
font-weight:bold;
}

a:hover{
text-decoration:underline;
}

p{
    line-height:1.5em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 15px;
    margin-left: 25px;
}

h1,h2,h3,h4{
margin:0;
padding:0;
font-weight:normal;
}

h1{
    font-size:3.2em;
    letter-spacing:-3px;
    margin:12px 0px 5px 20px;
    color: #fe7003;
}

h1 a:hover{
text-decoration:none;
}

h2{
font-size:1.8em;
letter-spacing:-1px;
margin:-10px 0 10px 0px;
color:#888;
}

h3{
color: #555;
font-size:1.1em;
margin:1em 0 1.5em 0em;
}

h4{
font-size:1.2em;
font-weight:bold;
}


#navbar-iframe { /* To remove? */
    height: 0px;
    visibility: hidden;
    display: none;
}


#container{
    width:935px; /* Width of the site */
    padding:0 0px; /* Distance of the elements inside the container to the container */
    margin:0 auto;
    background:#f0f0f0; /* Color of the inside of the container (doesn't affect the header, neither the posts area) */
    color:#333;
    text-align:left; /* Align of the majority of the text */
    border-left:0px solid #eef; /* Left border of the container */
    border-right:0px solid #eef; /* Right border of the container */
    float: center; /* Determines the position of the container in the browser-window */
}

#header{
background-color: #666666; /* B-Color of the zone of the header reserved for the blog title/description */
}

#sitetitle{ /* Table that contains the zone reserved for blog name/description (header) */
    float:left;
    height:194px;
    width: 935px;
    color: #333;
    background-color: #666666;
    margin: 0px 0px 0px 0px; /* Margin of the header versus the table that contains it */
}

#sitetitle a{
color:#fe7003;
font-weight:normal;
/* background-color: #666666; This makes some "tight" links have an extra space...*/
}

#sitetitle a:hover{
color:#fe7003;
/* background-color: #666666; This makes some "tight" links have an extra space...*/
}

#content{
margin-top:0px; /* Space between the content and the header */
width:100%;
clear:both;
}

#content h2{
    color:#555;
    border-bottom:2px solid #abb;
    margin-top: 0px;
}

#content h2 a{
color:#555;
font-weight:normal;
}

#content h2 a:hover{
color:#269;
text-decoration:none;
background:none;
}

#content p{
margin:0.5em 1em 0.8em 1em;
}

#left{ /* Post area */
width:520px; /* Post area width */
float:left;
}

#right{ /* Right Area */
margin-left:60%; /* related to the space between #left and #right */
margin-top:0px;
}

#sidebar, .profile-datablock, .profile-data, .widget-item-control, .item-control blog-admin{
margin:0px;
padding:0px;
}

.widget {
  margin-bottom: 1em;
}

.widget-content {
  margin: 0 0px;
}

#right h2{
    width:98%; /* Turns up affecting the (lateral) padding */
    font-size:1.6em;
    top: 0px;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 5px; /* Space between the title and the text */
    margin-left: 0;
    padding-top: 15px; /* Space between the "header" and the content of #right */ 
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

#right li, #right ul{
  list-style:none;
  margin:3px 0;
  padding:3px;
}

#right li a:hover{
color:#48b;
text-decoration:none;
}


/* FOOTER */

.clear { /* to fix IE6 padding-top issue */
  clear: both;
  }

#footer-wrapper {
  margin: 0;
  font-size: 85%;
  color:#888;
  padding: 9px 0 9px 0;
  /* Since it has the same color as #container, no background-color tag is needed */
  /* padding:10px 0 12px 24px; */
  /* padding: 0 0 9px 0; */
}

#footer {
  margin: 0;
  padding: 0px 0px 0px 0px;
}

#footer a{ /* Footer links */
color:#888;
font-weight:normal;
}

#footer span{
color:#aaa;
font-size:2em;
letter-spacing:-2px;
}

.entry{
    position:relative;
    border:2px solid #fff;
    background:#ffffff;
    color:#333;
    width: 480px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 20px;
    padding: 15px;
}

.entry a:hover, .intro a:hover{
text-decoration:none;
padding-bottom:2px;
}

.link{
color:#269;
display:block;
margin:4px 0 0 0;
padding:2px 1em;
}

.link:hover{
color:#48b;
text-decoration:none;
}
.meta{
    clear:both;
    border-top: 0px solid #ccc;
    padding: 5px 1px 0 0;
    text-align:right;
    font-size:0.9em;
    color: #567;
    margin-bottom: 30px;
}

.pagenav{
color: #888;
text-align:center;
}

.entry img{
position:relative;
}

.subcontainer { /* 2 column zone of the right side */
    width:98%;
    margin-top: 25px;
    border:none;
}

.rightsub{
float:left;
width:200px;
}

.rightsub2{
    margin-left:57%;
    width:160px;
}

.date{
float:left;
font-weight:bold;
}

.right{
text-align:right;
}

.center{
text-align:center;
}

.clear{
clear:both;
}

.hide{
display:none;
}
.style3 {color: #fe7003}
.style1 {color: #FFFFFF}
.style4 {color: #CCCCCC}
blockquote{margin:20px 0;padding:0 20px 0 50px;background:url('http://photos1.blogger.com/blogger/7994/1253/1600/quote.jpg') 10px top no-repeat;border:none}
]]></b:skin>
  </head>

  <body>
  <div id='container'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div id='header'>
    <div id='sitetitle'>
    
<table border='0' cellpadding='0' cellspacing='0' width='935'>
  <tr><!-- row 1 -->
   <td style='vertical-align:top'><img alt='English-Hentai Blog' border='0' height='194' id='slice_r1_c1' name='slice_r1_c1' src='http://uploadextra.com/img1/e3f86178790d47ddcff9d5a94a4fca13/slice_r1_c1.jpg' width='193'/></td>
   <td><table align='left' border='0' cellpadding='0' cellspacing='0' width='742'>
      <tr><!-- row 1 -->
       <td><img alt='English-Hentai Blog' border='0' height='104' id='slice_r1_c2' name='slice_r1_c2' src='http://uploadextra.com/img1/37d7ac18251bcc134003ae7c722500ea/slice_r1_c2.gif' style='display:block;' width='742'/></td>
      </tr>
      <tr><!-- row 2 -->
       <td><!-- Begin: AVN Ads -->
            <script type='text/javascript'>
              var AdBrite_Title_Color = 'FF7100';
              var AdBrite_Text_Color = 'CECFCE';
              var AdBrite_Background_Color = '636563';
              var AdBrite_Border_Color = 'CECFCE';
            </script>
            <span style='white-space:nowrap;'><script src='http://ads.adbrite.com/mb/text_group.php?sid=272034&amp;zs=3732385f3930' style='display:block;' type='text/javascript'/><!-- --><a href='http://www.adbrite.com/mb/commerce/purchase_form.php?opid=272034&amp;afsid=14' target='_blank'><img alt='Your Ad Here' border='0' height='90' src='http://files.adbrite.com/mb/images/adbrite-your-ad-here-leaderboard.gif' style='background-color:#CECFCE' width='14'/></a></span><!-- End: AVN Ads --></td></tr></table></td></tr></table></div><!-- Old menu --></div>

    <div id='content'>

        <div class='entry' id='left'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>


      </div>




<div id='right'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
    </b:section>

    <div class='subcontainer'>
        <b:section class='rightsub' id='rightsub' preferred='yes'>
            <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
            <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
        </b:section>

        <b:section class='rightsub2' id='rightsub2' preferred='yes'>
            <b:widget id='Image1' locked='false' title='ghhghg' type='Image'/>
            <b:widget id='Text3' locked='false' title='sdfgfsgfs' type='Text'/>
        </b:section>
    </div>
</div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'> </div>

    </div> <!-- end content-wrapper -->
    
        <div id='footer-wrapper'>
          <b:section class='footer' id='footer'>
<b:widget id='Text2' locked='false' title='dsffds' type='Text'/>
<b:widget id='Text1' locked='false' title='sddssdsd' type='Text'/>
</b:section>
        </div>

  </div> <!-- end outer-wrapper -->
</body>
</html>

**ehentai** · 04-06-2007, 06:43 PM

I've been trying everything from these tutorials... and still nothing

http://css-discuss.incutio.com/?page=ClearingSpace

http://www.complexspiral.com/publica...aining-floats/

**ehentai** · 04-07-2007, 02:50 PM

In the end I used tables... It's working

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!