Hello peeps,

 

I hoping someone might be able to help me with a website that I am struggling with.

 

I need 3 columns, equal in width. Problem is, my client wants a divider between each one and the divider is not full height.

 

I tried my best to get it how I wanted, right now the appearance is exactly how it should be. Problem is that when the browser downscales it messes up the column width. I know, this is because I have mixed % and px in the widths... I can't figure another way to get the look I need but with %. Can anyone help me out.

 

The dev site is here.

Do the gutters (spaces) need to be a % of the total ratio or always X pixels?

Do the images need to remain square or dallas effect height the same but width adjusts?

 

Sounds like a prime time for display: table.

Hello,

 

Thanks for your message.

 

I am using table cell for the columns but divider between the columns needs to be a 2px solid line at all times.

you can set a row with some negative margin, then the items inside give them a percentage width - say 33.333% in your case. then on these items give them some padding left and right equal to the negative margin set on the row. Then you will have gutters set in pixels and your blocks percentage based.

This whole thing should be in a wrapper with padding left and right equal to that -ve margin you applied on the row*

 

This is how most grid systems work.

Edited June 23, 201511 yr by rbrtsmith

Hello Charly

Use CSS box-sizing: border-box; with your elements then when you are adding 2px of padding will just be substracted from the width.

You say the dividers must not have full heights? In that case you could use pseudo selectors for the dividers.

See this example. the dividers here are 70% high and always 2px wide (only tested in FF)

http://jsfiddle.net/Nillervision/dus8m97o/

Edited June 23, 201511 yr by Nillervision

I designed a simple grid system for solving this problem and I reuse the code on a lot of the sites I work on now.

 

Basically it consists of divs with width set to 33.33% and display set to inline and then box-sizing set to border-box so that I can add padding to the columns without overflowing the width of the page.

 

This is the same technique a lot of popular CSS frameworks use.

Edited June 24, 201511 yr by eberkund

do you have a original backup of the website files? because if you have mixed anything up you could always go and take a look at them also if you don't know exactly where it is your looking just upload it to a sub folder and go to where your coding it, if you need any help fast and you want me to do it for you just let me know because im guessing your clients waiting on it to be complete

I designed a simple grid system for solving this problem and I reuse the code on a lot of the sites I work on now.

 

Basically it consists of divs with width set to 33.33% and display set to inline and then box-sizing set to border-box so that I can add padding to the columns without overflowing the width of the page.

 

This is the same technique a lot of popular CSS frameworks use.

 

Is this a typo? Because inline elements cannot have a width, their size is dictated only by what they contain.

 

If you're delcaring a div, or other block level element there's no need to set any display property in this instance as it's default is 'block'

Edited June 24, 201511 yr by rbrtsmith

Thanks for everyones comments.

 

After messing around with it for hours, I discovered it was a silly mistake I had not noticed. It was simply header text pushing out the middle column, I made the text smaller and the problem was gone!

 

Thanks for everyone who took the time to answer and help me :-)