say I have some text displayed on an html page, which is held in a <div> tag. The div has width: 100%. I want the text to be displayed at 3/4ths of the width of the div. So, if the divider is 1000px wide, I want the left padding of the text to be 750px. How can I do this? Thanks!
Here you have to first define the container width to 100% and then set padding to whatever % you want.
All calculations will be defined in %.
selector{
width: 100%;
padding-left: 75%;
}
div {
padding-left: 75%;
width: 100%;
}
Related
Let's say I have a <div> with a minimum width and a fixed height. If the contents of the <div> gets long, it begins to expand the width to accommodate. However, it will expand the width even if that fixed height leaves plenty of room for more lines of text without making the <div> wider.
Is there a way to make the contents try to spill into the available height first before expanding the width of the <div>?
<div class="container">
Text
</div>
.container {
display: inline-block;
height: 3.6em;
min-width: 150px;
}
Going off the assumption that you are not using a front end framework ie: Bootstrap.
I offer the following solution by adding the max-width attribute.
.container {
display: inline-block;
height: 3.6em;
max-width: 400px;
min-width: 150px;
}
I have a paragraph floated in right and an image floated in left. They are staying in the same row.
Now I want to make the paragraph and image height always be the equal, whichever browser they run in or whatever the window or screen size they get. Their size should match automatically. How do I do it?
In my program I have used width and height, but I am not sure they can fix the size automatically.
This piece of code I am working in: Also look in https://jsfiddle.net/d6pyyub2/
.HTML:
<p>
The height of this paragraph must be the same as the height of
the picture.
The height of this paragraph must be the same as the height of
the picture.
The height of this paragraph must be the same as the height of
the picture.
</p>
<div id="image">
<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" width="200" height="200" >
</div>
.CSS:
p{
margin-left:240px;
}
#image{
margin-top:-210px;
}
By adding a container you can set a block size dependent of another block size.
You set the image fixed to border of the container
#image{
position: absolute;
top:0px;
bottom:0px;
}
#image img {
height: 100%;
width: auto;
}
#container
{
position: relative;
}
The p block set the height of the #container, and the image block follow the move. Fixed size by attributes in img tag are removed to set it at the full height of #image block.
https://jsfiddle.net/d6pyyub2/6/
edit:
As Daniel Ruf says in comment, there is a ratio problem with the image. Another solution is to set the image to the background of #image container.
https://jsfiddle.net/d6pyyub2/7/
In order to keep the ratio, the image will stop scale up his size if its witdh need to be superior to 240px, the fixed width of the first col.
There you go: http://jsfiddle.net/d6pyyub2/4 this should solve your problem
.image {
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
}
.para {
line-height: 1.5;
text-align: justify;
padding-right: 5px;
}
I have certain images that are smaller in width which i stretch the width to fit the container, however would like the hieght to scale up as well, thanks in advance, Phil
In your css:
img {
width: 100%;
height: auto !important;
}
CSS can naturally handle this. The image will automatically take up 100% of the width of its container, and the height will scale to match.
There is no need to specify the height.
Take a look to my example, here is my jsfiddle
http://jsfiddle.net/d575tr49/
Here is the HTML
<div class="ele">
<img src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" border="0" />
</div>
Here is the CSS
.ele {
outline: red solid 1px;
width: 250px;
}
.ele img {
width: 100%;
display: block;
}
If you control the width on the Parent element, just the with, you will not need to worry about the width and height values of the image.
The image it self will set its width using the parents size, and by default the height value will be proportional to the width, so no need to specify the height value at all, not even in the parent.
I have a website with two columns, within a wrapper div.
The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100%.
Here's my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.
If I set the height of the column with images (#rightbox) to a specific height in pixels, this happens.
I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.
How can I make the two columns have the same height?
EDIT: I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper.
You cannot define height as 100% unless your parents provides an actual heights.
#wrapper {
height: 800px;
}
/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
height: 100%;
overflow: auto;
}
Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } before the wrapper can be set to 100%
Given the limited amount of code provided... here is a pure css solution.
http://jsfiddle.net/rlemon/Q7MvS/
.wrapper {
height: 600px;
width: 800px;
}
.panel {
float: left;
width: 400px;
height: 100%;
}
.panel.right {
overflow: scroll;
}
I have a div with width:100px and height:100px (say)
Inside that, there is just an image, for which height is always fixed to 100px.
I want to make the image horizontally center.
Here there are 3 cases:
image's width is equal to div's width, no issues
image's width is less than div's width, I can use margin: auto here
image's width is more than div's width
I want the center part of the image to be visible inside the div.
means, if image's width is 120px and as div's width is 100px and overflow:hidden
I want image's 10th px to 110th px to be visible (so, the left: 10px and right: 10px of image are hidden under the div )
Is this possible through some CSS property?
(I dont know the width of image which is loading! so I want it to be dynamic.
Also want to avoid javascript side calculations to find the extra amount of width and giving margin-left: -ve value bla bla.. )
Also, I can't give the image as background-image for the div!
See: http://jsfiddle.net/thirtydot/x62nV/ (and without overflow: hidden to easily see the centering)
This will work in all browsers, with the possible exception of IE6.
For .imageContainer > span, the margin-left is derived from the width, and the width is an arbitrary number which controls the maximal image width that will be supported. You could set width: 10000px; margin-left: -4950px; to support really wide images, if required.
HTML:
<div class="imageContainer">
<span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>
CSS:
.imageContainer {
border: 1px solid #444;
overflow: hidden;
width: 100px;
height: 100px;
margin: 15px;
text-align: center;
}
.imageContainer > span {
display: block;
width: 1000px;
margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
display: inline-block;
}