So, I am working on something and I am trying to create an image tag that is inside another div. The problem is, I write
.container {
padding: 0;
margin: 0;
}
.container img {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
<div class='container'>
<img src='https://www.clarkson.edu/_site_support/background_image_banks/images/tor_images/studcnt_4128800003.jpg' alt='A problem occured'>
</div>
But there is still some room before the edge. I also tried to put padding to 0 and margins to 0 but still, nothing.
Give body margin as 0px;
body {
margin: 0px;
}
Use a reset file or structure in css to set the values to a defined default and not let browsers get that. One of the reset files I've used is from here http://meyerweb.com/eric/tools/css/reset/ . The body in this case has a margin of 8px and since there is not box-sizing defined it affects the widths. Try that.
Try this code
body,html{
margin:0px;
padding:0px;
}
Set the float attribute to get rid of the extra room:
div img { float: left }
But about the size of the image you need to have in mind that if the div's width/height is set as percentage, the inner element's width/height can not be set in percentage.
If you'd like to set the image width/height in percentage, you need to specify the dimensions of the div in pixels.
E.g.
This works:
div {
width: 600px;
height: 400px;
}
div img {
width: 100%;
height: 100%;
}
But this does not work:
div {
width: 100%;
height: 100%;
}
div img {
width: 100%;
height: 100%;
}
Totally, what you need to handle both parts of your question is something like this:
div {
width: 100%;
height: 100%;
}
img {
float: left; /* or right, whatever you'd rather */
display: block;
}
Though, for a better suggestion, information about the container of the div's needed.
Related
Please help, I have been stuck on this. I found many solutions online but not of them work in my case.
I'm trying to center the table. Here is how it looks now:
HTML:
<div class="container">
<table id="multTable"></table>
</div>
CSS:
#multTable {
width: 100%;
margin: 0 auto;
display:block;
height: 200px;
overflow-x:scroll;
overflow-y:scroll;
}
I tried this:
.container {
width: 100%;
}
#multTable {
margin: 0 auto;
height: 200px;
overflow-x:scroll;
overflow-y:scroll;
}
But the table overflows the page size:
What am I doing wrong here?
In your initial try, your table won't be centered since you're trying to center something that is taking 100% of the possible space. Technically, it is centered, you just can't see it's taking the entire space.
So imagine if you have a container of 100px. There's a block inside of this container that you want to center. But you're setting this block to have 100px in width. There's just no gap to see!
So this won't work:
{
width: 100%;
margin: 0 auto;
}
Instead, you should give the centering element a fixed width:
width: 400px; /* or whatever is needed */
margin: 0 auto;
That way it has some space around it.
Here, check this out:
https://jsfiddle.net/9gwcjvp3/
have you tried this :
.container {
//
}
#multTable {
margin: 0 auto;
overflow-x:scroll;
overflow-y:scroll;
}
Make your container the full width of whatever it resides in. Then make the table and specify a max-width.
.container {
width: 100%;
}
#multTable {
max-width: 100%;
}
I would help more to see the rest of your hml.
Only add this
.container {
display: flex;
justify-content: center;
}
I have a very simple website I'm working on for practice and having a problem with the background-color for my container div. I'm sure it's a pretty simple fix but I want to understand why it didn't work. Here is my CSS:
body {
margin: 0px;
padding:0px;
height: 100%;
background-color: black;
}
#Container {
width: 98%;
height: 100%;
background-color: grey;
}
For some reason the only way I've managed to get it working is when I include html in my body styling, is there a reason for this?
body, html {
margin: 0px;
padding:0px;
height: 100%;
background-color: black;
}
Thanks
While the problem is that an element, other than the <html> root element, needs a parent with a specified width (in order to calculate its own relative height), you can avoid the problem using units relative to the viewport, such as vh (1vh is equal to one-percent of the height of the view-port, and so is pretty much a direct drop-in replacement for a %-based height), such as:
body {
margin: 0px;
padding:0px;
height: 100vh;
background-color: black;
}
#Container {
width: 98%;
height: 100%;
background-color: grey;
}
JS Fiddle demo.
The problem with that approach, of course, is that it restricts the content of the #Container from growing and allowing the <body> to scroll (this may be by-design, of course), but you could instead use min-height to obviate the problem, and allow the elements to grow:
html {
padding: 0;
margin: 0;
}
body {
margin: 0px;
padding:0px;
min-height: 100vh;
background-color: black;
}
#Container {
width: 98%;
min-height: 100vh;
background-color: grey;
}
#expansion {
height: 3000px;
width: 2em;
background-color: #f00;
}
JS Fiddle demo.
(Note that in the above demo I'm using another element to force the #Container to expand, that's purely for demonstration purposes, and is not required by this approach.)
References:
CSS relative lengths.
Can I use: viewport units (vw, vh, vmin, vmax).
Make sure that you are calling your selector correctly. This is case sensitive.
Container Vs container (Small c and Capital C) and also ( # Vs .) Class for dot(.) And ID for Hash (#)
I have a content div. I want it to be atleast 90% of the screen.
I currently have:
min-height: 400px;
height: auto !important;
height: 400px;
in my #content div's css.
Changing to 90% did not work.
Is there some way to do this?
Essentially it will always run 90% down the screen unless something makes it bigger than 90%.
Thanks
You need to set html and body to fill 100% of the height, look at this fiddle: http://jsfiddle.net/promatik/KhCb6/
html, body {
height: 100%;
}
#myDiv {
min-height: 10px;
height: 90%;
background-color: #CCC;
margin: 1px;
}
Your height:auto !important is killing it. Remove it. Also, I would suggest using this method:
height:90%;
min-height:400px;
Depends how you're going to have the content, you can fake this by letting the overflowed content have the same background. For example:
#mainDiv {
min-height: 10px;
height: 90%;
background-color: #ddd;
}
#mainDiv p {
background-color: #ddd;
}
This way, your overflowed content would "look like it's expanding" with the div. Not ideal, but this gets what you're trying to achieve.
you need to set min-height of Div ie min-height:90%;
#mainDiv {
min-height: 90%;
background-color: #ddd;
}
I have a layout setup which can be view here: http://jsfiddle.net/Pn3ts/
It all works fine but i need to set a max/min width around the whole lot.
So i assume to do this i'd add in position: relative; onto the .row class. However if i do this the background of each .col seems to collapse. (see here: http://jsfiddle.net/YDBYK/)
How would i work this?
Give the html, body, and .row a height of 100% and it'll work.
html, body {
height: 100%;
}
.row {
position: relative;
width:100%;
height: 100%;
margin: 0;
max-width: 400px;
min-width: 300px;
}
jsFiddle: http://jsfiddle.net/YDBYK/1/
I have div (#child) which won't expand to the full height of it's parent (#parent). I've set the height for both html and body. It works if I set the parent's height as 100%, but I want the parent to have a minimum height, and the child to expand to the parent's full height.
HTML:
<html>
<body>
<div id="parent">
<div id="child">
<p>This area should be have the same height as it's parent.</p>
</div>
</div>
</body>
</html>
CSS:
html, body, header, h1, p { margin: 0; padding: 0; }
html { background-color: #DDD; height: 100%; }
body { background-color: #DAA; height: 100%; }
#parent {
min-height: 70%;
height: auto !important;
height: 70%;
background-color: #AAD;
}
#child {
height: 100%; /* why isn't this working ? */
width: 80%;
margin: auto;
background-color: #ADA;
}
JSFiddle: http://jsfiddle.net/nxVNX/11/
It works when you remove the !important; property. Maybe that's the problem?
I tried several other methods, but they didn't work, so the solution above could be the only one, I guess.
height: auto !important;
Don't ever use !important, because it cannot be overriden, work with it is harmfull.
It didn't work because it always used height: auto; not height: 70%;
A rule that has the !important property will always be applied no
matter where that rule appears in the CSS document.
So i recommend to you remove this line and it will works.
Have look for more information about What does !important mean in CSS?.
Am not sure why this is not working , but this will work
#parent {
min-height: 70%;
height: 100% !important;
height: 100%;
background-color: #AAD;
}