Grids CSS and Tables

[Centrereed]

I have been creating sites in Go-Live using the CSS Grid Layout, the only problem is when I increase the text size in the browser everything overlaps. If I convert the CSS grid to a table based grid it works fine but people keep telling me to move away from tables. Is there a way to make the CSS grid act this way??

 

[wiser3]

I'd be able to give you a much more specific answer if i could see the code somewhere, but what i think is happening is that the grid is absolute sized, instead of liquid sized. For example each grid square is set to be 50px wide. When The text grows it becomes larger then 50px wide and they begin to overlap. Change the width and height dimensions to fluid units, such as 4em. That way the grid will expand as the text expands.

Like i said i'd have to see the code to say for sure, but i think this is the type of thing that's happening.

 

[Centrereed]

The site is

http://www.centrereed.co.uk

 

[wiser3]

Personally i don't use GoLive's Grid Layout, as i prefer to hand code everything, so i wasn't sure how the grid layout was doing things.

I can see now that the absolute sizing of each element isn't much of an issue since it's allowing the content to grow as needed.

What is an issue is that everything is absolute positioned. As you can see when the text grows it's containing box gets bigger, but it's position remains absolute, so the boxes begin to overlap each other.

It would be possible to create this design with everything relative positioned. Since your using the layout grid i'll assume doing that is beyond your experience level, and i don't have the time or space here to teach you CSS coding.

I really like your current design. Yes, it overlaps at large text sizes, but the text has to be really large before that occurs. Unless the demographics for your site includes mostly elderly or other people that are likely to have text set at very large sizes, i would leave your site as is.

 

[Centrereed]

THANKS FOR YOUR HELP