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.
Related
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
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;
}
Evening front end wizards. I'm trying to do something that should be quite simple: I want to have images floated right or left in my body content, with a caption below each image. To try and achieve this I'm floating a div with the image inside it, followed by a span with a caption below. I've given the image max-width 100% so my layout is responsive.
Is there any way using just CSS and HTML that I can constrain the width of the containing div to the width of the image inside it? I'm finding that the span below pushes out the width of the div, whether it's display:inline-block or not. I'd like the span to always be the same width as the image, so the text wraps in line with the image's right edge.
I'd like to be able to use images of varying widths, so setting a max-width on the div doesn't really do the trick. I could do it easily enough with JQuery, but that would be cheating.
Any suggestions gratefully received! You can see what I'm talking about at http://jsfiddle.net/andfinally/yBHjK/
Try setting a max-width to the container and then width: 100% to the image. It should work.
Look http://jsfiddle.net/nMEVd/1/
It sounds like you want the containing div to expand it's width only for img elements and not span elements. Is that correct?
There is no pure CSS solution for this, JavaScript is the best way to achieve what you're after.
Two similar questions:
CSS: Force text to wrap (OR defining element width by only one of its children)
Limit text to the width of sibling image / auto width in CSS
You might want to try adding:
style="word-wrap: break-word;"
to the span elememt, or in a css sheet with:
.image span {
word-wrap: break-word;
}
Edit:
This should break the text in your span element to fit across two or more lines instead of stretching out past your image's width.
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/
I have this and it got an HTML img#logo-image, on some occasions it will not be displayed, display:none.
The problem is that the entire div#menu-title should fit the width of the page.
I tried putting width:100%, but when the img#logo-imag" is displayed it breaks the line being below the img#logo-image.
The width:100% does not work with elements float:left
Just unfloat the menu-title div and remove the width.. it will automatically be 100% of the header then.. and if the image is present it will adjust the ul#menu list to make room for it, which is a natural behaviour
if you want the menu-list to really only take the available width (say for a background color or something then you can add overflow: hidden; to ul#menu - though I don't see a need for that in your example code
here's a simplified version of your Fiddle - hover on the header to make the image disappear and see the ul#menu adjust to suit
Example Fiddle
You have both logo-image and menu-title floating left. Since they arent really in separate divs, they are all part of the same div, they appear next to each other. On top of that, you set the menu-title to be 760, which isn't the width of the page. At least that what it looks like you did. Do not use width 100% because resizing the page will shrink that menu title.
You really just have to play around with the divs, but i would say that separating those two divs would make you be able to stack them on top or below each other.
And in using Chrome's inspect element feature, I don't see a display:none for the image's css. I don't know why that would do that.
I'm really not sure of what you are trying to accomplish since making the div#menu-title width: 100% doesn't leave any room for anything else on the same row.
Why not let them both be inline and let the widths be whatever they need to be?
Anyway, I have a guess at what you want. You want those two elements to behave as being in a table, inside a table row, and each in a table-cell so that the image takes a maximum width, and the div#menu-title taking all of the rest of the place. In that case put them in a table, or use display: table-cell for the image and the div and fiddle around with that.