One of the sites I'm designing breaks like this, when I resize it. Why doesn't it stick to browser's edges? How can I accomplish this?
I used CSS Layout Generator to generate the layout initially. I used the liquid layout option since I wanted to make my site responsive.
Within the <body> there's a wrapper <div> which is styled like so:
min-width: 320px;
max-width: 100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
The wrapper contains all the header, middle-section and footer which inherits from the wrapper's width. They have the max-width set to 1200px and is centered.
You need to remove the User Agent styles for the left and right padding on body:
body {
padding: 0;
min-width: 320px;
max-width: 100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
See this fiddle. If you change the selector .incorrectruledisabled to .incorrectrule, you should see the results you are getting in your attached image.
You can't give something an upper limit on its width and also expect it to occupy the full width unconditionally. Please let me know if I am misunderstanding your question.
EDIT: Here is an example where the contents of the header, middle and footer are centered, using text-align, but they themselves are not.
Related
What I have seems to be a simple issue but I cant just wrap my head around it. I have googled around but all fixes for similar questions didn't help, which is why I'm asking for help here.
I am building a landing page with several sections stacked on each other. Each section is set to occupy the full height of the view port, and all except one is set to take up 100% width of the screen too.
However, when I reduce the screen height, the sections overlap each other. I have tried to set the overflow of each section to hidden, I still get the same behaviour. What I want is that each section be of fixed height as the browser height reduces and not get pushed into the upper section. Below is the snippet of my code.
body{
height: 100%;
width: 100%;
box-sizing: border-box;
}
.introd{
height: 100vh;
width: 100%;
padding: 3rem 4rem;
overflow: hidden;
}
<section class="introd">
<div class="introd_wrapper">
<h2 class="text-center">Introduction</h2>
<div class="contents">
some contents here
</div>
</div>
</section>
That's because of the padding of .section elements. To avoid the padding being added up to an element's width and height, set its box-sizing property to border-box like so:
.section{
height: 100vh;
width: 100%;
padding: 3rem 4rem;
box-sizing: border-box;
}
Also, you don't need to style the body just to make the elements stretch because each already has a width and height set.
Currently when I zoom out, all the content goes to the left or right side. But I want to keep the content centered like this page for example. Here is the website which I want to keep the content centered when I zoom out.
Here is the body and wrapper CSS:
body {
background: #0a0a0a none repeat scroll 0 0;
font: 14px/20px "Conv_Gotham-Medium",Arial,Helvetica,sans-serif;
height: 100%;
margin: 0;
min-width: 320px;
overflow-y: scroll;
}
#wrapper{
position: relative;
overflow: hidden;
}
The easiest way to keep something centered is to set margin: 0 auto and a specific width (or a max-width to keep it more dynamic). margin: 0 auto causes the horizontal margin to equally fill the remaining space while the vertical margin stays 0.
e.g. if your window width is 1280px and your #wrapper has a width of 1000px, both margin-left and margin-right will have 140px which leads to a centered wrapper
Live Example: http://codepen.io/anon/pen/QydNYo?editors=110
You seem to use the bootstrap framework.
Did you consider adding an additional class to your col-md-12, most conveniently trough jQuery with css-selectors or just plain CSS?
In your case like:
$(".webdesign-holder .col-md-12").css("max-width", value);
$(".webdesign-holder .col-md-12").css("margin", "0 auto");
OR
.webdesign-holder .col-md-12 {max-width:value;margin:0 auto}
I've just spent 3 or 4 hours trying to understand how to get a "symmetric" DIV inside an HTML page that has to be not scrollable.
The DIV must have the same margins from the window on all sides and must contain an IMG whose size should scale according to the window size maintaining it's ratio.
At the following link you can find the best I've been able to do.
As you can see the DIV has the right margins on the left, top and right size but not on the bottom one! Why not?
Is there something wrong with the DIV style?
<div style="margin: 50px;">
I hope it's quite clear, thank you for your help! :)
Edit: since on JSFiddle it doesn't appear as it should be I've just uploaded an image about what I get on my browser:
Edit 2: this is the link to the last working solution, thank you all for your help, in particular to dcardoso. :)
You should add to your body and html tags (doesn't work in jsfiddle) and remove 'overflow: hidden':
position: relative;
height: 100%;
and to your div tag (remove 'margin:50px'):
box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;
The page is getting cut because you are using overflow: hidden; for html and body .
when adding style tag inside jsfiddle style, it is not working. so scroll is visible.
Ahhh, I think I get what you're saying. If the page is longer than your div the space on the bottom is greater than the 50px margin.
You have a couple of choices here, this is just one of many.
I'm using calc() to calculate the 100% width/height minus the 50px on each side.
html, body {
margin: 0px;
overflow: hidden;
}
.maxSizeElement {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
margin: 50px;
}
/* OR YOUR COULD USE... */
.maxSizeElement {
position: absolute;
width: 85vw;
height: 85vh;
top: 0;
right: 0;
left: 0;
bottom:0;
margin:auto;
}
<body>
<div>
<img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
</div>
</body>
Take this simple example... something I never noticed before now.
HTML:
<body>
<div class="container">
<div class="sidebar">
</div>
</div>
</body>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
border: 1px solid #000;
}
.container {
height: 250px;
}
.sidebar {
width: 20%;
}
setting the height of body to 100% seems to work fine in this fiddle.
however, if you change the size of .container so that it expands beyond the initial window size... you will notice the div breaks out of the body container (it even appears to break out of the html container too)?
Reformatted Question
Is it possible to set height of the body to 100% of browser window initially but also allow the parent containers to expand with its children if it expands beyond the initial window size?
Typically, when you want to have html and body take on the height of the viewport but also allow them to expand with the content, you set height: 100% on html only, and min-height: 100% instead of height on body. Further explanation can be found in my answers to the following questions:
height: 100% or min-height: 100% for html and body elements?
Applying a background to <html> and/or <body>
Unfortunately, because html is the root element, you cannot set min-height on it alone, or everything will fall apart. You need height: 100% because otherwise there is no parent height on which to base body and its contents; the height of html itself is based on the height of the viewport, which as you may have guessed is pre-determined.
This will be problematic if your actual layout has borders on all these elements, so instead I'm going to assume the borders aren't actually needed. You do not need to worry about the background because it will automatically be transferred to the viewport allowing it to cover the entire painting area (details in the second link).
Given your CSS, you can simply set height: auto on body to cancel out the height: 100% in your previous rule, along with min-height: 100%:
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
}
body {
height: auto;
min-height: 100%;
}
Note that I've also removed the borders, again based on my assumption that they're not needed.
Now we have another problem: once the content grows beyond the browser height, the padding on html disappears, since html doesn't expand along with the other content due to height: 100% (scroll to the bottom to see this).
You can't remove height: 100% since it's required, but you can still change the padding on html to margins around body instead because the margins will continue to take effect even once body overflows html, resulting in the following (again, scroll to the bottom):
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
}
html {
padding: 0;
}
body {
height: auto;
min-height: 100%;
margin: 20px;
}
The default behavior when an element is set to 100% height is to fill its parent entirely, minus the parent's padding value.
Its your padding. I put your code in Dreamweaver and began to check to see why it was doing that. You're right, it works just fine until it smacks out of the viewport by changing the height. I fixed the issue by removing the padding. I suggest reworking how you organized your padding or try using something fill space without using padding. (Such as margin: 5px; for example on the outer layers instead using padding on the inside of the layers. You can even just using a blank fixed height div, afix your inner divs to a percent, and rinse and repeat. Its a dirty method.)
I am working on a website for client / design studio, there was strange issue where I found that despite having body and html elements set to width 100% and when I resize browser, the scrollbar appears forcing me to scroll the right only to find there is a gap on the right side in about 150pixels. The body element container () sets itself to fixed width of 1240px when the browser is resized but still leave the gap on the right side.
Here is css code for body element.
body {
min-width: 1200px;
max-width: 100%;
left: 0px;
right: 0px;
width: auto !important;
margin: 0 auto;
padding: 0;
background: url('images/bg-repeat2.jpg') repeat;
line-height: 1;
font: 'BitstreamVeraSerifRoman', Arial, sans-serif;
}
here is the css for html element:
html {
margin: 0 auto;
padding: 0;
width: 100%;
min-width: 1200px;
left: 0px;
right: 0px;
}
I am not using "overflow-x: hidden;" property due to concerns in the need for scrolling in smaller screens and mobile devices as well. Please note that this site is desktop version.
I would appreciate if anyone in this community can assist by providing solution or fix.
Thanks.
Youre problem seems to be min-width:1200px; remove that, and it will resolve the mandatory horizontal scroll. If you want 100% width do it like this:
html, body {
width:100%;
}
I dont think you need more then that width wise, for html and body. if you do, explain why or post a pic what you need pls.