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/
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;
}
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.
I just finished the landing page for a nonprofit's holiday campaign. I am having a little trouble with some little finishing touches.
Currently, there is extra white space on the right side of the page triggering the horizontal scroll bar in browsers. I am not sure why, I'd like for the page width to adjust to screen size along with the elements.
Also, I am having trouble with the styling of the four images of the people being featured. I'd like the images to display on the same row with no spacing in between when screen is minimum 1200 pixels, each image is 300 x 300 pixels. Otherwise, I'd like them stacked one on top of each other centered on the screen (for mobile). They are stacking, but are displayed to the left.
I am not the savviest of programmers as I am NOT a web developer. I am actually a the Social Media Specialist for the nonprofit. I appreciate your help.
Page can be accessed here:
https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html
Best thing you can do is wrap everything inside tag to a new div & set overflow:hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
CSS
.wrapper {
overflow: hidden;
}
ALSO: It is not best practice to call scripts/css inside body tag. Those should be called inside tags
Try placing everything in a Wrapper div with the folowing css:
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
You could also try playing around with:
overflow-x: hidden;
For the whitespace (and scrollbar being displayed), add CSS for .row { margin: 0 !important; }. You currently have -10px +10px... I never understood why that was the bootstrap standard.
For centering the images, you want to add margin: 0 auto; to the parent div.box of the image.
The problem is all this margin fudging:
#media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
After I turned all that off, things seemed to line up correctly.
Apply this to your CSS maybe styles.css it looks to be the stylesheet with the highest priority.
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
UPDATE
I forgot to post a solution for your images. This code applies to an element wrapped around the images. Most people use a <div>, but I'm using a <figure> since it's semantically proper.
Using max-content on a container like .frame makes it act like shrink wrap. You need to use the vendor prefixes which is a pain as you can see you have to write out height and width 3 times each.
You might have to use negative margins and reset padding and borders to 0 in order to get rid of the space in between the images.
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: -moz-max-content;
height: -webkit-max-content;
height: max-content;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 0;
}
.frame img {
padding: 0;
margin: -2px;
border: 0;
display: inline-block;
width: 24%;
height: auto;
}
<figure class="frame">
<img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
<img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
<img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
<img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>
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 am not a CSS professional. So I only know some basics of it. My task is to have 100% body width and at the same time it should not wrap the contents when browser window resizes.
To achieve this I added display: inline-block to my body tag's CSS style. But when I does that the width gets decreased. Then I try to add width:100% to body style. The width changed as I wanted but then display: inline-block stopped working. How to enable both these properties at the same time?
<body style="display: inline-block; width:100%"><!--content---></body>
Why you want to fix the body width? simply use a container inside the body if you want like
CSS
body {
height: 100%;
width: 100%;
}
.container {
width: 1000px;
margin: 0 auto;
}
HTML
<body>
<div class="container"></div>
</body>
OR if you want your content area to be 100% than just change your CSS to this
CSS
body {
height: 100%;
width: 100%;
}
.container {
width: 100%;
}