width and height stretching

[snehula]

Hi there,

I have asked this question before but probably not in a meaningful way, so let me try again.
I have a site with a tabbed menu that looks wonderful if you look at it on a pc/laptop/... but horrible on a phone, where the tabs float down to the next line since they don't fit on one..
The tabs are floated list elements in a container div called navbar.
I want it to behave like for instance if you press Ctrl+ a few times, it adds a nice scroll-bar to the bottom and stretches beyond the browser border. Some of you might think it's not a good idea.. Okay, that's your opinion, but the people I'm doin it for prefer it that way. I really have no idea how to achieve that. Fixed / absolute positioning? Stretching the width of the navbar div?

And then, I have a content div, which contains forms and sidebar, tables, all kinda stuff. I can't get the thing stretch its height according to need (depending on the height of all elements inside it). Tried height auto (what is it good for anyway?), height 100% (this just makes it as tall as the browser window and if u scroll down to see the rest of the content in case there's more, the background color shows through), set the height to a specific huge pixel value( this is ugly as it adds tons of unnecessary space). Tried adding an empty div at the bottom of my content div, with a clear:both style, but that didn't work either. How? Why?

CSS is wrecking my head.. still.. Pleease good people enlighten me!

[edited by: alt131 at 1:24 pm (utc) on Sep 11, 2011]
[edit reason] Thread Tidy [/edit]

[alt131]

Hi snehula,

For the first issue, I think what you want is a fixed width (maybe min-width) and the css3 overflow-y:scroll.

For the second issue, what happens if you don't explicitly set a height?

[snehula]

Hi and thanx for your reply :-)
Well what happens is that the content div will have a height of about 2 centimiter (this is because I have a ;nbsp enclosed in a h2 tag in it) and the rest of the elements (which are also placed inside the content div) appear outside of it. This is a mystery to me..
My html:

<div id="contents">
 <h2>&nbsp;</h2>
<input type="hidden" id="DPC_TODAY_TEXT" value="today">
<input type="hidden" id="DPC_BUTTON_TITLE" value="Open calendar...">
<input type="hidden" id="DPC_MONTH_NAMES" value="['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']">
<input type="hidden" id="DPC_DAY_NAMES" value="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']">
 <ul id="sidemenu">
 <...... list items....>
 </ul>
<div id="rightcol" class="clear">
<div id="failmsg"></div>
<form>
<.....form elements, fieldsets, input textboxes, etc....>
</form>
</div><!-- end rightcol -->
</div><!-- end content -->

and some of the css styles i applied:

* {margin: 0; padding: 0;}
br {margin-top: 10px;}
#contents h2 {text-align:center; color:#F63; text-shadow: 1px 1px 1px #000; padding-top: 25px; padding-bottom: 25px; 
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; }
#contents { border-top: none; margin-top:0; background-color:#FFF;} 
#contents ul#sidemenu {float: right; width: 19em; margin: 0 0 4em -21em; background-image:url(../images/homemenu.png); 
background-repeat:no-repeat; background-size: 100%; }
#contents #rightcol {float: left; display: block; padding: 0 22em 4em 3em;}
#contents #rightcol fieldset {border: 2px groove #C60; padding: 5px; margin: 10px; display: inline; background-color:#CC9;}

My whole css file is still a mess, trying to figure out the right way :-) For the contents div I had a height:100% in there, but that only stretches the div down to the bottom of the screen and not any further in case i have more content. With height:auto the result is the same as without any height setting at all.. Does it have to do something with the fact that I set all elements margin and padding to 0 initially? I really don't get it :-)

[alt131]

Well what happens is that the content div will have a height of about 2 centimiter (this is because I have a ;nbsp enclosed in a h2 tag in it) and the rest of the elements (which are also placed inside the content div) appear outside of it. This is a mystery to me..

Hi snehula, and thanks for the great code sample - makes things a lot less mysterious :)

As you say, div#contents is taking it's height from the <h2> and not expanding to contain #contents ul#sidemenu and #contents #rightcol. But this isn't caused by "zero-ing" margins/padding, but because both are floated. I just typed about this in another active thread, so to save re-typing, see the first paragraph [webmasterworld.com] of my last post. Note that's not the best explanation, just saving typing, and it provides some keywords to search on.

Follow the link in that first para, and after you've read "Positioning schemes", scroll down to 9.5 Floats. The key sentence is If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

The above thread discusses clearing as well - note Marshall's post which should help with the "float drop" you are seeing on the menu, and there is more in-depth information about floats and clearing in Opera's Web Standards Curriculum [dev.opera.com] (scroll down for the TOC), plus lots of other information that will be helpful if you're just starting with css.