This is more a question of logic rather than technical.
I have a design where my header is fixed at the top all the time, so is the footer, but the elements inside have percentage widths so the header will change in size as the window changes.
BUT, as the header is always fixed-positioned the content below is covered by it and as I do not know the height of the header I cannot know how much padding-top I must add to the content so it won't get covered by the header.
What do you say?
If height goes automatically, you will need js to control it, taking the height of the fixed div and updating top margin/padding dinamically. Anyway, it would be nice if we could see an example of what you have currently
Related
I use VS2010, C#, ASP.NET; I read some data from SQL server and fill my DIV, I don't want to give this DIV a fixed height or scroll bar, rather I want it to have its height automatically set to maximum data, what should I do? how should I set my styles?
also I have another horizontal DIV that should be displayed at the bottom of page, how can I set it so that it is always fixed to bottom of page (not bottom of screen)?
a good example is the Related questions column in this site! and the gray horizontal DIV at the bottom of page
thanks
The default behavior of divs is to contain all their data. If they are not, then you are overriding that behavior somewhere, either by setting an explicit height, or by having content items that are taken out of the normal flow (floats or absolutely positioned items).
I've got this issue with a site design.
When resizing the site (in height) the text of div #output go's over the footer, over the edge. I want to keep it inside the white part of #output's container div.
In ie7, #output doesn't stretch 100%, can't seem to fix that.
I've made a copy of this site, you can check it out at following url: http://test21.c-tz.nl/index.php?id=main
This is being caused by the margin on top of #output, the DIV that is getting that fancy scrollbar stuff applied to it. The JavaScript is setting the height correctly, but when you add the margin, the container is too large.
You could try adding another DIV inside of the #output DIV and calling the JavaScript on that instead. That would allow you to keep the margin you have and hopefully allow the JavaScript to calculate the width appropriately.
I have been running into problems with the height of the header in a site for a uni project.
What I want to achieve is a header which contains a nav, background image slider (which is 100% wide) and speech bubble, with the site content below the header.
At the moment I have it all working as it should be, but the height of the header is not taking into consideration the background image slider, the reason for this being that it (the background-slider) has had to be positioned absolutely. With the current state of the site, I have added a header height in em, this gives me the required spacing on my laptop, but when moving to larger resolution the height is insufficient and the site content runs into the image.
My question is, is there a way of maintaining the current layout but including the functionality of the adjustable header height?
Current site is at: http://beta.immbudden.com
If you are viewing on screen size larger than 1366 x 768, you will see what I mean.
Any help at all would be really appreciated, many thanks in advance!
I actually managed to fix it myself. I positioned the nav absolute, speech bubble absolute and background-slider relative. I then gave each appropriate z-index's. I also had to change the order that each was called in the html, placing the slider from being called first, to last.
Hope this manages to help someone else, and if you need it explained any better just comment here :)
Add a bottom-margin to the header equal to the height of the absolutely positioned nav.
Why not just set the height of the header in pixels? If you have a set height nav and the image slider, you should be able to just set it.
while editing the template of my blog i saw that header size is set to 660px by the css property
width:660px
.Now i want to make my header spread across the whole lenth of the browser and also i don't want to specify some specific length in pixels ,so that the blog don't look odd in widescreen vs normal monitors .how do i do that ?
width: 100%
should do the job. (Incidentally, if your header is a div or other block element, you can leave the width value away altogether or set it to auto. It will then assume the full width of the surrounding container (in this case, probably the browser window) no matter whether you've specified borders or paddings.
I have a form I'm floating. When there is an error, via jquery, I'm adding some content to a p within the form. However, the form doesn't vertically resize to fit the new content. Is there something I have to do to get a floated element to resize when the content within it changes?
Do you have height or other css styling applied that would prevent it from vertically resizing?
Also, what browser(s) is it happening in? It may be a browser bug.
If the is floated, too, then depending on the styling (position: absolute), its dimensions may not be considered to be "in" the form.
Is there a height set on the content? When float is on, the default is to fix height to line height. It is possible that your width on the form is set too low, and the text is trailing off through the block element containing your form Try messing with the line-height property and see what you get. Also, position absolute will mess with you (as Richard mentions below)
Also, consider min-height. This won't work in IE6, but you can substitute with a height in IE6 which acts like min-height in certain circumstances.
Post you code so I can be more specific.