I'm trying to create a layout where the header is fixed and the middle header div is aligned with the content div.
I got two issues:
There is a small offset that I can't fix.
The border-top of content-wrapper is not visible, why?
Fiddle: http://jsfiddle.net/sxZJ3/3/
Offset and no border-top:
The offset is due to you setting a padding: 5px on a width: 100%.
The reason you can't see the border-top is because of the border-bottom on the #header, which gives it an extra 1px of height, for a total of 61px. I would decrease the height to 59px, thereby yielding a total height of 60px.
Edit: Here's an updated fiddle
Easy fix is to replace width: 100%; with right:0; left: 0;: http://jsfiddle.net/sxZJ3/14/
if you remove the padding there is no issue, The main content is floating directly below the header. If you want to decrease this gap you could use padding or a variety of other options. Margin or even use the single border for both elements inline.
Could also try some positioning tricks. Div inside a container with a postition:relative and a fixed-height. Then on the div position:absolute and then margins and padding as necessary.
I would recommend a build more along these lines where you remove the body margin and allow the content-wrapper to be the sole margin pushing down the content. Also the padding within the header is causing the #menu to be offset by 5px within the header element. http://jsfiddle.net/sxZJ3/12/
Related
I have the following html:
<style>
body {
margin: 0;
height: 100vh;
}
div {
margin: 1px;
}
</style>
<body>
<div>feck</div>
</body>
The div's margin causes scroll bars, even tho the div itself is nowhere near the height of the page. Without the div's margin, there is no scroll bar. What's going on? Is this a browser bug?
Collapsing margins. Because the div is the topmost element in the body, the div's margin is collapsed with the body's margin. That is, the body gets the same margin too.
You may think that "collapsing" isn't the right word for this behaviour, and you'd be right, but that's the word they've chosen. Sorry.
There are several solutions:
Sean's solution of simply moving the div a pixel downwards
Your own solution of using calc for the body height
Set a padding on the body, and use box-sizing:border-box for it.
Because a div is a block element. It has positioning in the Dom, therefore takes up space. When you add a margin to the top, you are pushing its space down, therefore increasing the overall amount of space it occupies.
If you want to push the div down, without changing the overall container (body) height, you can give the div a position of relative, and a top of 1px.
div {
position: relative;
top: 1px;
}
Check out this answer it should be clear enough.
The main point is that margins of adjacent elements (in this case your div and body) are collapsing taking the maximum value of the two margins.
I have 2 div, one is using position :absolute and another is using position : static (default)
the absolute position by left : 100px.
the static position by margin-left : 100px
Why they aren't the positions at same place?
Posting a link to the fiddle would be nice, but until then you could try setting:
html, body
{
margin: 0;
padding: 0;
}
Since the absolutely positioned div has been taken out of the normal flow of the document, it is most likely that any inconsistencies between the placement of the static div and the absolute div are caused by margin's or padding's set on the elements containing the static div.
Are you sure it isn't the Border width of 2px all the way around (added up) to total 8px?
You need to remove the body margin.
body {
margin:0px;
}
The absolute div is a child of 'HTML'. The static div is a child of 'Body'. Body, by default, has an 8px margin.
Example: http://jsfiddle.net/y5S6W/
Since the elements are displayed in the order they are coded into the page by default, the absolutely positioned div will be in a specific place; however, the 2nd div will be after the first div, which means that its CSS of margin left: 100px; actually moves it over 100px plus the width of the first div from the left side of the page.
I need the border of the title of this page to extend to the right side.
Perhaps there is a better way of doing this but I have used position:absolute and width:100% because the content div underneath needs to overlap.
This causes a horizontal scrollbar to appear. How can I get rid of that?
problem site
Because of your absolute, adding a 100% to the element will extend it the size of the viewport from where it starts.
I believe what you're wanting to do can be accomplished by keeping the absolute there, but also adding a relative positioning to your #content rule:
#content {
position: relative;
}
I have a container which creates a colored column down page from top to bottom. I am using the below CSS. This code will cause the vertical scrollbar to appear, however if I remove the padding property it works fine. It seems to be adding the padding to the height. I would expect this when using margin since it is outside of container, but padding is inside it and should not affect the size of it as far as I am aware. This container has no parent elements and contains only one word as content.
How do I make it 100% height while retaining the padding and without having to create any additional child element? Thank you in advance.
#container
{
background-color : #eee;
max-width : 910px;
min-height : 100%;
padding : 65px 15px;
}
You can add box-sizing: border-box; to the container to get the desired results;
http://jsfiddle.net/Svkp8/
Here is a detailed article by Paul Irish about box-sizing that was provided by steveax in the comments.
if I want to center content on my page, I can simply apply margin: 0 auto to it.
But that makes zero margins. How can I do if I want a minimum of, say, a couple ems of margin on the right and left.
thanks
Wrap the content in a div with margin.
You can set a width to the div which you are wrapping your content,and apply margin
You'll need to apply padding or margin to the parent element.