Howto change header section into a smaller width but in the sametime have it inline with content column width.
This is a picture of what I am talking about: http://i.imgur.com/Culy2Ro.jpg
You see the header section is smaller then the content column. But they are still inline.
Set width:100% and position:absolute to your header.
Related
I'm creating a template using bootstrap and the content area is adjusting self according to contents inside it. and if there is less content text then footer and nav gets so closer like see this pic if there is no content text.
image
How can I set minimum height of content so that footer will stay on browser footer and there will be space for content between header and footer.
You could use css like this to set the minimum height to that of the viewport:
minimum-height: 100vh;
The first approach is to make sticky footer when you are using bootstrap, add the class footer in footer wrapper and it will stick to the bottom.
Take a look at the example template provided by bootstrap
Bootstrap sticky footer Template
I set a min-width of 1000px on a website I've been working on. In the header, the (floated) links each have a percentage width (25%), and the <nav> has a full width (100%).
Right now, when the window is too small, the header and navigation bar gets cut off at the 100% window width (it doesn't expand over to the overflow area).
Is there any way (with just CSS) for the header to expand to the full document width (not the window width), and then the links to resize accordingly? Thanks.
You need to wrap all the data (like: header,#container,footer) inside of wrapper div <div id="wrapper"></div>, remove padding-top property from the body and use below mentioned css
#wrapper{padding-top: 150px;position: relative;}
depending on the content in my page how can I get the footer at the bottom ?
In gridview if i select page size above 20 the footer is overlapping on the gridview box.
I tried the CSS property - position:absolute,bottom:0; as well as overflow:auto...
It dint help the footer is remaining in the same place behind the gridview.can someone pls help me
Thanks.
Check this fiddle:
Format your page layout as in the fiddle. set the min-heightof your container div to
total height - (height of header + height of footer)
(in the fiddle header and footer occupy 15% and 10% height respectively. so the content is given
min-height:75%; // 100%- (15%+10%)
so that it'll always occupy that much space even if your actual content is less.
If your content is more the container div will automatically expand and pull down your footer.
if you apply position:absolute your element will be taken out of the normal flow, then the footer won't be pulled down by the content if it expands.
I have multiple divs with text and what not in them. When the page is made smaller horizontally all of the elements shift. However,if you resize this page, elements disappear and nothing moves. How do I fix this problem so it is like this page?
Thanks!
If you view the source of this Stackoverflow page, then you will notice that all of the content on the page is wrapped inside of a container div with the width set to 100%, and the margin and padding both set to 0. If you want to have a fixed width, then do not use percentages, but instead specify your page to be a specific width in pixels.
If you want to center all you content, wrap it in a div like so:
<div class="wrapper">
<!-- Your Content !-->
</div>
And then add the following to your stylesheet:
.wrapper {margin:0 auto;width:960px;} /* Change 960 to desired width */
I hope this helps!
Predefined sizes make the elements do not move when you resize the screen, that will keep their size in different screen resolutions also, that is to take into account. Also you must use margins and padding fixed.
In short ... not more percentages, but don't abuse fixing everything
I have a div (lets call it header), and another div (lets call is content). Now, the content div extends its height to its contents. Within header, i have an element that overlaps far into content, but content div doesnt extend with the elements overlapping from header. Heres the css i have so far:
.content {
height:auto;
}
Any suggestions?
http://jsfiddle.net/pgvZr/
header and content are siblings, so there is no way to have content expand with content that is part of header using just css
To solve your problem, you can:
use javascript to calculate the height content should have and set it dynamically
put header inside content and remove the fixed height of content
I'm not sure i understand the issue. You want to extend content height by adding text to header_inner?
The reason your "content" div isn't being pushed down is because you have a height set on your "header" div. So, relative to your "header" div, your "content" div is starting 100px down. If you don't set the height, then the "header" div ends up being the height of whatever is contained within it.
Take a look at this fiddle... simply removed your height: 100px; off the header and it accomplishes what you want. http://jsfiddle.net/pgvZr/4/
Edit: If you're adding content to the header and want it to be part of your content div (i.e have your content div grow with the header_inner text), then you should probably just move it into the content div. Otherwise, then you shouldn't specify the height on the header, and let it automatically push your content div down when you add the header_inner like my fiddle does.
That's because the child div has a higher z index than anything else, meaning its stacked way on top of everything and it doesn't participate in the document "flow" due to its positioning. I suggest use JQuery to calculate and set its height based on the heights of the other two divs.