Need help stoping snagging behavior

co_ador · January 26, 2010, 2:55am

Need help

I have three main divs


#leftcolumn {
        background:green;
        width:800px;
        float:left;		
}

#rightcolumn {
background:red;
margin-top:8em;
width:425px;
margin-left:0em;
height:auto;
float:left;
}

#completo{
background:black;
margin-left:0em;
height:auto;
width:auto;
float:left;
}
<div id="completo">
<div id="leftcolumn"
</div>
<div id="righcolumn">

</div>
</div>

Div “completo” that wraps “leftcolumn” and “rightcolumn”

I need Leftcolum to the left and rightcolumn to right inside of “completo” div. But the thing is that with actual css I have rightclumns snags down when the windows is minimize. How can I stop that behavior?

Thank you.

RyanReese · January 26, 2010, 3:10am

Well, since you give pixel widths for both columns, you could just set a width on the #completo div
800+425=1225px

#completo{
background:black;
margin-left:0em;
height:auto;[b]
width:1225px;[/b]
float:left;
}

co_ador · January 26, 2010, 3:54am

i did it like that but it stills snagging.

You can go here and see the example thanks!

http://www.nyhungry.com/pruebaindex.php

The three css rules above are all the way in the bottom of the CSS stylesheet.

RyanReese · January 26, 2010, 4:08am

Hi, firebug is showing the #completo div closed off before the #rightcolumn div starts. Make sure you count your </div> correctly

co_ador · January 26, 2010, 10:04pm

Thank you!

There should be something else causing this behavior because I have made sure to that the div #rightcolumn and #leftcolumn are inside div #completo but still the behavior will persist.

any other idea on what could be causing it.

RyanReese · January 26, 2010, 10:37pm

If firebug is showing as I described then that is true.

Firebug doesn’t make mistakes like that. Humans however, do.

Give me a minute and I’ll point out the errornous </div>

RyanReese · January 26, 2010, 10:41pm

Look at this. I was careful to make sure I deleted all content and they matched up. This is the base code

<div id="completo">
<div id="leftcolumn">
	<div id="wrapper"></div>
	<div class="wrap"></div>
</div>

</div>
</div>
<div id="rightcolumn">

See the extra?

co_ador · January 26, 2010, 11:11pm

it’s right above #rightcolumn

Let me check on that carefully again.

Thank you Ryan I will get you back on that.

co_ador · January 27, 2010, 1:21am

Ryan it was a php elseif statement causing the problem.

Now now #rightcolumn is inside #completo but then #rightColumn needs to float to the left and get at the right of #leftcolumn it is floating but then it display below #leftcolumn the green box instead of next to it at the right.

any observation would be appreciated.

thank you.

RyanReese · January 27, 2010, 1:47am

Hi, cehck your PHP again, it’s outputting #holders and #header2 divs right after #leftcolumn and of course it wasn’t set that way before :). And I can see PHP in the source code.

Post back when hte PHP is fixed

// else if (!empty($arrRestaurants)){ 
  <div id="holders"><img src="images/smallholdersleft.gif" alt="holders" /></div>

co_ador · January 27, 2010, 3:18am

Ryan I have fixed the structure.

Please can you have a look to #rightsidebar inside the #rightcolumn? The #rightsidebar is to low and I would like to see your opinion on that, to see how would be the best way to bring it up.

I suspect that the footer can be causing this issue don’t know please have a look.

Finally the video doesn’t snag now thank you.

RyanReese · January 27, 2010, 3:50am

Hi, on “.rata1” you give a 100em top margin lol. “#citycontainer” then needs to contain the floats with overflow:hidden; (then haslayout for IE6)

Heck just make the CSS changes


#citycontainer{overflow:hidden;zoom:1;}
.mini, .rata1{margin-top:0;}
#citycontainer .citywrap{
overflow:hidden;
margin-top:0;/*this will control space of video links*/
}
#rightsidebar{display:block;margin-top:0;}

co_ador · January 27, 2010, 4:11am

thank you

I made the changes and the space between the #rightsidebar and the footer has been eliminate and it display better but then now the #citycontainer and the #rightsidebar are to far away from each other. I was thinking about giving the #rightsidebar some negative margin-top value to get it close to the #citycontainer?

co_ador · January 27, 2010, 4:13am

giving a margin-top to the #rightsidebar would not work that well.

RyanReese · January 27, 2010, 4:16am

Do my code and then if you have spacing issues come back :). I need the playing field reset because there was a lot of clashing in your code as it stood.

However if you feel like you know what you are doing spacing wise and you are comfortable then by all means taking out the margin-top I wrote for #rightsidebar :).

Some margin-tops there are neccessary though.

co_ador · January 27, 2010, 10:31pm

Ryan I have gotten the #rightsidebar inside the #rightcolumn div and it is displaying ok. The only thing is that I can not find how to bring up the footer. some margin-bottom or any other means is pushing it down.

Give me a hand on that please.

Thank you.

RyanReese · January 28, 2010, 12:38am

The .wrap element (I thought I put this in my code I posted before but I guess not) has a 1000px height. As such the footer is far down…

.wrap{height:auto;}

co_ador · January 28, 2010, 1:50pm

thank you Ryan!

RyanReese · January 28, 2010, 4:46pm

You’re welcome :).

co_ador · January 30, 2010, 12:27am

hey

The footer in the link above is displaying where it shouldn’t be I have this link

http://www.nyhungry.com/example2.php?subject=4&id=4&register=0

Where the footer is not displaying well. In a preview post you suggested that the wrap height needed to be auto.

Over in this page there is not wrap, What I think that the #outer div height is not assigned but I did tried to put it auto but it didn’t worked.

Help!