I have this HTML
.container_1
{
width: 80%;
border: 5px solid black;
overflow: hidden;
}
.container_2
{
float: left;
border: 5px solid red;
width: 100%;
}
.container_1
{
width: 80%;
border: 5px solid black;
overflow: hidden;
}
.container_2
{
float: left;
border: 5px solid red;
width: 100%;
}
<div class="container_1">
<div class="container_2">
Content 1
</div>
<div class="container_2">
Content 2
</div>
</div>
Fiddle http://jsfiddle.net/uZVnB/3/
The problem is that as you see in fiddle the border of .container_1 overlaps the border to the border of .container_2 , so is any form that show complete the border of both containers
Remove float & width from
.container_2. Write like this:
.container_2
{
border: 5px solid red;
}
Check this http://jsfiddle.net/uZVnB/4/
Change the width of .container_2 from 100% to 98%, and everything will be fine. When you set its width to 100%, naturally, it will expand to the maximum, and the borders will overlap.
Remove float: left and width: 100%, since block element fills the entire width of its container, it works fine.
If you have to use float: left style (although I don't think it is required since you have a width: 100% which makes float not behaving as it is defined), you could use box-sizing: border-box, but it only works for mordern browsers, lower version of IE does not support this property.
You may also use position: absolute; left: 0; right: 0; to absolutely position it, but it also conflicts with float: left style and IE6 does not support it.
You can achieve it by using CSS attribute box-sizing:border-box;
SEE DEMO
CSS:
.container_1 {
width:80%;
border:1em solid;
overflow: hidden;
}
.container_2 {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
}
Considering IE in mind, here is my solution.
The border will always be extra than the 100% width.
Here is the solution http://jsfiddle.net/uZVnB/41/
Hope this helps
Related
I have a simple div with width:100%and position:fixed to bottom.
This is my CSS:
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
bottom: 0;
margin:0 5px;
}
When I apply margin left and right using the shorthand property, the footer is being pushed to the right which is very strange.
I created a fiddle for you to play with: Fiddle Demo
You could use calc():
jsFiddle example
#footer {
width: calc(100% - 12px);
border: 1px solid #000000;
position:fixed;
margin:0 5px;
}
body {
margin:0;
padding:0;
}
The 12px in the calc comes from the 5px of each margin, plus the 1px for the left and right border.
Or option #2 (no width or calc() needed). Simply set the left and right to 5px and the footer will stretch the full width, minus those amounts:
#footer {
border: 1px solid #000000;
position:fixed;
left:5px;
right:5px;
}
body {
margin:0;
padding:0;
}
jsFiddle example
I would do two things:
Set box-sizing: border-box. This will ensure paddings dont affect the outer width of your element.
Set margin and padding to 0 for html and body elements as these have applied a margin by default in most browsers.
You can now set the element padding instead of trying a workaround with the margin values.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
padding:0 5px;
}
Can be tested in this JSFiddle
You could use bottom: 0; In my code below I also used padding rather than margin, padding will affect the 'margins' within the div where as margin refers to the outside.
#footer {
width: 100%;
border: 1px solid #000000;
position: fixed;
margin: 0px;
bottom: 0px;
padding: 0px 5px;
}
http://jsfiddle.net/3w6xE/3/
As an alternative to using calc(), (which I think is a good solution, despite the limited browser support), you could wrap the element:
<div class="footer_wrapper">
<div class="footer">test</div>
</div>
The parent, wrapper element is fixed with a width of 100%, and the child .footer element has the margin. As others have mentioned, use box-sizing:border-box in order to include the border in the element's width calculations. Support for box-sizing can be seen here.
Example Here
.footer_wrapper {
width: 100%;
position:fixed;
}
.footer_wrapper > .footer {
border:1px solid #000;
margin:0 5px;
box-sizing:border-box;
}
As an alternative to using a margin, you could also just add left:5px/right:5px.
If you want the reason behind why your example was behaving as it was, it's simply because a fixed element's position is relative to the viewport. The element therefore has a width of 100%, of the window thus explaining why the margin wasn't behaving as expected. Usage of calc() allows you to subtract the margin from the width.
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example
I need your help.
It seems that my child divs, (the textarea and text) expand beyond the border:
This is the desired result:
Here is the HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
}
</style>
</head>
<body>
<div id="one">
<div id="two">text to the right</div>
<div id="three"><textarea id="field"></textarea>
</div>
</body>
</html>
Borders and padding on textarea are your problem.
Two choices
Both choices are related to textarea's CSS. And as you can see from code below I've also added relative positioning to #one, just to make sure it'll work in the context of your page, so textarea's width will actually be sized by this container.
set proper box-sizing so borders and padding will be included (JSFiddle):
#one {
width: 800px;
border: 1px solid red;
position: relative;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
box-sizing: border-box;
/* let's also add these for cross-browser safety */
border-width: 1px;
padding: 2px;
}
set width to less than 100% (JSFiddle)
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
/* (1px border + 2px padding) × 2 for left and right side */
width: calc(100% - 6px);
}
Borders and padding are added onto the width. since your width is 100% it adds the padding and border onto the field.
so if the width was 120px of 'one' it adds 2px for the borders and a few pixels for the padding.
if you subtract the some space off of 'three' you can achieve this.
#three {
width:794px;
}
example
The following should work with most browsers as well.
#field {
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
Otherwise you can remove the border and padding from the textarea. There are quite a few ways to do this to be honest.
The reason for it to go beyond the border is that, it is taking border:2px;
You set width: 100% for the #field textarea. By default, a textarea also has non-zero values for border and padding. So after all your textarea is 800px wide(inherited from .three) + 4px border + 2px border = 806px all together (but it might differ slighty, depending on browser you use).
Modify CSS for #field to this
#field {
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
I also set margin: 0 just to be sure that some browsers won't have it set to non-zero value.
the classic box model adds up width with margin, padding and border.
In this case, set your textarea another way of calculating width, i.e. box-sizing to border-box (width is proper width, without margin, padding and border)
#field {
width: 100%;
-webkit-box-sizing:border-box;
}
(you might add desired perfixes, -moz, -ms, -o…)
I want to achieve the following effect: http://jsfiddle.net/3KJta/1/
However the solution I have uses a known width for the small div and the larger div. I need this to work with variable sized divs. The use case for this is a tooltip that appears above a smaller flexible sized element. The tooltip content isn't known and so the width could be anything.
So far I have:
<div class="small">
<div class="smaller"></div>
<div class="larger"></div>
</div>
and
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 2px solid black;
}
.small {
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 50px;
text-align: center;
}
.smaller {
width: 20px;
height: 20px;
border-color: red;
display: inline-block;
}
.larger {
width: 200px;
height: 200px;
border-color: blue;
display: inline-block;
margin-left: -75px /* NOTE: in reality, .small has a variable width, and so does .larger, so i can't just take off this fixed margin */
}
If you are ok with using css3 and only support modern browsers you can use transform: translateX(-50%); to center the bigger box (currently supported browsers).
See this example: http://jsfiddle.net/2SQ4S/1/
If you use and extra element you can do it:
<div class="small">
<div class="smaller"></div>
<div class="larger">
<div>I'm extra</div>
</div>
</div>
CSS
.larger {
position:relative;
left:50%;
width:8000%;
margin-left:-4000%;
text-align:center;
border:none;
}
.larger div {
width: 200px;
height: 200px;
border-color: blue;
margin:auto;
}
http://jsfiddle.net/3KJta/4/
although that does cause some issues with content being wider than the page so you would need it all in a container with overflow:hidden:
http://jsfiddle.net/3KJta/7/
All a bit ugly though. Perhaps there's a solution where you can avoid doing this. Maybe a JS solution that measures the size of the content you're trying to show and offsets it.
I am getting a little gap between child-div and its parent-div. Is it possible for child-div to on its parent-div height? or (the way around)possible if the parent-div can scope the height of its child-div for not to overlap or get some extra spaces.
I have a DOM like this:
<div class="parent-div">
<div class="parent-image">
</div>
<div class="child-div">
</div>
</div>
here is my CSS:
.parent-image:{
height:60px;
}
.parent-div{
border: 1px solid #E3E3E3;
border-radius: 4px 4px 4px 4px;
margin-bottom: 20px;
width: 100%;
}
.child-div{
????
}
If you specify height: 100%; it will take the height of the parent.
If your child has padding, you need to change its box-sizing.
.child {
padding: 10px;
box-sizing: border-box;
}
If your child has more content than the parent, you either need to tell it to scroll, or hide. Note that on some browsers the scroll-bar will be inside the div, and on other browsers, it'll be on the outside.
.parent.c .child {
overflow: auto;
}
or
.parent.d .child {
overflow: hidden;
}
Demo of All
In your CSS, you can set your child-div to:
.child-div{
height:100%;
}
Here is a demonstration: http://jsfiddle.net/Xq7zQ/