This question already has answers here:
css - 100% + padding?
(2 answers)
Closed 8 years ago.
Basically I have a div with this CSS:
.mydiv{
position:absolute;
top:0;
left:0;
width:100%;
padding:7px;
}
The browser shows the horizontal due to padding (width 100% + 7px)
Take a look here: http://jsfiddle.net/3FrLq/
How can I have that div not showing the horizontal bar? (Without having to add another div inside?)
Get rid of the width:auto and replace it with right:0.
jsFiddle example
Since your element is positioned absolutely, you can in effect pull the left and right sides to the edges of the element's container without invoking the scrollbar.
Correct HTML semantics pretty much requires that you have another element inside. In this case, your text should be wrapped in <p> tags.
Doing that automatically gives you something to hook into to set margin or padding on the inner element.
That said, if you really can't/won't have an inner element, remove your width and set right: 0. The nifty thing about absolutely positioned elements is that if you set opposing positions to 0, you can "stretch" the element (it works with top/bottom, too).
Alternatively, if your element isn't positioned absolutely, you can change your width: 100% to max-width: 100% (or add the max-width line, to deal with a bug in an old version of IE, if you have to go back that far), which will hard-cap the total width. This one's in action here - http://jsfiddle.net/3FrLq/5/ .
You can use the box-sizing: border-box CSS property which will exclude the padding and borders from the actual width and height of the element:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border -box;
Here's the fiddle:
http://jsfiddle.net/3FrLq/3/
More info / browser support for box-sizing:
https://developer.mozilla.org/en-US/docs/CSS/box-sizing
You can set the div to display inline-block:
.mydiv{
display: inline-block;
position:absolute;
top:0;
left:0;
width:100%;
padding:7px;
}
This will display it inline (not stretching horizontally), while allowing you to still apply padding and margins to the top and bottom (unlike display: inline
Get rid of width specifying & just specify 0px; for all 4 sides
if IE8+ compatibility enough for you, you can use box-sizing.
if you want it to be working only with full width, set both left & right to 0, but do not set a width.
Related
I am designing a website with two floating columns which I want to fill the whole screen.
#column_main{
position:relative;
background:#ffffff;
float:left;
width:70%;
height:auto;
min-height:550px;
}
#column_side{
position:relative;
background:#dbdada;
float:left;
width:30%;
height:auto;
min-height:550px;
}
if I had the line below to #column_main
border-left:solid 1px #c0c1c4;
The float messes up and they are no longer side by side.
In IE I have been able to fix the problem by setting the #column_main width to auto and it fills the rest of the page. This doesn't work in firefox and I have tried reducing the percentage slightly but that leaves a gap between the #column_main and the right edge of the page. Is there a way to have the 1px border on the left and make the float fill the remainder of the screen.
The float no longer works because of the box model where the border is added to the width instead of included in the width, you have already used up 100% of the width by doing width:70% and width: 30%.
If you plan on applying a border you might want to apply it to a child element inside one of the wrapping floated columns and use those parent columns only as a grid system to structure your other content.
Alternatively try bootstrap grids
add box-sizing: border-box; to #column_main
This property basically says you want the box size to apply to the border and everything inside it.
This blog post explains this, and some other options to fix this particular problem.
how do I have two divs with 50% width side by side and a margin without the second div dropping underneath the first?
Div id style is as follows:
#div3{width:50%; float:left; margin: 2px; background-color:yellow;}
Thanks,
Dan
50% + 50% + margins > 100%
Therefore, the elements wrap. You will need to adjust the width or the margins to stay within the 100% limit.
#div3{width:48%; float:left; margin: 1%; background-color:yellow;}
hows that?
You need to change the width of divs to less than 50% because together they have 50% + 50% + 4x margin 2px. Try to change it to an exact value in pixels or f.e. 49%.
The margin will give extra width to the div elements.
You could try setting the divs to 49% each and giving each div a margin auto.
This will centralise the divs and still give you a small amount of margin dependant on the browsers size.
I always cheated and set them both at 49% width, and then added padding (not a margin). But you want some visual colorblocking, right? If you want one to have a background and one to be no background (relative to the rest of the page) set the yellow one at 50%, and the no-color background one at 49%.
You could look into using the new box-sizing property which subtracts the padding from the width instead of adding it on top like you are experiencing:
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Most browsers don't support the entire spec yet but it can accomplish what you want: http://caniuse.com/#search=box-sizing.
Though I believe that you would have to use padding instead of margin to create the spacing.
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
Newbie question here. I have a #wrapper as my main container. Like so:
#wrapper {
margin: 0 auto;
padding: 0 20px;
width: 960px;
height: 100px;
}
My question is: what is the actual width of the wrapper now? 960px or 1000px? Let's say I want to have a #header inside the #wrapper. What should the width of my #header be, assuming I want it to be the width of the #wrapper?
The width of the wrapper in your example is now 1000px. Padding is added to the width, wheras Margin is not.
If you put a header inside the wrapper, you would want it to be 1000px to stretch entirely from side to side, but that would be impossible because of the padding, so your header would still have to be 960px.
Heres a JSFiddle (Sorry, just discovered this today!)
http://jsfiddle.net/wGYfR/8/
The outer width is 1000px and the inner width is 960px. So if you want to put inside the wrapper it should have width <= 960px
The wrapper is still 960px. However, you have added padding of 20px on both sides meaning for 20px on both sides there will be only white space. The usable area is now 920px.
You don't have to set the width of the header. If you don't it will fill the whole wrapper element (minus the padding). You header will end up being 920px.
I suggest firebug This will help you so much. Seriously.
The actual width would still be 1000px. You can set a background color on your #wrapper to see that the width will still be 1000px.
CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png
If you use Chrome or Safari (or firebug with Firefox for that matter) you can easily check out the width of an element, and how padding and margin in affecting it.
The width should be 960px, however only FireFox adds the padding to the width.
To fix this, put the following code on top (or at least above all div selectors) of your code:
DIV { /*let Firefox stick to the web standard concerning padding*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}
Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use percents because you need a specific number of pixels.)
Edit
I also need to prevent the content (or lack of content) from stretching or shrinking both elements. First answer I got was to use padding on the parent, which would work great. I want the parent to be exactly 25% wide, and exactly the same height as the browser client area, without the child being able to push it and get a scroll bar.
/Edit
I tried solving this problem using {top:Npx;left:Npx;bottom:Npx;right:Npx;} but it only works in certain browsers.
I could potentially write some javascript with jquery to fix all elements with every page resize, but I'm not real happy with that solution. (What if I want the top offset by 10px but the bottom only 5px? It gets complicated.)
What I'd like to know is either how to solve this in a cross-browser way, or some list of browsers which allow the easy CSS solution. Maybe someone out there has a trick that makes this easy.
The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.
If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).
You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.
You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.
If you are only concerned with horizontal spacing, then you can make all child block elements within a parent block element "inset" by a certain amount by giving the parent element padding. You can make a single child block element within a parent block element "inset" by giving the element margins. If you use the latter approach, you may need to set a border or slight padding on the parent element to prevent margin collapsing.
If you are concerned with vertical spacing as well, then you need to use positioning. The parent element needs to be positioned; if you don't want to move it anywhere, then use position: relative and don't bother setting top or left; it will remain where it is. Then you use absolute positioning on the child element, and set top, right, bottom and left relative to the edges of the parent element.
For example:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
If you want to avoid content from expanding the width of an element, then you should use the overflow property, for example, overflow: auto.
Simply apply some padding to the parent element, and no width on the child element. Assuming they're both display:block, that should work fine.
Or go the other way around: set the margin of the child-element.
Floatutorial is a great resource for stuff like this.
Try this:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
It should have an Npx space on all sides, stretching to fill the parent element.
EDIT:
Of course, on the parent, you could also use
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}