demo: http://jsfiddle.net/LTchE/10/
HTML:
<body>
<div class="wrapper">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
</body>
CSS:
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
.wrapper {
height: auto;
min-height: 100%;
margin: 0px auto;
padding: 0px auto;
max-width: 100%;
background: #de291e;
}
.x {
background: url('http://placehold.it/300x505') no-repeat center;
background-size: contain;
max-width: 300px;
width:100%;
height: 505px;
display: block;
float:left;
}
.y {
background: url('http://placehold.it/500x505') no-repeat center;
background-size: contain;
max-width: 500px;
width:100%;
height: 505px;
display: block;
float:left;
}
.z {
background: url('http://placehold.it/100x505') no-repeat center;
background-size: contain;
max-width: 100px;
height: 505px;
width:100%;
display: block;
float:left;
}
i have this 3 divs in the screen, but when resizing the windows, they break into new rows...
i want then to continue in the same row, like being responsive..
anyone can help? im searching this for hours now.. :(
(also is it possible to they always match the screen size? ) for now the max value is 900px.. but I dont know, maybe if some one has a huge screen, to fit it)
You need to work in percentages.
Your wrapper is 100% and you have 3 divs side by side inside that wrapper.
Those 3 divs need to equal 100% so the first div can be 40%, the second 50% and the last 10% (Just play around until you get what you like)
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
.wrapper {
height: auto;
min-height: 100%;
margin: 0px auto;
padding: 0px auto;
max-width: 100%;
background-color: white;
}
.x {
background-color:green;
width:40%;
height: 505px;
float:left;
}
.y {
background-color:blue;
width:50%;
height: 505px;
float:left;
}
.z {
background-color:red;
height: 505px;
width:10%;
float:left;
}
The Problem is Width in your div's css, what your code says is that take the full with that is given to parent that might be suppose 1000px with width:100% but on the other hand you set a limit of max-width:300px so it wants to take the full width i.e. 1000px on the screen but max-width limits it to 300px so it looks like everything is working fine but there is a conflict in your css which is not noticable and then you just resize your window div moves to next row because there is not enough space. Basically what you have to do is give it a width that is actually need.
like i gave a value of width:33% to all the 3 divs rather than giving all of them 100% individually and code worked fine.
Related
I'm having problem with making a div stretch and shrink depending on the size of the browser.
Here is the html
<div class="content_container">
<div class="content_menu"></div>
<div class="content_left"></div>
<div class="content"></div>
</div>
.content_container{
margin: 0 auto;
height:100vh;
display:block;
}
.content_left{
background: #eee none repeat scroll 0 0;
display: inline-block;
float: right;
padding-top: 50px;
position: relative;
text-align: center;
width: 25%;
height:calc(100vh - 50px);
}
.content_menu{
background: #eee none repeat scroll 0 0;
float: left;
height: 100px;
width: 25%;
height:100vh;
}
.content{
background: #fff none repeat scroll 0 0;
display: inline-block;
margin-bottom: 0 !important;
margin-right: auto !important;
vertical-align: top;
width: 50%;
}
I've already tried giving height:auto, 100% and 100vh but none seems to work.
The .content_left and .content_menu fall short of the height of the .content so there are blank white spaces.
Is there anyway those layers can resize themselves to fit to the height as well as the .content div.
Can anyone help me out?
Use viewport width/height to set an elements dimensions relative to the window
body {
padding: 0; margin: 0;
width: 100%;
width: 100vw;
}
div {
background: lightblue;
height: 45px;
margin-top: 20px;
}
#two {
width: 100%;
width: 100vw;
}
#one {
width: 60%;
width: 60vw;
}
<div id="one">div one</div>
<div id="two">div two</div>
I'm guessing the blank white spaces you are talking about are those surrounding the gray elements on the left and right side. Those are caused by the default margin on the body. Just set the body margin to zero.
body { margin: 0; }
Using your markup in your question, it appears to work as I think you want it to.
I am trying to get an image horizontally and vertically centered within a div of variable height and width.
So far, so good.(See jsfiddle links below)
Now the catch is the image should also be responsive and adjust if either the height and/or width of the container is smaller than the images height or width.
After researching, going through all the different "solutions" out there and fiddling for a solution, I was unable to find the perfect one, however two came close:
1.) This first one does everything I need except when the window width is smaller than the image width, the image is no longer horizontally aligned:
http://jsfiddle.net/me2loveit2/ejbLp/8/
HTML
<div class="overlay">
<div class="helper"></div>
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
CSS
.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
2.) This second example keeps everything aligned, but the image does not scale down when the height is less than the image height:
http://jsfiddle.net/me2loveit2/ejbLp/9/
HTML
<div id="outer">
<div id="container">
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>
CSS
#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}
I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
http://jsfiddle.net/pYzBf/1/
Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.
I'm trying to build a page with a wrapper that would be max-width: 700px
Optimally, the page would be responsive and resize the images to fit the window. I'm really having a difficult time getting the browser to resize the images and container to fit the window height. Width seems to scale just fine. Ultimately, the user wouldn't have to scroll down to see the page. Is this possible without JavaScript? If not, can someone point me in the right direction? Thanks! Code as follows:
jsfiddle: http://jsfiddle.net/LTchE/
<style type="text/css">
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
#wrapper {
height: auto;
min-height: 100%;
margin: 0px auto;
padding: 0px auto;
max-width: 600px;
background: #de291e;
}
.happyHolidays {
background: url('http://placehold.it/600x80') no-repeat center;
background-size: contain;
width: 90%;
height: 80px;
margin: 0 auto;
display: block;
}
.fromMe {
background: url('http://placehold.it/600x80') no-repeat center;
background-size: contain;
width: 90%;
height: 80px;
margin: 0 auto;
display: block;
}
.buttons {
text-align: center;
}
.snowperson {
text-align: center;
}
.snowperson img {
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="happyHolidays"></div>
<div class="fromMe"></div>
<div class="snowperson">
<img src="http://placehold.it/650x750" name="snowperson" border=0>
</div>
<div class="buttons">
<a href="javascript:NextImage()">
<img src="http://placehold.it/150x50" alt="Next snowperson">
</a>
</div>
</div>
</body>
Use the Overflow:hidden To the wrapper class
Give the Wrapper class to the overflow:hidden your scroll is hidden
The key is, in order for #wrapper to 'inherit' 100% height from the browser, all its parent elements (including the HTML tag) need to be position:relative; and height 100%;
<html>
<head>
<style>
html, body, .wrap {
position:relative;
height:100%;
margin:0;
}
.wrap {
max-width:700px;
margin:0 auto;
background:#aaa;
}
</style>
</head>
<body>
<div class="wrap">Test Text</div>
</body>
</html>
I threw it up temporarily on my server here: http://mechapps.co/fullheight/
And, here's your code: http://mechapps.co/fullheight/overflown.html
I ended up adding some styling to the wrapper:
#wrapper {
margin: 0 auto;
background: #de291e;
background-image: url('../images/snowbg.png');
background-repeat: repeat;
min-width: 600px;
max-width: 700px;
min-height: calc(690px * (90/150));
height: 90vh;
width: 150vh;
max-height: 890px;
position: relative;
}
This works relatively well for my situation... thought it's still not perfect.
You can see the final at www.ogilvypr.com/happyholidays
I'm making a CSS layout that has a 960px wide div, and I'd like to have it reach from the top of the page to the bottom. The obvious solution is min-height: 100%;, but it doesn't work. Here's my CSS:
* {
margin: 0px;
padding: 0px;
}
body {
background: #FF0000;
height: 100%;
}
html {
height: 100%;
}
#sheet {
width: 960px;
min-height: 100%;
background: #000000;
margin: 0px auto 0px auto;
}
#sheet1 {
width: 760px;
min-height: 100%;
top: 0px;
bottom: 0px;
background: #FFFFFF;
}
And from my HTML:
<div id="sheet">
<div id="sheet1">
</div>
</div>
It display fine when I change #sheet's min-height to height, but then it would get cut off if the content took up more than a page. Is there a solution for this?
Try changing #sheet to height:100%, not min-height 100%, and add some content inside of #sheet-1.
Using 100% only takes effect only if there is HTML Element (text, image, or other elements) exist in it. Its height will be higher or shorter according to the length of the element. Thus min-height is used to specify only the exact number of length or height of the element. Try using pixels instead of percentage.
because you don't add any float or clear property ...
CSS will ignoring min-height and max-height, if the height property not defined,
Except if you add display:inline-block, but it can break your margin:0px auto; and i decide you to do like this:
* {
margin: 0px;
padding: 0px;
}
body {
background: #FF0000;
height: 100%;
text-align:center;
}
body * {
text-align:left;
}
html {
height: 100%;
}
#sheet {
width: 960px;
display:inline-block; // It can make height auto
min-height: 100%;
background: #000000;
margin: 0px auto 0px auto;
text-align:center;
}
#sheet1 {
width: 760px;
display:inline-block;
min-height: 100%;
background: #FFFFFF;
text-align:left;
}
Replace your css, with my code and i think it should work...
I have a problem with my site. I want that the shadow stops at the end of my textbox.
HTML
<body>
<div id="shadow" class="floatfix">
<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">
This is my CSS code:
#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}
#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}
#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}
#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}
#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}
#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}
#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}
I think that I have this problem because of the "height: 100%". But I don't know how to fix it.
There's a much simpler way to do this. Make a new background image 960px wide by 10px high that has your shadow at either side of it. (You may need to tweak the width to get 920px of white in the middle with the shadows down the sides)
Use your #shadow div to add that background around #content eg:
#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}
Alternatively you can probably make your #content div stretch down by adding min-height: 100%; to it and an IE6 hack:
* html #content { height: 100%; }
100% shadow height has no height to count 100% from so it uses auto mode. So so far I see 3 ways to fix problem and none of them are nice as it should be:
Setting fixed height on parent div (bad if content extends)
Use 3x3 table (but once again people say not to use tables for layout)
Use double sided shadow background image to fill content div. 1px height 974px width bg image with repeat-y; (not very elegant if site width changes)
id say that your HTML is wrong. Its bad practice to have self closing div's
wrap them around your content and use negative margin's and background positions to get the right effect that spans the height of the fluid content
this is a bit sudo, as it ripped from another site of mine, but ti should give you the basic of how it should be done
<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>
#header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}
#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}
#header .inner {
background-color:#FFFFFF;
}