I've been trying a few techniques, but I'm getting stuck on this problem. I want to do the whole 100% height columns within a section thing, but one column has an image which needs to scale to fill one column.
So I have one column of text (variable content from WordPress) that is 66% wide and one column that holds an image and is 33% wide. The image can be on the left or the right based on a class.
My HTML:
<section class="page-section color-brand left-image image-third">
<div class="page-section-mid-wrapper">
<div class="image-wrapper left-image image-third">
<img src="img.jpg" alt="">
</div>
<div class="page-section-wrapper">
<div class="page-section-content">
Variable content here
</div>
</div>
</div>
</section>
Most of the CSS techniques do tricks to get a solid background color in both columns. But in this case, I want a scaled image. I'm willing to switch from an img tag to an inline style="background-image" to get the scaling to work, but either way, I'm having trouble getting the column heights to match.
The closest solution was to use display:table, but I don't like that I can't change which side the image is on without changing the HTML. With my current float based design, I can swap the image placement with just a different class (the left-image above for example).
With just floats, here is an example of what I have so far: http://jsfiddle.net/no80ayc2/2/
You'll notice that when the view is narrow, the image is shorter than the overall container height.
I've read something about using relative/absolute positioning, but the only way I could get that to work was with a fixed height for the container. That won't work for me: http://jsfiddle.net/qLa4g7fL/1/
EDIT: To clarify, I want the image to fill the entire space (33% width by 100% height). And I expect it to get cropped as necessary.
Here is an example of how that should look (just a quick idea)
change min-width: 100% into max-width:100% in .page-section.image-third .image-wrapper img
Then your image-wrapper may not have the full height but will stop your image to overflow.
You need to change your min-width to max-width,
Try to look at this link, I just update your code
http://jsfiddle.net/no80ayc2/7/
There's a new amazing css property called object-fit!
https://css-tricks.com/almanac/properties/o/object-fit/
You'll fall in love!
Related
I have one main div covering the 100% of the available space in webpage, and it contains three others divs, like this:
<div id="container">
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</div>
I need two of them (the yellow ones) to be resizable, because their content is dynamic and sometimes need more than a single line of text. So, what I need is they cover the 20% of the available space but if they need more to resize and make the center div smaller. What should I read about? I don't find the keywords to google it. Thanks a lot!
This is a "not-working demo" haha:
Use the CSS min-height property on the header and footer divs, and remove the height property from the content div.
#header, #footer {
min-height: 20%;
}
I don't believe these answers are understanding the question.
If I get you correctly, you want to have the top and bottom be some minimum height (say 20% each), and the center fill the rest.
In that case you will have to use JavaScript. Find the height of window and set top and bot to have a min-height. This will allow them to scale. From there you will get the height of the head and the foot, subtract them from the height of window, and set the content area to be that height.
I would write you out an example but it sounds like you want to do it yourself, which I commend.
I have a problem with horizontal image "gallery" where I set the height to 100% and don't set the width of the picture due to different sizes.
My problem is that the parent element does not diminish and he remains the original width of the image. Try resize height of window for display problem. Red color is parent.
I need this: parent image will have a height of 70% and will be centered vertically, the image will set its height to 100% and will automatically change the width according to the resolution.
How it look -> http://prntscr.com/2qkoj8
It must be solved in css.
My problem can be seen on http://helpimage.honzabittner.cz/
Thank you for help and sorry for my English... :)
Update
you can try something like
<div id="project-eagle" class="project">
<img src="project/eagle/01.jpg" alt="">
<div class="what">....</div>
</div>
set project to display inline
Now this gets rid of the issue where the container does not resize properly but it does not vertically center your content. You will have to do something with that but this is as close as I can get without js
Yes, try to remove the margin-right:14px; in class project p-one
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
is it is necessary to give the height and width to the div when we can manage it without these two portieres.
for example we have a div which contain and img tag and the div can automatically takes the specific height and with according to the image size. and if we are wanted to increase its height or width we can manage it using padding property?
<div style="height:100px; width:100px;">
<img src="" >
</div>
we can manage it as
<div style="padding:10px;">
<img src="" >
</div>
Padding should do the trick, if you want a bit of space around the image, you can test ow much size there is, or how it looks by adding a colour to the background background-color:#999999 just so you can see how it looks, then if you want to pad one side but not the other use:
padding-top-left:10px;
//or
padding-bottom-right:10px;
.... ect
or if you want it to be really secific, set the image size then set the div size around that, and add padding, that way it is exactly what you want
I'm working on a site which displays a very large data set to the user which they can scroll across horizontally. I'm having some trouble with the behaviour of div widths when implementing this.
Essentially I need an outer div with a horizontal scroll and all the data displayed inside this. I have the following simple code to do this:
<div id="outer" style="height:100px;overflow:auto">
<div id="inner" style="border: 1px solid green;padding:3px;">
<div id="details" style="background-color:red;width: 300%">Test</div>
</div>
</div>
My problem is that the border defined on the "inner" div does not expand around the "details" div giving the result seen in this image: http://img849.imageshack.us/img849/1719/capturepw.png
Any simple solution to this with HTML and CSS?
Update: The "width: 300%" on details is simply to simulate the large dataset. There is no way of knowing how wide this dataset will be beforehand.
Take the width off the details div and add it the inner div
http://jsfiddle.net/jasongennaro/n88tT/
Change the width on inner for 100%, 300px, basically anything but a percentage over 100. Going with 300% will make the element 3 times the width of its parent, but won't influence it.
Edit:
Putting a 300% width won't yield the same reaction from your layout as containing lots of dummy content. Try putting some dummy content in the details element and remove the width. You'll have a more realistic result.