I'm very surprised: there are tons of posts asking about 100% height situations, but the ones that include *margins in the child element don't yield any workable responses.
Surely this is very common, no? I'm struggling with my margins causing the child element to overflow. See fiddle below.
My CSS is like so:
html, body {height:100%} // definitely doing that one for 100% height issues
div {
box-sizing:border-box; // I like my box model consistent, need only webkit
}
#outer {
border:1px solid #f00;
position:absolute; // this is a requirement
top:40px;
left:12px;
width:300px;
}
#inner {
position:relative; // I'm really hoping to avoid absolute
border:1px solid #0f0;
margin:10px 20px;
height:100%;
width:100%;
}
Fiddle: http://jsfiddle.net/3aPzq/
The prized question is: how to get the child element (green border) to properly be inline of its parent, with correct margins?
You can't use width 100% in the case, because width is calculated before apply the margin. So the inner div will have 300px width, and then 20px margin.
It's better to use only margin parameters:
#inner {
position:relative;
border:1px solid #0f0;
margin:10px 20px 10px 20px;
}
if you wanna have inner box stay inside the outer box, then i wouldn't use margin, instead i'll use padding
#inner {
position:relative; // I'm really hoping to avoid absolute
border:1px solid #0f0;
padding:10px 20px;
height:100%;
width:100%;
}
Related
I'm trying to make an useful command-line layout just using CSS. My inkscape draft looks like this:
The bottom div has a fixed height and flexible width. The top div must have both dimensions flexible.
I need this to work on mobile devicest too. In past, I have made this design using rather complicated javascript script which breaks on mobile devices.
I've been trying to do it using height in "%" but that's not very precise I guess:
div#output {
width:99%;
height:90%; //NOT A GOOD IDEA. DEPENDS ON WINDOW SIZE
overflow: scroll;// - breaks on big/small screens
overflow-x: hidden;
margin:0px;
padding:5px;
}
My question is: How to do this with no javascript? How should I fix my jsFiddle example?
I'd use calc for the height of the output window here is the updated JSfiddle
*{
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
body {
background: black;
color: white;
font-family: monospace;
font-size:0;
}
div#output {
height:calc(100% - 40px);
overflow-y: scroll;
overflow-x: hidden;
padding:5px;
font-size:14px;
}
div#bottom{
height:30px;
line-height:30px;
font-size:14px;
}
The font-size:0 for the body is necessary to remove redundant spaces between the two DIVs.
Calc is subtracting 40px since the bottom is 30px and the output has a padding of 5px.
without using Calc is also possible with absolute positioning Here
*{
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
body {
background: black;
color: white;
font-family: monospace;
font-size:0;
}
div#output {
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:30px;
overflow-y: scroll;
overflow-x: hidden;
font-size:14px;
}
div#bottom{
position:absolute;
left:5px;
bottom:0;
height:30px;
line-height:30px;
font-size:14px;
}
Set the height of the html and body to 100%. That is what the 90% is scaling against.
I'd do it like this http://jsfiddle.net/081tcm3m/1/
There is no need to set width to block elements. It's the height important here. Setting it to 100% to body makes page fit the available screen height (if there is no margin).
edit
You are right, dimensions in % are not precise, so I decided to use position absolute and right, left, top, bottom properties to stretch div#output and make fixed margin for bottom input line.
Try http://jsfiddle.net/081tcm3m/4/
I am facing very simple problem with margin-top and its freaking me out. I have simplified my document to make it readable.
Here is my structure of html document
<body>
<section>
</section>
<section>
<div></div>
</section>
</body>
Here is my CSS
section{
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
background-color:green;
height:50px;
width:50px;
margin-top:0px;
}
When div's margin-top is 0, it looks like this:
But when I change it to margin-top to 10px, it looks like this:
I could not point out how that white space is added. Inspection shows that it is the part of body. Section is actually pushed down. I was expecting that small div to be pushed down relative to section. Can anyone explain this weired behavior?
here the fiddle http://jsfiddle.net/suriyag/UhqX9/1/ that has solution for your requirements
section{
position:relative;
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
position:absolute;
top:10px;
background-color:green;
height:50px;
width:50px;
}
did some little changes in your code
From w3.org:
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
Now to prevent collapsed margin, you should add overflow:auto to the parent element.
try
float: left;
for section tag if you can
http://jsfiddle.net/dcTw3/2/
I'm working on a mobile version for my website and I'm coming across a problem. I have an outer div that I want to stretch across the entire width, and then I want 4 divs inside of that to be of equal width, with a margin inbetween them.
This would be easy if I did not need a margin between them. I would simple set width:25% and be done with it, but I want a 3 pixel margin between them. When you set this margin, the actual widths will be more than 100%, therefor taking up more than one line in the div.
I thought about trying to set a negative margin-left, but this just gets rid of the margin on the right.
CSS:
.wrapper {
width:300px;
height:50px;
background-color:#f00;
}
.inner {
width:25%;
margin-right:2px;
float:left;
background-color:#00f;
}
And here is a fiddle so you can see exactly what I mean.
By the way, I know that I could use some jQuery or JavaScript to accomplish this after the page loads, but I wanted to know if there is a purely CSS way to do this.
You can use calc() to subtract 2px from the widths of the elements.
jsFiddle example
.inner {
width:calc(25% - 2px);
}
However, this results in a 2px margin on the last element. To fix this, add in:
jsFiddle example
.inner:last-child {
width:25%;
margin-right:0;
}
Alternatively, you could just use percentage based margins.
You can use % for your margins too. IE:
margin: 0 0 0 1%;
Just make sure to compensate the margin with a decrease in width. So instead of 25% for "inner" class, you would use 24% for the above margin implementation.
Fiddle incorporating the above
You could make the columns spread 24% and do a % based margin between them.
.wrapper {
width:100%
height:50px;
background-color:#f00;
overflow:hidden;
}
.inner {
width:24%;
margin:0 .5%;
float:left;
background-color:#00f;
}
you could use border and box-sizing to include this 2px gap inside your 25% width.
If background is not a plain color, then border should be transparent and background-color drawn as inset shadow.
.inner {
width:25%;
border-right:2px solid transparent;
-moz-box-sizing:border-box;
box-sizing:border-box;
float:left;
box-shadow:inset 0 0 0 10000px #00f;/* make it big , so it doesnt matter wich size it becomes.*/
}
http://jsfiddle.net/g5mgD/4/
width a background-image and a translucid color http://jsfiddle.net/g5mgD/9/
I would divide the 100% within elements and the margin like so:
.inner {
width:24%;
margin: 0.5%;
float:left;
background-color:#00f;
}
If you want the outer margins and the inner margins to be of the same size, you may assign specific margins to the first element.
Sorry for this very basic question.
I have these two boxes containing width evenly-
.box1
{
width:50%;
height:200px;
}
.box2
{
width:50%;
height:200px;
}
Here is container div of these boxes-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
I want to know when container div has width of 100% and its containment divs are equally divided to 50% of width.
Then after aligning them inline why isn't it coming in-line?
However reducing width less than to 50% makes them align.
Although if i align them with float attribute its shown inline-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
.box1
{
float:right;
width:50%;
height:200px;
background:red;
}
.box2
{
float:right;
background:red;
width:50%;
height:200px;
}
I want to know the reason why it is not showing them inline whether width is equally divided?
They are inline-block, but usually when using 50% you don't count for pixel rounding and margins/padding. So, in reality, 50% would be 50% + 10px, which will cause the next div to not fit in the same line, breaking the line and dropping it below the first div instead of alongside it. If you inspect the element using Chrome's inspector or Firefox's Firebug, you will notice it doesn't take up the whole width, only just above half of it.
Your border counts as part of the element size, it's an addition and not an inclusion in the width 100%. That will cause an inline element to move onto the next line down.
The box model adds all of it's parts together to get the final size, including padding and margin:
http://www.w3.org/TR/CSS2/box.html
A normal gotcha is that when you specify border 1px you're actually adding two pixels to the final computed size, one to the left and one to the right.
Firstly I would set padding: 0; and margin: 0; incase of any browser allocated padding (user agent stylesheet - this can be seen using inspect element in chrome, or firebug for Mozilla etc), and if you are going to float them then float them left and clear the floats afterward. So you have something like this:
.container{
border: 1px solid green;
width:100%;
}
.box1{
margin: 0;
padding: 0;
float:left;
width:50%;
height:200px;
background:red;
}
.box2{
margin: 0;
padding: 0;
float:left;
background:red;
width:50%;
height:200px;
}
Should do the trick.
Hello I have a wrapper div around three float div, I want to wrap the wrapper around these divs,but I can't completely wrap them, I have given a top :25px to the floating div ,so this div overflow exacltly 25 px below the wrapper,
Here is my page http://jsfiddle.net/vpcxP/ ,see how floating div overflow the main container div at the bottom
PS:I don' t want to give overflow:hidden
have you tried adding padding to the bottom of #mainContainer?
For #mainContainer instead of height:auto use overflow:auto
#mainContainer
{
overflow:auto;
width: 835px;
margin:0 auto;
position:relative;
top:50px;
background-repeat:no-repeat;
background-image:url("Images/mainContainerBG.jpg");
box-shadow: 3px 10px 20px 5px #000;
}
you also may need to adjust the width. Set it around 900px.
You seem to have redefined style for .column. remove that property and use this for column.
.column
{
width:280px;
height:452px;
top:25px;
float:left;
left:5px;
box-shadow:3px 10px 7px 3px #4f4848;
background-color:#2c2b2b;
margin-left:5px;
}