I have this setup:
<div class="wrapper">
<div class="container"> <div class="inner"></div></div>
</div>
.wrapper {
max-width:320px;
max-height:240px;
}
.container {
position:relative;
padding-top:56.25%;
background:green;
}
.inner{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
http://jsfiddle.net/3A32T/2/
If you shrink window width, div size shrinks while keeping aspect ratio which is what I want.
However, if you shrink window height, div height doesnt shrink, you get browser scroll.
Is there a way to achieve second conditional as well?
Updated DEMO here.
Change padding-top to height
Write:
html,body,.wrapper{
height:100%;
width:100%;
}
.container {
height:56.25%;
}
Related
This is intended to be an image preview along with text.
I have two divs: one with an image and one with text. The image needs to be square size and fill the whole container
The code currently is
<div class="row">
<div class="col-md-3">
<div class="col-md-6">
<img src="http://quarknet.de/fotos/blumen/wildblumen/graeser-im-quadrat.jpg" alt="" style="max-height:100%;max-width:100%">
</div>
<div class="col-md-6">
<div class="top">Top</div>
<div class="bottom">bottom</div>
</div>
</div>
http://jsfiddle.net/m1sbhnwe/
And it is intended for full-screen, so you need to drag the preview wider to see the effect.
Now I need the div with the top class to always stay at the top of that div and the div with the bottom class to always stay at the bottom of the parent div at image level. That means the bottom div should align with the lower edge of the picture.
If I add position:absolute;bottom:0 to that div it just goes to the top. How can I achive the effect I want?
I don't quiet understand the effect your going for.
If the text is appearing at the top it ussually points to the parent div having a height of 0px;
if you are floating .col-md-6 then that could cause a problem calculating height. In which case you would want to add a after the last .col-md-6
if you are using a absolute positioned .col-md-6 then the size cannot be calculated and you will have to come up with a fixed width/height;
Here is a solution kinda that would work if the .row is full screen...
.row {
position:fixed; top:0px; left:0px; right:0px; bottom:0px;
}
.col-md-6 {
position:absolute; top:0px; left:0px; right:0px; bottom:0px;
text-align:center;
}
.col-md-6 img {
height:100%;
}
.col-md-6 .top {
position:absolute; top:0px; left:0px; right:0px;
}
.col-md-6 .bottom {
position:absolute; bottom:0px; left:0px; right:0px;
}
the fiddle you provided has no css in it, It would help if you added some CSS to show the problem you are having.
UPDATED FOR COMMENT;
.col-md-6 {
float:left; height:100%; position:relative;
}
.col-md-6 img {
height:100%;
}
.col-md-6 .top {
position:absolute; top:0px; left:0px;
}
.col-md-6 .bottom {
position:absolute; bottom:0px; left:0px;
}
I have a big div wrapper called <div class="pageWrapper"> for which its size is set to be 1000px.
Inside it I have a header that I want to be 100% of the screen and fixed.
How can I do it ?
I know that I could take off the header div outside the pagewrapper but I'm customizing a volusion template so to take it off would delete all the CSS that was originally set up.
Try the following and see if it works.
Here is Fiddle as created by François Wahl
width:100%;
position:fixed;
And it is always good if you post the code you have tried first.
Do you want something like Demo ?
HTML
<div class="pageWrapper">
<div class="header">Header</div>
</div>
CSS
body {
margin: 0;
}
.pageWrapper {
width:500px;
background:green;
height:500px;
margin:0 auto;
}
.header {
position:fixed;
width:100%;
top:0;
left:0;
right:0;
height:50px;
background: red;
}
I've got four divs. one container and three columns. Column 1 and 3 has a fixed width, and column two needs to fill the gab between them. I would like the design to be re-sizable depending on the screen width, to a minimum of 300px.
My HTML
<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
the CSS
#container {
width:100%;
min-width:300px;
position:relative;
}
#1 {
float:left;
min-width:300px;
min-height:10px;
background-color:red;
}
#2 {
overflow:hidden;
width:100%;
min-height:10px;
background-color:blue;
}
#3 {
float:right;
min-width:300px;
background-color:green;
}
Just remove width: 100%; from #2. It will automaticly take whole free space.
Check fiddle: http://fiddle.jshell.net/ozeczek/aVbC6/
I've been trying to make a page which contains a column of 330px width at left and then an other column of 670px max-width that is centered at the remaining width of the page. Of course if screen width is too small to fit 1000px, the second column will be resized. How do I do that?
This is my current CSS Code:
#left {
float:left;
width:330px;
}
#right {
???
}
You can easily do this without calc or other nasty overly modern hacking. The following should even work fine in IE7, not sure about IE6 and its respect for margin:0 auto in nested elements but could even work:
HTML
<div id="layout">
<div id="leftcolumn">
Test
</div>
<div id="remainder">
<div id="rightcolumn">
Test
</div>
</div>
</div>
CSS
div {
color:white;
height:400px;
text-align:center;
}
#leftcolumn {
background:red;
float:left;
width:120px;
}
#remainder {
margin-left:120px;
}
#rightcolumn {
width:100%;
margin:0 auto;
max-width:300px;
background:green;
}
Fiddle supplied.
I have two <div>s side by side, in a two column layout. I want to make the second div width auto fit to the browser width... but my CSS isn't quite working:
<style>
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
}
#content{
float:left;
width:auto;
min-height:10px;
overflow:hidden;
margin:auto;
background-color:#cddfea;
}
</style>
<div id="sidebar">aa</div>
<div id="content"></div>
How can I make the width of the "content" div fit the rest of the browser window while my sidebar has a width of 230px?
Thank you. :)
Try this: jsFiddle
HTML:
<div id="sidebar">aa</div>
<div id="content">bb</div>
CSS:
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
background: #faa;
}
#content{
min-height:10px;
overflow:hidden;
margin-left:230px;
background:#cddfea;
}