In this example, which I'm trying to understand, definitely overflow happens, but it doesn't work. why?
body, html, p {
margin: 0;
padding: 0;
}
html{
background-color: #666;
}
body{
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div{
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p{
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
HTML: Inside Body Tag
Emmet: div>p>lorem10
Body should always cover 100% of the width. I would suggest you set a inner wrapper instead that you use overflow hidden on.
https://jsfiddle.net/jjxurtpk/
html
<div class="wrapper">
<div>
test
</div>
</div>
css
.wrapper{
width:400px;
overflow:hidden;
background:#eee;
padding:20px;
}
.wrapper div{
width:500px;
background:#ddd;
padding:10px;
}
update: https://jsfiddle.net/jjxurtpk/1/
I believe the overflow hidden does not fully apply unless the background (html) does not have overflow hidden. I'm not sure why. It could just be thats how browsers simply render the body tag.
See this fiddle
You will have to add overflow:hidden to html too ..
See the below CSS
body,
html,
p {
margin: 0;
padding: 0;
}
html {
background-color: #666;
overflow:hidden; /* <---------------add this----------*/
}
body {
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div {
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p {
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
You need to set a height on the body, and apply overflow: hidden to the html.
See demo here
html{
overflow: hidden;
}
body{
height: auto;
}
Related
I'm new to html and css, and while I was creating a page for training, I made one div to fill the top horizontal space.
However I did not have succsess in doing that, and I have no idea why, I tried tweaking the margins, the padding, looked around on the internet and found no solution for my case. I wanna know if it is possible to fill all horizontal space with only one div.
Here is how my code currently is looking:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Orbitron');
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: -8px 0px auto 0px;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
<header>
this is a test
</header>
</div>
Just apply margin:0 to the body tag. You are getting the default margin from the body.
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
margin:0;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: -8px 0px auto 0px;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
this is a test
</div>
Try this
body{ margin :0; background-color: green;color: green; font-family: 'Orbitron', sans-serif; overflow-x: hidden;}
A div by default takes up as much horizontal space as possible. So it is generally as wide as its parent element.
As I understand your problem you are missing the the last few pixels on either side. This is not an issue of the div, but of the body element. The body element has to a default margin.
So you have to set the body margin to 0 (zero). Then you can either not specify a width for the div or give the div a width of 100%.
Then the div should take up the whole horizontal space of the webpage.
First problem, your page div is not valid (closed tag that is never opened).
For the width, add
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
to reset browser styles.
https://jsfiddle.net/dtz5h9yh/3/
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Orbitron');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: 0;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
<header>
this is a test
</header>
</div>
Add this to your CSS:
*{
margin:0;
padding:0;
}
div#page{
width:100%;
}
Also remove the </header> from the div with id"page".
hope this helped
my problem is that I am trying to center a div inside my full-width header like this:
</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
The result of this code is in the here.
Thanks in advance.
min-width:100%; seem to centre your div...
body {
background-color: red;
margin: 0;
}
#header {
margin: 0;
height: 2.95em;
padding:15px 0;
min-width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
<body>
<div id="header">
<div id="insideHeader"></div>
</div>
</body>
or
http://jsfiddle.net/x1b7zpy4/1/
As my understanding you are trying to fit the outer box in the window and center align the inner box.
Add/Update following styles
html, body {
margin: 0;
padding: 0;
}
#header {
margin-top: -1em;
height: 2.95em;
padding:15px 0;
width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
There are default padding/margin of browser. You need to override those in order to fit your outer box.
Once you do that, you need to remove your negative left margins which were put in order to make box stick to the boundary of window.
Then set the width to 100%.
For reference - http://jsbin.com/lomeganori/1/edit?html,css,output
give
#header
{
box-sizing: border-box;
//and remove height:2.5rem;
}
box-sizing:borderbox will removes all your troubles, and dont give height to parent
that will automatically take the height of the inner div
I feel like this is something that's really simple to fix, but I'm just too dumb to figure it out, but I've been Googling for a long time to figure this out. The textbox on the bottom of my page is getting cut off for some reason. I think it has to do with how the body div is set up. Also, if someone could tell me how to get my textarea the same size as the main div, that'd really be nice. JSFiddle
HTML
<div id="body">
<div id="main">
<h1>Test</h1>
<hr />
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="controls"><form action="#" method="POST">Enter a Comment: <br /><textarea sizable="false"></textarea><br /><input type="submit" value="submit" /></form></div>
</div>
CSS
#main {
background-color:white;
position:relative;
min-height:300px;
padding: 20px 20px 20px 20px;
border-left: 1px grey solid;
border-right: 1px grey solid;
border-bottom: 1px grey solid;
}
#main p {
font-size:20px;
word-wrap:break-word;
}
#header {
background-color: #C0C0C0;
width: 100%;
border-bottom: 1px solid grey;
}
html, body{
height: 100%;
}
#body {
margin-left:75px;
margin-right:75px;
margin-bottom:125px;
margin-top:0;
}
#controls {
position: absolute;
display: inline-block;
width:90%;
height: 100px;
overflow: hidden;
z-index: 0;
} #controls form textarea {
resize: false;
width: 100%;
height: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
}
I just removed this one property from the CSS tab
#controls {
overflow: hidden;
}
and it worked! You can see the full textarea now.
Here is the updated fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/jRCy3/2/
DEMO
#controls {
position: absolute;
display: inline-block;
width:90%;
height: 100px;
//removed 'overflow:hidden' property
z-index: 0;
}
I am displaying images in HTML control horizontally. The images TABLE is inside main DIV. CSS for DIV is as follows:
#main
{
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
The problem is that main DIV border is not extending and images are dropping out of it as shown in following screenshot:
Here is the HTML scippet:
<body>
<div id="main">
...
<table>
<tr id="image-list">
</tr>
</table>
...
</body>
Please suggest how to alter code so that DIV border automically increase its width as per images in it?
The issue which you are encountering - Demo
And this is what will fix the issue, am doing nothing fancy, I assigned width: 100%; to the table element, and than am using table-layout: fixed; which is important here, and than just use max-width: 100%; for your img tag... Also make sure you use width for your td elements as well...
Demo (Fixed issue)
#main {
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
img {
outline: 1px solid #eee;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
table tr td {
width: 33%;
}
table tr td img {
max-width: 100%;
}
give :
table{width:100%;}
as well as
#main
{
width: 100%; /*not auto*/
/*remaining css */
}
that would solve your problem
so, final css :
html, body {
width:100%; /* important */
height:100%; /* important */
margin:0;
padding:0;
}
#main {
width: 100%; /* changed*/
height: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
table{
width:100%; /* changed*/
height:auto;
border-collapse: collapse; /* added and very important*/
table-layout: fixed;/* added and very important*/
}
img{
width:auto; /* change as per your need */
max-width: 100%;
height:auto; /* important to maintain aspect ratio of images */
}
your problem
solution demo
Put this CSS in your stylesheet to fix it:
#main
{
width: 400px /*you can give fixed value or auto value*/;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
#main table
{
width:100%;
}
I want to divide page into two "div"s. Left(25%) and right(75%). And i wanted a border between the two, to separate them. But unless I enter text/image into the "div"s they don't expand.
<div>
<div class="left">
<img src="granted_300_50.png" id="logo">
</div>
</div>
And the css is:
div.left{
background-image: url("flower_ornament2_watermark.png") ;
background-repeat: no-repeat;
background-color:white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
Help?
Digvijay
Setting height in percentage on inline elements works only if the container has a specific height set too, up to the body and html.
This CSS should work:
html,body { height:100% ;}
div#container { height:100%; }
div.left { height:100%; }
Another common workaround is the so called "faux column" method:
http://www.alistapart.com/articles/fauxcolumns/
http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
You can also use display:table; for the container and display:table-cell; for the floated divs. But it's not supported by IE7.
div#container { display:table; }
div.left { display:table-cell; }
Take a look at this:
CSS
.left{
width:25%;
height:100px;
border-right:1px solid #ccc;
}
.right{
width:75%;
height:100px;
border-left:1px solid #ccc;
}
HTML
<div class="left"></div>
<div class="right"></div>
Unless you also set a height on the body and html nodes, they will collapse. You can fix this by setting them to 100% height:
Demo: http://jsfiddle.net/SO_AMK/Nhajy/
CSS:
html, body, div { height: 100%; }
div.left {
background-image: url("flower_ornament2_watermark.png");
background-repeat: no-repeat;
background-color: white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
The other solution is to set a min-height:
Demo: http://jsfiddle.net/SO_AMK/MSLdT/
CSS:
div.left {
background-repeat: no-repeat;
background-color: white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
min-height: 100px;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
you can use something like:
/css code/
height:calc(100%-2px);
border:1px solid black;