I am using blog spot default layout, what i want to make to create full Page (100%) width Page. Not sure where do i include css / js in http://webimportance.blogspot.in/
<style>
.main-inner {
width:100%;
border:2px solid #f00;
}
</style>
Appreciate your help
Thanks!
You have this class: content-outer
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 960px;
max-width: 960px;
_width: 960px;
}
You need modify to get the 100% for example:
.content-outer, .content-fauxcolumn-outer, .region-inner {
width: 100%;
}
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'm trying to learn designing a website.
Is there any way I can set my whole page width to 1000px with the current responsive sticky footer I have?
If possible, on top of the condition mentioned above, I want the left and right div to be horizontally align and the div will become vertical align when the screen collapse.
Here is my html/css code:
JSFiddle
Add max-width:1000px; to the .wrapper class and make the .content class float:left
.wrapper {
margin: 0;
height: auto;
max-width:1000px; /*add this line*/
}
.content {
background-color: slateblue;
width: 500px;
float:left; /*add this line*/
}
Demo at http://jsfiddle.net/Sp2ZW/
you mean something like this?:
http://jsfiddle.net/S3hMH/1/
html, body {
margin: 0 auto;
display: table;
height: 100%;
width: 100%;
width: 1000px;
}
.content {
background-color: slateblue;
width: 500px;
display: inline-block;
float:left;
}
Fiddle
If you are relatively new to responsive design i suggest using a framework as
Foundation
bootstrap
Coming to your questions.
Ya You can set your page-width to 1000px.
#wrapper{
margin: 0 auto;
width: 100%;
max-width: 1000px;
}
.content{
width: 50%;
float:left;
}
#media screen and (max-width: 480px) {
.content{
width:100%;
}
}
Content will occupy 100% width and stacks horizontally if the screen resolution is less than 480px because of the query above.Using % width helps you when designing responsive web pages
I have problem in rescaling my page according to the screen. I am doing coding in my laptop, where it seems ok, But when I open this page on desktop with wider screen it doesn't look nice.
div.fullWidth {
width:100%;
height:100%;
}
This is what I am trying in my CSS file, but it is also not working.
Use CSS3 and stay trouble free :
div
{
resize:both;
overflow:auto;
}
(or) without CSS3
Just drop you width and :
body{
position: absolute;
margin: 0 auto;
}
height: 100% will not work, try using 100vh
div.fullWidth {
width:100%;
height:100vh;
}
Browser support here
if you create an adaptive design that will help you bootstrap framework, but if you create a fixed design is the main wrapper is necessary to specify the width like this
<div class="fullWidth"></div>
.fullWidth {
display: block;
background: #ddd;
margin: 0 auto;
height: 500px;
width: 100%;
min-width: 960px;
}
I'm trying to have the background colour of one post expand the width of the browser but to no avail.
This is the site
I've tried
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: absolute;
width: 1200px;
}
and
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: aboslute;
width: 100%;
}
but that affects the whole post and shifts it to the left.
Where am I going wrong?
If I'm understanding your question correctly, you need to add the following to your CSS:
body {
margin:0;
}
Instead of absolute, use 'relative'. Set your width to 100%.
Add the following CSS at the end of your CSS file (or find these rules in your code and amend them to the following):
#site {
padding: 130px 0;
}
#canvas, .content-wrapper {
max-width: none;
}
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;
}