This question already has an answer here:
Left margin of Margin: auto-ed elements = to padding left of 100%-width overflow item
(1 answer)
Closed 7 years ago.
This is my fiddle: http://jsfiddle.net/o7pfjv3w/. I trying to give to the grid class a margin-left:10px and margin-right:10px; but a scrollbar shows up. How do i get rid of it ?
css code:
.main{width: 100%;border:1px solid black;overflow:auto;display:block;}
.grid{width:100%; margin-left:10px;margin-right:10px}
html code:
<div>
<div class="main">
<div class="grid"> <p>ppppppppppppppp pppppppppppppppppppppppppppppp ppppppppppppppppppppppp ppppppppppppppp</p>
</div>
</div>
</div>
Just change your overflow:auto; to overflow:hidden;
.main{
width: 100%;
border:1px solid black;
overflow:hidden; // not auto
display:block;
}
Here is the updated jsfiddle
This has both margin and width: 100%.
.grid{width:100%; margin-left:10px;margin-right:10px;}
You need to make sure you calculate it. So, instead, give padding and make the box-sizing to be border-box:
.grid{width:100%; padding-left:10px;padding-right:10px;box-sizing:border-box;}
Fiddle: http://jsfiddle.net/o7pfjv3w/1/
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
I have a sidebar below a topbar but when I try to make the sidebar's height 100% it disappears but when i put a px value to the height, it appears. I tried to do calc(100%-180px), 180px is the height of my topbar, but that also dosen't work.
HTML
<div id="topbar">
<div id="totheright">
<h1>suggestions</h1>
<div id="topbardesc">a little description</div>
<div id="links">
home
ask
submit
</div>
</div>
</div>
<div id="sidebar">
</div>
CSS
#topbar {
background-color:white;
border-bottom:solid 1px black;
position:relative;
height:180px;
width:100%;
}
#sidebar{
background-color:gray;
width:300px;
height:100%;
}
codepen
You need to set the height of your body and html to 100%
body, html {
width: 100%;
}
Updated codepen here : https://codepen.io/anon/pen/qKzZQw?editors=1100
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 5 years ago.
I am trying to keep an icon floated left on a liquid text container that has line breaks.
The problem is that when the line breaks, there is a large gap before the text ends and where the div ends. Which makes my floated element start where the gap ends.
Is there a way to make the div only the size of its contents?
Check this codepen: https://jsfiddle.net/e38edtdy/1/
Resize the output area to see the gap of space.
The button will auto resize it to see the gap.
*{
padding:0;
margin:0;
top:0;
left:0;
}
#mainContainer{
width:100%;
border:black solid thin;
}
#lt{
color: black;
background-color:gray;
tex-align:left;
max-width:90%;
float:left;
}
#icon{
width:20px;
height:20px;
background-color:blue;
float:left;
}
<body >
<div id='mainContainer'>
<div id='lt'>This is The information This is The information This is The information</div>
<div id='icon'></div>
</div>
<br/>
<input type='button' onClick='showBadSize()' value="click to auto resize to show gap" style='margin-top:20px;float:left; clear:left' />
</body>
An alternative for you might be to put hyphens: auto on your text container to make text break more nicely. Firefox needed a language attribute as well, like lang='en-US'.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
Curious why the top and bottom margins of 10px are not applied to the inner div in the snippet below. If I set the inner display property to "inline-block" it applies the top/bottom margins as expected.
jsFiddle example
HTML:
<div class="outer">
<div class="inner">
My content...
</div>
</div>
CSS:
.outer {
background-color: lightgrey;
}
.inner {
background-color: green;
padding: 50px;
width: 600px;
margin:10px;
display: block; /* No top, bottom margins applied. Does apply them with "inline-block". Why? */
}
The .inner top margin is collapsing.
An easy fix is to make the outer display:inline-block You should put padding:10px on the outer and no margin on the inner.
This question already has answers here:
Why does this inline-block element have content that is not vertically aligned
(4 answers)
Closed 8 years ago.
If you have three identical divs positioned inline-block they are aligned perfectly. But if you put any content in any of the divs it drops down below the others. Why does it do that?
<div class="left">?</div>
<div class="center"></div>
<div class="right"></div>
div {
display:inline-block;
margin-:2px;
height:100px;
width:25px;
border:1px solid black;
}
http://jsfiddle.net/7kkC6/
better example: http://jsfiddle.net/7kkC6/9/
This is because vertical-align is by default set to baseline.
You can fix your problem by setting it to top :
div {
display:inline-block;
margin-:2px;
height:100px;
width:25px;
border:1px solid black;
vertical-align: top;
}
The demo here : http://jsfiddle.net/7kkC6/4/
This question already has answers here:
Grid of responsive squares
(5 answers)
Closed 7 years ago.
Need some help with the CSS for generating a grid of perfect squares. Div's look like this, but I'd like to have each of them look like a perfect square - not a rectangle. Setting width and height in css doesn't do it. :-\
<div class="square" /> ... <div class="square" /> <div class="linebreak" />
<div class="square" /> ... <div class="square" /> <div class="linebreak" />
You need to combine these style rules to get what you need. The float property ensures they stack in a horizontal row, the block rule allows you to set the height and width of the element and the overflow hidden rule stops it from expanding with the content.
.square {
float: left;
width:200px;
height:200px;
display:block;
overflow:hidden;
}
Thanks to http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/ for pointing out it can be done with pure CSS and be fluid, like this:
.onesquare {
width: 30%;
margin: 0px 2% 0 0;
padding-bottom: 30%;
background-color: red;
}
Thats unusual
try something like this. It should work
.square {
width:100px;
height:100px;
display:block;
overflow:hidden;
float:left;
}
See: http://jsfiddle.net/EyXpC/
Use display:block together with width and height attributes.