I have a div with percentages as values, and an image i need to fit in it.
The width should be resized to fit the div, whereas the height of the image that exceeds the div should be hidden.
(a clearer visual explanation)
this is what I have so far(edit: pasted the wrong link, my bad)
the html:
<div class="wrap">
<img class="imgofcrap" src="http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg" />
</div>
the css:
div.wrap {
width: 20%;
height: 5%;
overflow:hidden;
border: 2px solid black; }
img.imgofcrap{
width: 100%;
height: auto; }
I thing so you are looking for a responsive image.
so please cheack below JSfiddle URL
img.imgofcrap{
max-width:100%;
height: auto;
display:block;
}
JSFiddle Link
Pretty simple and you was close.
So we just want to use the width of the img so we set that as 100%. As the parent has a width it will use that. Now the parent you have set as a percentage height. But the div has no parent with an height. So we set it using:
html, body {
height: 100%;
}
So now we have:
html, body {
height: 100%;
}
div.wrap {
width: 20%;
height: 6%;
overflow:hidden;
border: 2px solid black;
}
img.imgofcrap {
width: 100%;
}
Demo Here
Change to this:
img.imgofcrap{
width: 100%;
height: auto;
}
fiddle
Also take a look here The difference between width:auto and width:100%
Your looking for a background cover solution: if you only have to use the image like you showed there and only in latest browsers i would go for
<div class="wrap"></div>
div.wrap {
width: 20%;
height: 5%;
overflow:hidden;
border: 2px solid black;
background: transparent url("http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg") center;
background-size: cover;
}
Fiddle here
if you need ie7+ support i made a small project which covers that - feel free to use it or extended it to your needs:
https://github.com/sp90/backgroundCover
Related
I have two divs next to each other. The div on the right is 300px x 335px. The div on the left goes all the way down the page. I want the width of the left div to go all the way until the right div. Then under the right div, it takes up the whole width of the page. Is this possible?
div elements are block level elements. So they are like square blocks. No, they can't work as you ask. However, you might Google for CSS Shapes to see if it can do what you wish but it's not available in all browsers and still isn't exactly the same as you request.
Here is some option either you can add min-width to the short div and long div to extend it. or you can add a background-color body to fake the illusion of it. but like Rob said there is no good way that can work out.
.short {
width: 100px; height: 100px;
background:red;
float:left;
//min-height: 500px;
}
.long {
width: 100px; height: 500px;
background:blue;
float:left;
//min-height: 500px;
}
.width {
width: 100%;
height: 200px;
background:yellow;
}
.clearfix {
overflow: auto;
zoom: 1;
}
body {
// background-color: red;
}
<div class="clearfix">
<div class="short"></div>
<div class="long"></div>
</div>
<div class="width"></div>
That is not possible, although you could always put another div under the one on the right and set the margin so that it looks like it's part of the one on the left.
This is one of the method to achieve what you want
CSS
#left1 {
margin-right: 300px;
height: 335px;
background: #aaa;
}
#right {
width: 300px;
height: 335px;
float: right;
}
#left2 {
background: #aaa;
border: 1px soild #000;
min-height: 300px;
}
<div id="right"></div>
<div id="left1"></div>
<div id="left2"></div>
I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.
I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions.
Here is my code:
<div id="container">
<nav id="sidebar-left">Left</nav>
<section id="page">Center</section>
<div id="sidebar-right">Right</div>
</div>
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
#page{
min-width: 514px;
margin: 0 20px;
max-width: 626px;
float: left;
background: purple;
height: 300px;
}
And I also made a fiddle:
https://jsfiddle.net/1y59nuxz/
I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.
EDIT: I need this to be compatible with IE9+
Ok. You have several solutions to accomplish this task.
One solution is to change order of elements in your html (if possible):
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
For "#page" use next css code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
Example code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
You can also check the fiddle.
Another solution is to apply flexbox. It's an elegant and easy way.
I think this layout can be achieved using some table & table-cell css like so:
basically set the .container to display: table
then set all direct children of the .container to display: table-cell
now these children will shrink/grow accordingly to their parent, however some tweaks have to be made for the #page to stay put at 626px widh and shrink down accordingly
max-width/min-width combo won't work on the #page div, however we can specify a fixed width, according to the max-width desired, in this case 626px, so that this div won't go past 626px width, but will shrink down if the window is resized
finally since we're using display: table-cell on these children divs, any margin prop. will be ignored, however we can mimic a margin using some border-left & right props. OR add another div inside the #page div that will hold the content and have some margin applied to it and the background accordingly.
Check out the demos bellow:
fake margins to the #page here
OR another div that holds the content for #page here
I have modified your code on fiddle
or else check the code below.
Html
<div class="content">
<div class="content__left">left</div>
<div class="content__right">Right</div>
<div class="content__middle">Center</div>
</div>
CSS
html, body, .container {
width: 100%;
height:100%;
min-width:1024px;
max-width: 1440px;
}
.content__left {
width: 20%;
max-width:200px;
float: left;
background: red;
margin-right:20px;
height:300px;
}
.content__middle {
min-width: 514px;
background: purple;
overflow: auto;
height:300px;
}
.content__right {
width: 20%;
max-width:200px;
float: right;
background: blue;
margin-left:20px;
height:300px;
}
I'm having a problem with my CSS where I have a massive amount of white space which I'm not wanting. All I want is the content area containers to fix to the page size, though for the life of me I can't find what I have done to cause this problem.
Here is a link to my problem:
http://jsfiddle.net/k5t5czxt/1/
CSS for main content:
#main-body-area {
background-size:cover;
background:url(../Images/BluePrint.jpg) no-repeat;
background-position:left;
position:absolute;
}
#main-body-cover {
background-color:pink;
opacity: 0.75;
position: absolute;
height: 100%
}
#main-body-wrapper {
width: 60%;
background-color: yellow;
margin: 0px auto;
opacity: 0.75;
border-radius: 20px;
height: 95%;
}
#main-section {
margin: 2%;
}
article {
background-color:orange;
border: 1px solid green;
margin: 2%;
height: 500px;
width: 90%;
display: inline-block;
}
Your extra <div class="Clear" /> and <div class="Clear"></div> are creating the extra white space.
Remove those and the white space will be gone, almost completely. There is still some white space remaining because the overall height of the page is 500px which is a result of your height: 100% element. Removing the height:100% will remove the additional white space but also adversely impact other parts of the page.
Since there is a lot going on with your CSS I would potentially recommend starting over with this page and rebuilding it one element at a time to see how each element and class impacts your layout.
JS Fiddle Demo
The extra white space is caused by your .Clear element. div height: 100% gets applied to that.
Just change CSS for the article.
article {
background-color:orange;
border: 1px solid green;
margin: 2%;
height: 100%;
width: 90%;
display: inline-block;
}
Here, height is changed from 500px to 100%.
JS Fiddle
working on a few design changes for my website on tablets and trying to work on this idea.
So the basic structure is like so:
<div id='container'>
<div id='leftbox'>Content</div>
<div id='rightsidebar'>Sidebar</div>
</div>
What i want, is for the container to be 100% width, but keep a right hand sidebar at 260px but allow the leftbox div to always fill the width left.
I have made a fiddle to show. But heres the CSS from that fiddle first:
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
}
#leftbox {
width: 50%;
height: 500px;
background-color: #666;
float: left;
}
#rightsidebar {
width: 260px;
height: 500px;
background-color: #333;
float: right;
}
Heres the fiddle: http://jsfiddle.net/X2w3D/
In that example I have just set the width of the left div to 50% to give it a width. The aim is that if the user was to be on a web browser, and resize then there would be no gap between the leftdiv and the rightsidebar. So the rightsidebar is always the same width, but the leftdiv will always fill the rest of the div up in width.
Thanks, Craig.
You might be interested on calc
width: calc(100% - 260px);
Demo
Referrence
Have you considered using the flexbox model? It was designed to answer this kind of problem.
I updated your fiddle and added an example solution: http://jsfiddle.net/X2w3D/4/
I used display:flex; on the container, then added flex-grow:1; to the #leftbox
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
display:flex; // ADDED THIS
}
#leftbox {
flex-grow:1; // ADDED THIS
height: 500px;
background-color: #666;
float: left;
}
Edit: If you need retro-compatibility for the flexbox model, I cannot recommend the amazing flexbox.less enough. It has saved my life quite a few times.
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;
}