I'm working on a responsive website and I'm coming across a problem. I've a div container which width is 100%, and inside it I've 2 div's sidebar and content. Sidebar is set 40% wide and content is set to 60%.
Now, I want to give 25px space between them and for that I used margin-left:25px;.
Now, what will the width of content in % or is there any formula to calcute?
Here is what I am to do - JSFIDDLE
You could change your CSS to use calc for the width values, you want to subtract 1/2 the amount of the gap in px you want, then add the same amount to the relevant margins:
Demo Fiddle
.container {
background:#ccc;
}
.sidebar {
width:calc(40% - 12.5px);
margin-right:12.5px;
background:red;
height:50px;
float:left;
}
.content {
width:calc(60% - 12.5px);
margin-left:12.5px;
background:green;
height:50px;
float:left;
}
Yes, there is a way to achieve this using calc function.
.content {
margin-left:calc(40% + 25px);
}
But, the disadvantage is that, calc is not cross browser. It won't work in IE.
See updated fiddle here.
Related
I'm trying to use a div as a divider inside of another div and it's not showing up. I figured if I set the height on the divider div to 100% it would automatically adjust to the height of the containing div, which I have set to "auto" for the height.
If I change the height of the containing div to an exact pixel amount the dividing div kicks in and works fine. The reason I want it to adjust automatically is because there will be multiple instances of the containing div with different content which will make the height vary from one to the other so just setting an exact pixel amount for all of them won't be sufficient.
Here's the CSS I created
.container{
width:600px;
height:auto;
margin:auto;
float:left;
display:block;
}
#divider{
width:4px;
height:100%;
float:left;
display:block;
}
Is my coding wrong or is there something else at play that makes this not possible? Thanks in advance for your assistance.
100% is relative to the parent. Try making it 100 vh. Codepen
#divider{
width:4px;
height:100vh;
float:left;
display:block;
}
I have a div containing an image (img) element, which extends for 100% width inside it. I would like to specify a maximum height for the div, and hide the parts of the image exceeding this height. But I also want to keep this image centered vertically inside the div to show only its central part.
For example, if browser width is 1200px and image aspect ratio is 4:3, image should display (1200x900)px. But if we want to crop height to 300px only and center vertically, image should position at -300px inside the div (and the div should hide 0-300 and 600-900 of the image height). Similar thoughts can be done for other widhts.
I'm pretty sure this can be easily done with javascript, but I would like to know if there is a way to do it with CSS too. Thanks in advance!
My take on this: http://codepen.io/vsync/pen/DpmnK
HTML
<div class='box'>
<img src="http://www.biztalk360.com/Events/BizTalk-Innovation-day-2014-Norway/images/banner.jpg">
</div>
SCSS
.box{
// this is the image container distentions
width:100%;
height:100px;
// The magic
> img{
position:absolute;
z-index:-1;
top:50%;
left:50%;
width:100%;
transform:translate(-50%, -50%);
&.max{ width:auto; height:100%; }
}
}
javascript (this is only for responsiveness)
var photo = document.images[0],
container = document.querySelector('.box');
$(window).on('resize.coverPhoto', function(){
requestAnimationFrame(checkRatio);
});
function checkRatio(){
var state = photo.clientHeight <= container.clientHeight &&
photo.clientWidth >= container.clientWidth;
photo.classList[state ? 'add' : 'remove']('max');
}
You may want to look at this question : Resizeing an oversized image using overflow:hidden and keep the aspect ratio
http://codepen.io/gcyrillus/pen/Grbxg
.grid_3 { width:260px; margin:0 20px; float:left; text-align:center;
overflow:hidden;background:rgba(255,255,255,0.02);}
.grid_3 a {
display:block;
height:171px; border:solid 2px #FFFFFF;
line-height:168px;
overflow:hidden;
margin-bottom:10px;
}
.max-img-border { width:100%; margin:-100% 0;vertical-align:middle;
}
here is another pen , exploring this , vertical-align:middle and an image with virtually no height in the flux.http://codepen.io/gc-nomade/pen/DxCgv
Of course , image set in background center is easy if it has no meaning in your content.
So you want the div to function as a viewing window for your image? This sounds like image sprites (a large pic of icons put together where each icon is displayed individually) but with a larger image:
http://www.w3schools.com/css/css_image_sprites.asp
If you provide a JSFiddle, I can give you something more specific.
I have three divs. The two smaller ones are inside the same container, the third div.
The first child div is 350x350 px big.
The third div is 89% of another container div, meaning I dont know the size of it.
I want to make the second child div span between the edges of the first child div and the container div.
Basically:
<div id="container">
<div id="first_child" style="width:350px; height:350px;"> </div>
<div id="second_child" style="width:???px; height:350px;"> </div>
</div>
How do I figure out the width of my second_child element if I want the second_child element to span precisely between the first_child element and the edge of container?
Edit:
Uploaded a quickly drawn image. The big black square is container, measurements are unknown. The red box is first_child, the blue box is second_child. I want to find the width for second_child so it will stretch from the end of first_child to the right edge of container.
You can do using CSS calc():
#second_child {
width: -moz-calc(100% - 350px);
width: -webkit-calc(100% - 350px);
width: calc(100% - 350px);
}
For IE8 and lower you'll have to use jQuery or javascript
I think what you need is to use some css like so:
#container {
width:89%;
height:350px;
}
#first_child {
float:left;
width:350px;
height:350px;
}
#second_child {
height:350px;
margin-left:350px;
}
Here is a working example (with added styles to see the effect)
A good answer with pure CSS was given above, so I'll just answer the question of "how do I find the width needed?" in javascript.
// This is assuming there is no padding.
totalWidth = document.getElementById('container').offsetWidth;
firstChildWidth = document.getElementById('first_child').offsetWidth;
document.getElementById('second_child').style.width = (totalWidth - firstChildWidth) + 'px';
Using jQuery:
var containerWidth = $('#container').width();
$('#second_child').width(containerWidth - 350);
You can do that with pure css positioning, since you know how big the first child is:
#container {
position:relative
}
#first_child {
width:350px;
height:350px
}
#second_child {
height:350px;
position:absolute;
top: 0;
left:350px;
right:0;
}
Note that the container div has position:relative. This is necessary to make position:absolute use the top left corner of the container div instead of the body.
I'm trying to create liquid layout, so that the left side of the site expands based on the screen size, while the right side stays a fixed width. This works fine in IE, but in Chrome the left side is only expanding the length of the content within, not the full length of the space.
#bbContent{width:100%; min-width:829px;}
#leftActivity
{
float:left;
margin-right:334px;
min-width:421px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:right;
width:320px;
margin:18px 14px 0 -334px;
}
Is this what you are looking for?
http://jsfiddle.net/KnVrA/1/
it makes sense for leftActivity not to expand since it is floating, if the content is not that long then it would not expand
Edit: Used Kyomu's fiddle and took out some stuff and rearranged some stuff
Update: using percent based http://jsfiddle.net/KnVrA/2/
you can add wrappers inside of the left to create padding on the right side
I corrected the solution by adding a wrapper around the left side, and removing the float from #leftActivity. Adding a negative margin on the wrapper, and removing the negative margin from the right side.
#leftWrap{float:left; width:100%; min-width:421px; margin-right:-334px;}
#leftActivity
{
margin-right:334px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:left;
width:320px;
margin:18px 14px 0 0px;
}
I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?
Here's the css:
*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}
body {
margin:0;
background-color:#fff;
}
.top, .body {
max-width:640px;
width:100%;
margin:0 auto;
}
.top {
background: white url(images/top.jpg) no-repeat;
background-size:auto;
overflow:hidden;
height:124px;
max-height:124px;
}
.top ul {
list-style:none;
height:100%;
}
.top ul li {
height:100%;
float:left;
display:block;
}
I did find an answer to this. It adds a little bit of unsemantic markup, but works well.
Can find it here: http://jsfiddle.net/AdQ3P/
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
Edit Here's the code, so not dependent on jsfiddle.
<div class="container">
<div class="hero"></div>
</div>
.container {
width:100%;
max-width:500px;
}
.hero {
width:100%;
height:0;
background-size:100%;
background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
padding-bottom:75%;
}
Also that was one messy desk i had lol.
You can also use a little jQuery. I believe the advantage is that it is a semantically valid fix, so the next guy who edits your code might have an easier time understanding what's going on.
// Maintain aspect ratio of #my_div
// Set aspect ratio of #my_div
var aspect_ratio = 0.8;
// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");
// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
$my_div.height( $my_div.width() * aspect_ratio );
});
// Resize #my_div on browser resize
jQuery(window).resize(function() {
$my_div.height( $my_div.width() * aspect_ratio );
});
while a non-fixed width (e.g. 100%) takes all the container's width, the height of an element when not set to a fixed size will stretch to accomodate any in-flow content (including padding, margin, borders...)
if you can use an <img> tag instead of a background image, you can then apply max-width:100% to the image itself and it will scale to fit the container - the browser will take care of resizing its height to keep the aspect ratio consistent - however replacing a css background with an image tag is not always possible or the best option in terms of semantics and/or any layout issues you may face.
Working very well without a set height or img using the new relative font sizing units, e.g. vm (http://www.sitepoint.com/new-css3-relative-font-size/).