In this table, i have a table with 3 images: left, topcenter and right.
the topcenter td row is 126px, but the content image is 122px.
i tried with overflow: hidden, by giving the td a css-fixed height, but this thing just wants to have 126px height.
you can verify it by the box-shadow under the topcenter image.
it should stick at the image, not 4px below.
i am stuck here, i guess someone else sees this in 10 secs, so pls help me.
http://jsbin.com/fonemeqohe/1/edit?html,output
Set display: block; or vertical-align to topcenter image:
img {vertical-align: bottom}
OR
img {display: block;}
Try setting the line-height of the td to 0.
you need to have the same number of cells in each row
your second (top center) cell has width 100% which is nonsensical
all cells in a row have the same height, that's the concept of a table
My two cents - stop using tables for layout and appearance, they are for data only. Use inline-block divs, for example, or float: left for divs. Or just place your images next to one another, whatever you need.
EDIT: Or combine those images in a single one and use it as a background-image for the body (or any other element suitable for your needs).
Related
Working on site for a school project running into silly issues.
http://jmtestserver.net46.net/
1) So first thing I'm wondering, my height on the div with the textured background is set at a manual PX. I want this to be set at auto because I'm making this responsive so I want it to grow and shrink with the box divs. However, if I set it to auto it looks like this
http://i.imgur.com/AWFmiOM.png
I don't understand why the box divs arent pushing it down??
2) As you can see the 2 boxes on the right stick down further than the 2 boxes on the left. I don't understand why this is because the boxes use the exact same css other than color and the image sizes are are exactly the same. So I cant figure out for the life of me why they wont match up heightwise.
Thank you in advance! I know these are simple things but they are causing me a lot of trouble!
1) The problem with your footer "floating" up behind your boxes has to do with the "float: left;" on your boxes. The elements after your boxes will basically ignore the boxes as if they werent there. To fix this simply add clear: both; to a element after the float happens.
You can read more about it here: Float
#bottom-section {
clear: both;
}
2) The boxes being bigger has to do with your images not being the same size, either find/make images with the same height or add a height value to .photo_icon
.photo_icon {
height: 50px;
}
If you inspect your webpage you will see that the images are not all the same size. You can force them to be by changing your main.css. Modify .photo_icon as below:
.photo_icon {
width: 50%;
margin-top: 1%;
height: 99px; /* This line */
}
question: icons in 3rd and 4th box are bigger (height 98px vs. 55px in first two cases).
question: boxes has content of different height and take exactly the same height as its content. As I said, content in 3rd and 4th box is higher than in first two boxes.
Solution:
resize/crop your icons to the same size (height). If you add .photo_icon {height: 55px;} you'll see it will work correctly with icons with proper size.
Heights of your images are not same. If you make them same size, or add something like
height: 101px;
to your .photo_icon class, it would solve the problem
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 have an outer DIV as follows. When I check in the browser the outer DIV given the class colx2-right is the correct size of almost half of the area it's inside of.
.colx2-right {
float: right;
margin-bottom: 0;
width: 48%;
}
Inside of the above DIV I have a CSS table defined with:
div.container {
display: table;
}
If there is a lot of data in one of the columns then text overflows the edges of the colx2-right DIV. Is there some way I could get it to stay within the boundry of the colx2-right DIV?
I created a fiddle that shows the problem. Here you can see the color of the yellow and red backgrounds is just less than 50% but the red background does not constrain the table inside of it.
fiddle
I would say setting a width 100% on the div.container should make it work the way you want.
If that is not the case, I am probably not understanding your question correctly. It would help if you tossed an example in http://www.jsfiddle.net so there can be no confusion.
Another thought (though i've never used display: table on a div): since you used display: table, we might asume the div is in fact a table. That would also mean the table-layout properties apply.
Try setting table-layout:fixed; and setting the 100% width.
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 have something similar to below:
<div style="float:left;margin-left:5px;">Test</div>
The issue is that I need to have this div repeat multiple times. If it repeats to many times, instead of forcing you to scroll right to see the rest of it (like I want it to), it instead goes down to the next line.
Example of the issue: http://jsfiddle.net/ruh7z/1/
Any help with this would be great, thanks
That behavior is exactly what floating is supposed to do. If you use table-cell for your display style, that may give you more of what you're expecting. Note that you'll have to use padding instead of margins if you use table-cell.
.container div
{
display: table-cell;
padding-left: 5px;
}
Here's a sample of this in use.
put the div's in a "fixed width" container div and prevent overflow. then have buttons or whatever at each end of the container div to "slide" the child divs left or right.