I have this CSS for a div:
.modal-dialog {
margin: 30px auto;
}
which puts it in the centre of the page, i had the width set to a fixed width of 800px but i want to change it so its the width of the content inside (not the width of the page)
i tried setting the width to 100% and i also tried setting min-width:800px; but both of these just set the div to the full page width
how can i make this div stay in the centre of the page and only be the width of the content inside it
Use the following on the container :
.modal-dialog {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
outline: 2px dashed red;
}
.content {
width: 50vw;
height: 50vh;
background-color: blue;
}
<div class="modal-dialog">
<div class="content"></div>
</div>
I believe this should work.
.modal-dialog {
margin-left:auto;
margin-right:auto;
width:auto;
}
This will put your div in the center and make the div as wide as its content.
Related
This is a simple html page. I set html, body height 100%, but there is a quite long content.
Now I make the browser scale to a small size and scrollbar will show. I open Chrome Dev tool, the computed height of body seems the size of viewport, say 321px.
Normally, a body container of 321px computed height will end at the top of the page, but actually the body seems has the same height of the whole page, 1000px here.
That is my puzzle, why does the computed height not match the actual height?
html,body{
width:100%;
height:100%;
background: #ccc;
}
.content {
width: 20px;
height: 1000px;
background: #666;
}
<html>
<head></head>
<body>
<div class="content"> </div>
</body>
</html>
Here you are having an overflow, so the height of the body and the html are different from 1000px and equal to screen height because of the 100%.
The thing that make you think your body has 1000px is probably the background that cover your whole content but here you are facing a special behavior of the background called background propagation.
You may change the background of the html element and you will see the issue clearly:
html,
body {
height: 100%;
background: #ccc;
margin:0;
}
html {
background: red;
border:5px solid green;
}
.content {
width: 20px;
height: 1000px;
background: #666;
}
<div class="content"> </div>
As you may notice, the body height is not equal to the content height but limited to the screen height and your content is simply overflowing the body element. I also added a border to the html element to show that its height is also limited to screen size and to better highlight the background propagation behavior.
When you set height:100% to an element you basically telling it to take it's parent's height as it's own height.
Example :
* {
text-align: right;
}
#parent {
height: 100px;
background: red;
}
#kid {
height: 100%;
width: 200px;
background: lime;
}
#grandkid {
height: 1000px;
width: 100px;
background: orange;
}
<div id="parent">
<div id="kid">
<div id="grandkid">
</div>
</div>
</div>
If you expect the parent to take it's children's computed height, don't define a height for it.
Example :
#parent {
/* Parent without height takes all of it's children's heights*/
background: red;
}
.kids {
height: 1000px;
width: 40px;
background: lime;
margin-top: 10px;
}
<div id="parent">
<div class="kids"></div>
<div class="kids"></div>
</div>
I do want to display a scrollbar inside a table ( within a div ):
<div style="width:789px; height:150px; overflow:auto;">
...
</div>
The problem is that the div have the default height already 150px. I want it to have no height defined from the start, and when the div reaches 150px, the scroll-bar to appear. How can I achieve this?
You can do that with max-height instead of height. It will trigger the scroll-bar once it will reach the max-height.
CSS:
<div style="width:789px; max-height:150px; overflow:auto;">
...
</div>
check this fiddle it should show you how to archive this
.box{
width: 100px;
height: 50px;
overflow: auto;
border: 3px solid green;
}
.content{
width: 1000px;
height: 30px;
background: red;
}
Use the css property max-height
div {
overflow: auto;
max-height: 150px;
}
Here is an JSFIDDLE Example.
.
I am trying to build a layout that consumes all the space that is visible in browser. I set html, body height 100% as was suggested in different SO posts. Following is the markup that I am trying
<div>
<div class="header">
</div>
<div class="main">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
max-height: 100%;
}
.header {
height: 30px;
background-color: #000;
}
.main {
height: auto;
padding-right: 0px;
max-height: 100%;
width: 100%;
display: block;
clear: both;
background-color: #eee;
}
.container {
width: 90%;
overflow-y: scroll;
background-color: #ccc;
}
.content {
height: 2000px;
width: 80%;
background-color: #fff;
}
the content div height cause the whole body to grow and hence the browser's default scroll bars are shown. Though I have set the container div to scroll in order to display the content of content div, still the scroll bars for container div don't show. How can I fix this.
here is the jsfiddle
Edited:
By default the height of the div element depends on its content (unlike width which takes 100% width of the parent). That's why when you specify the height of inner element as a percentage it won't be accurate if your parent tag has no explicitly defined height (that means height has to be defined up to the very top of the DOM since height is not inheritable).
In your case you need to add height: 100%; or any other height to your .container , .main and the wrapper div
modified fiddle
I have the following HTML code:
<div class="main">
<div class="container">
<div class="contents">
Some funny stuff in here
</div>
</div>
</div>
With the following CSS:
.main {
overflow: auto;
width: 200px;
}
.container {
border: 1px solid black;
}
.contents {
width: 300px;
}
This is what this page does (see it at http://jsfiddle.net/C7RDh/7/):
main div is 200px width, with overflow: auto (i.e. scrolls contents if wider than 200px).
So, as contents div is 300px wide, it scrolls horizontally.
So, I would expect container div to be 300px as well (as elements inside it are 300px wide), but it is not! It's 200px wide.
How come? I want it to be as wide as its contents (300px), how can I achieve that?
You just need to make you container float
.container {
border: 1px solid black;
float: left;
}
Float will automatically adjust your outer div to inner div width.
You need to slightly adjust your CSS. This will work:
.main {
overflow: auto;
width: 200px;
float: left;
}
.container {
border: 1px solid black;
float: left;
}
.contents {
width: 300px;
float: left;
}
Actually you should add the overflow: auto in container css not main css
Can I make a banner reach outside of its container, without creating horizontal scrollbars if the window is too narrow?
I thought I had done this before with negative margins, but can't get it to work now.
Demo: http://jsfiddle.net/Znarkus/s95uz/
<div id="main">
<div id="banner">I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content">
</div>
</div>
You can use a container that has a min-width of 500px or width 100% depending on if you want a scroll bar or none at all; add position relative, and overflow hidden and then inside of that add another container that is your set width of 500px with a margin of auto for the left and right. Put your content inside of the inner container using position absolute; in this case your #banner would be right: -50px;
I've modified your fiddle here: http://jsfiddle.net/s95uz/14/
<style type="text/css">
#main {
min-width:500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#inside{
width:500px;
margin:0 auto;
height:100%;
position:relative;
background: red;
}
#banner {
background: green;
position: absolute;
right: -50px;
width: 150px;
height: 300px;
}
#content {
width: 400px;
height: 500px; /* Simulate content */
background: blue;
}
</style>
<div id="main">
<div id="inside">
<div id="banner">
I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content"></div>
</div>
</div>
Just add overflow : hidden to the div "main" css.
Adding this to an element hides the possible conditional sidebars.
Your new css will look like;
#main {
width: 500px;
margin: 0 auto;
background: red;
position: relative;
overflow:hidden;
}
You can use responsive CSS and hide the banner when the content plus the banner are higher than the viewport:
#media only screen and (max-width: 550px) {
#banner { display: none;}
}