I am doing some of my first web dev, and had a question about the max-height css property.
Here's my code:
div{
max-height:10px;
}
Whenever I create a new div, everything works fine, but when I add any sort of other element between the div tags, the height of the div increase by around 10 pixels (I'm guessing). Is there any way to override this? I want to have a div with text in it where there is almost no border around the text.
Thanks for any help!
-Matt
Sometimes even the default font-size affect the division height. so try overflow:hidden or font-size:10px.
I think this can solve your problem
You could try adding overflow:hidden; to your css for the div.
Related
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
I am working on a test site with a fairly easy layout. It's divided up into rows of two columns with alternating widths. My problem is, for whatever reason, my image inserted into one of the column divs is not taking up 100% height of the div. It's short by a few pixels. This is a problem because the two columns in the same row need to appear to be "equal height."
I put a red background on one of the divs with the image problem so you can easily see what I am talking about. I am sure it's fairly simple and I am just overlooking something, but on this Monday morning I can't seem to find it. Any help would be really appreciated. Thanks!
Here is my test site: http://hartsfielddesign.com/test2/test.html
Sometimes inline images have extra padding on the bottom due to inline text sizes/line heights.
Set the div with image to
font-size:0;
line-height:0;
http://jsfiddle.net/pxfunc/ZC7Xa/1/
edit:
alternatively, set the <img /> to display:block; so the inline padding isn't applied
http://jsfiddle.net/pxfunc/ZC7Xa/3/
Try adding vertical-align:top to your images rule:
img{
max-width: 100%;
width: 100%;
vertical-align:top;
}
jsFiddle example
If I understand correctly what you are trying to accomplish, you could set a height value on the <div class="product clearfix color-box"> elements, say 200px for example, and then have the .vendor and .vendor-images, as well as the img contained within those, set to height: 100%
You have the wrong aspect ratio on your image. It is too long.
What you can do to make it easier is to give .vendor-images the image as a background instead of using an img tag. Then you can stretch it out so it doesn't give you that errror.
You could also make the left small image a float:left value and the right float:right and use like 30% width on the left and 65% width on the right. Set no padding and the remaing 5% will give you that padding.
or you could just simply change the aspect ratio of your image.
Remove the class .box-expand, .color-box-expand margin and padding. Then set the height on each div. Then it will work properly.
This code work 100% for me.
font-size:0;
line-height:0;
put it on Parent of img tag.
I know this is very simple, but i've been struggling for a while and I just can't make it work. I thought someone here might be able to give me a quick answer.
I'm trying to make a div float and align with another div. I'm trying by changing the float and display css attributes but with no luck.
I've set up a jsFiddle: jsFiddle
Thanks in advance
Here: jsfiddle
I just changed the height of the div for the example to appear better but you can set it back to your heights for your site.
I'd set the margin-top on the whole container div so that you only define that property once instead of setting it for both the menu and the content separately: anytime you're defining a value twice, you should try to put a wrapper and define it only once.
Your code works well if the screen is wide enough. Only if it's not the #content gets pushed under the submenu. To fix that give your #container a width that can accomodate both - http://jsfiddle.net/zaRqz/11/
#container {
width: 1040px;
overflow: hidden;
}
This is my code http://jsfiddle.net/noppanit/8D7QN/
As you can already see that the text overflows out of the container, I tried putting overflow:hidden into the text already but it didn't work. I understand that because it's absolute position, so technically it's out of the container. But I'm not sure how to fix this. The text has to be on top of the image that's why I make it absolute position.
If you guys could shed some light to me, that's be awesome. I'm very new at CSS.
You need to set a height on the .text_content (example) or, preferably, set overflow:hidden; on .text_image (example).
You assume that it is overflowing out of the container. It is not. The container has a background that is not repeated and is smaller than the container. The container has no height css and thus sizes to the content.
I would do something like this:
http://jsfiddle.net/8D7QN/7/
I have a container with a height of 100% so the height will be dynamically changed to text inside the container.
anyway, the container have a background with a custom image (using background-image).
now, when I create a < div id=blabla" > with { float:left; width: 100px; height:100%; }, the background which defined in my container doesnt show on the div.
but if I remove the float:left, the background does shows up
any ideas what the problem could be ?
To fix this, add the following as you mention to the container element.
overflow: hidden;
If you are still seeing this issue in IE6/7, you will need to enforce hasLayout, this is done by adding this to the container element.
zoom: 1;
Hope the IE6/7 addition helps you out.
It's a little unclear from your question but I'm assuming the floated div is a separate div inside of the container div? By default a floated item is not "contained" by the container. This is just the way floats are supposed to behave. If you put "overflow:auto;" on the container div then you will generally get the behavior you desire, but read a more thorough discussion of the topic here: http://www.ejeliot.com/blog/59
I made it.
The solution was to add
overflow:hidden;
to the container div.