So I am working out this page with a better structure on codepen and right now my content does not position right under the image not sure how to do it. I tried using position:relative left and right attributes but I was afraid that it was misuse of that property and I was using it in each div to position the text under my images. I want them to line up vertically.
You are having a margi collapse due to the top margin of the <h4>.
As said countless times before, you need to be aware of your margins and if you aren’t going to reset them, at least be aware of htem.
h4{margin:0 0 0 1rem}
So I want the content to fit in the container width that I have originally. Im not sure if Im using the right properties or if I am cheating again hehe… 
SITE
Well the max-width is set to 50% of the available screen width so that’s going to automaticlaly make it near impossible for everything to fit.
- Remove that negative 60px left margin on .shockimage. Bad!
Also it’s table-layout:fixed;. Not table-display:fixed;.
1 Like
Well thats because that is the way the website is in the container size.
ok.
Well you might want to consider having rows of that item then because it’s not feasible to fit 800px worth of items into a 400px container. Even if the table-cell layout algorithm will allow it.
Alright.
So I figured I could use a width instead since I am using the table layout algorithm I could mess around with the width of the divs and reduce the unnecessary space between them.
#labelswrap{
display:table;
max-width:100%;
table-layout:fixed;
}
.labels{
display:table-cell;
max-width:190px;
}
The images are whats causing it to go wide.
Instead of restricting the table with that max-width, restrict the images to only fufill the needed space of the table cell. A much cleaner solution and less hacky . Add this in and remove your max-width on the cells.
.labels img {
max-width: 100%;
}
I see well I almost figured it out ha
Just curious but why max-width:100%?
Almost :).
Table cells are never meant to be caged up via widths. It’s best to find the underlying cause rather than do band-aid fixes.
You were very close but you weren’t looking at the underlying width problem. You’re getting there!
This makes it so that the image will only ever be as wide as the cell needs to be. Currently it will make it so the text will more or less dictate the width of the cell and the image will only be as wide as needed.
Otherwise you have the 250x160 dimension image (think those were teh dimensions?) take on the full dimensions instead of adjusting for the container.
I usually make img{max-width;100%;} default and a global style in my stylesheet.
I should correct myself - the text isn’t quite dictating the width since the table-cell algorithm tries to evenly space out all the menu items.
So the table-cell generates the width from the algorithm (equal width across the container) and the image having max-width won’t try to exceed that.
Just to make sure I don’t fill your head with the wrong information.
1 Like
RIght I see so what if I just said width? would that work on the image? and also aren’t percentages only used for parent elements?
That funny even though I used it in my previous page that I was working on?.
#contactcontent{
display:table;
max-width:100%;
table-layout:fixed;
}
#section1contact, #section2contact, #section3contact {
display:table-cell;
padding:0 20px;
vertical-align:top;
width:33%;
}
Do you mean set width:100%? Well that would FORCE the image to be the entire width of hte parent. What if the image is really small? Or the container is big? No - let the image fit the size of the container and if possible, it iwll take the full size of the container. Max-width is what you want.
I can be in the 1800s and be a slave master but doesn’t mean it’s the right thing to do 
.
In your example, if you only had 3 columns, then I’m not sure why you even had that width to begin with since it would each be 33% to begin with because they evenly space themselves out.
Percentages can be for any element in any situation. It just depends on what property you assign it to and the situation yo uare dealing with.
I think what you are thinking about is percentage widths BEING BASED off of the parents width? Is that what you were thinking about?
Yes thats what I meant.
Yeah that is what I meant.
Any other questions?