Say I have a div. If I give it a height and width of 500*500px in HTML code, like this: <div width="500px" height="500px">test</div> it will not have dimensions of 500*500px unless it's filled with enough code/text to push it to those dimensions. However, if I set the exact same width and height with CSS (either inline CSS or external document) like this: <div style="width:500px; height:500px;">test</div> the dimensions are always what I set.
Why is there a difference?
Doing this isn't valid syntax. You cant add width & height attributes to a DIV the same as you can to a table or an image tag.
<div width="500px" height="500px">test</div>
This is valid syntax:
<div style="width:500px; height:500px;">test</div>
A div tag does not have the attributes width and height.
Related
In my html page I have an input component placed above a div component.
I want the input and the div to have the same width, the input has a "size" attribtue of 30.
If I use the "style" attribute of the div with "width : 30ch" or with "width : 30em" it doesn't seem to work, the div component is getting way wider than the input component in both cases.
Which attribute should I use to make the div's width match the input's size attribute?
code :
<input type="text" readonly="yes" value="a" size="30" ID="b">
<div id="c" style="width : 30ch"></div>
The size attribute sets the visible width in “characters”, and browsers interpret this differently. The ch unit, in supporting browsers, means the width of the digit 0, so it is defined very exactly, though it of course depends on the font. So these two ways of setting width are incommensurable.
To make a div element after an input element exactly as wide as the input element, the simplest way is to wrap them in a table with fixed layout. (Those who can’t bear with HTML tables can use a CSS table instead.) You don’t set the width of the div element at all in this approach; it gets its width from the table formatting. I have just set some content and a background color for it so that the width of the element is visible.
<table style="table-layout: fixed" cellspacing=0>
<tr><td><input type="text" readonly="yes" value="a" size="30" ID="b">
<tr><td><div id="c" style="background: green">Hello world</div>
</table>
try width attribute in both i.e. in input and div also , plus try to give width in %
html:
<html>
<input id="myinput"></input>
<div id="myDiv"></div>
</html>
css :
#myDiv{
width:x%(set x per your requirement)
}
Use this style to set exact same width for both your input and your div
input#b, div#c {width:100px;}
I want to make an image fit a div whilst maintaining its aspect ratio. I have seen other posts where it is mentioned to use max-width:100%;.
when the image is smaller than the div, it works fine, the image is kept to a size within the div. But when the image is larger, it simply gets out of the div.
<img src="testimg.jpg" style="max-width:100%;max-height:100%;"/>
But when i use this code:
<img src="testimg.jpg" width=540px/>
The large image is resized to fit the div but does not maintain its aspect ratio.
Can any one advise on the above issue please?
This should mantain the aspect ratio:
<img src="testimg.jpg" style="max-width:100%; max-height:auto;"/>
I do not recomend using inline CSS, instead separate it:
CSS:
img{
max-width:100%;
max-height:auto;
}
HTML:
<img src="testimg.jpg" />
For the second part of your code, the width attribute represents the exact width of your image, not the maximum width. And in HTML5, the value must in pixels but without px suffix:
<img src="testimg.jpg" width="540" />
Again this is not a good practice, always use CSS to manipulate the HTML elements.
max-width:100% works only if the img tag has not width and height attributes, because they prevail on max-width. So please try to remove the width="540"
Please try the following CSS
div{ovwerflow:none;}
img{width:100%; max-height
I have a problem.
I am creating a responsive header image, that would scale down to mobile and take the full width of the screen.
I would like to have done this with the img tag, and then applied a max-width of 100% but I wanted to include some text on top of this image, so chose to use a background image instead. I don't want to absolute the text over the images as this causes problems in mobile.
Also, regarding background image, I can't use background-size as this is not supported in ie8.
Is there any other way I can achieve having text over an image, where the image takes full width of the container, and full height of the image?
<div id="container" style="height: 100px; width:100px; display:block;">
<img src="some-img.jpg" style="display:block;"/>
<span style="position:absolute;">Text over image</span>
</div>
Essentially you just need to position the text over the image, within a parent.
z-index property is useful for "stacking" elements visually if you have several competing elements.
If I have the following structure, for example, in a single page layout:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
Is it possible to set the minimum height of divs 1-4 to 100%, and position each div one under the other, using CSS alone? Ive created a page where the each div is 100% in height but problems begin to arise when the content of the divs are longer than the browser window. There seem to be a lot of min-height 100% related articles but I haven't found one yet where there is more than one div involved.
For height or min-height to work correctly on a element, the parent of a element needs to have a explicit height declared. This goes all the way up in your DOM tree.
There shouldn't be a difference for rendering one or multiple div elements with min-height as far as I know, so yes it is possible to do the positioning with CSS alone.
See Percentage Height HTML 5/CSS for more details
How can I achieve the following layout? Specifically the positioning of Image and DIV
I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left
Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.
Tested in IE7/8, Firefox, Chrome.
Live Demo #2
CSS:
#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}
JS/jQuery:
$('#header').css('margin-left', $('#top img').width() + 10);
(you might want to change the + 10 for parseInt($('#top img').css('margin-right'), 10))
HTML:
<div id="container">
<div id="top">
<img src="" />
<div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
</div>
<div id="content">dfgdfg</div>
</div>
I'd put the header image and header div inside its own container and position the items within it using absolute positioning.
I've put together a quick sample here: http://jsfiddle.net/JjxYj/1/
Notice here that if you remove the width of the Div in the header, it will become the width of its content.
Update
To answer the updated part of the question, here's another solution that'll allow the image to be of any width whilst still positioning the header text at the bottom of its containing item: http://jsfiddle.net/JjxYj/5/