Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 530
  • Last Modified:

css layout : layout not always the same

Hi,

I am trying to style my website (the products pages part).

The problem is I have 4 columns (from left to right) :
- a fixed menu with sorting & filtering option ;
- 3 relatives with product's pict & data.

But the layout rendering is not constant, it seems to change according the sort/filter selection, what is nonsense !

Here are the 3 cases I have identified :
- The layout as I want it : Correct layout
- A bad one : Medium Bad Layout
- Another bad one : Small Bad Layout

Do you have an idea what's wrong ?

Thanks a lot
0
adam1h
Asked:
adam1h
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
You should check out using a framework like bootstrap.   It will make your life easier and thsi framework will take care of what you want using a combination of the grid and js and built in fluid/responsiveness.
0
 
Julian HansenCommented:
They all look the same to me - what should I be looking for?

I am testing in FF - what browser are you using?
0
 
adam1hAuthor Commented:
Hi,

I have tested it on Firefox and Chrome.

I attach 3 pictures to show you what I see (the 3 pictures column do not cover the same width of the page)
Correct-layout.tiff
Medium-Bad-Layout.tiff
Small-Bad-Layout.tiff
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
lightspeedvtCommented:
To fix it you have to do this: right after <div id="productsThumbs"... you have <table>:
<div id="productThumbs" style="width:75%;">
<table>

Open in new window

So, just assign 'width="100%"' attribute to the table:
<div id="productThumbs" style="width:75%;">
<table width="100%">

Open in new window

0
 
Julian HansenCommented:
Still not seeing it - unless I make my browser window smaller - but then given you are using a proportional layout - the page is behaving exactly as it is supposed to.
0
 
adam1hAuthor Commented:
Thanks a lot @lightspeedvt, it works fine.
How stupid I am to not think to it :-)
But I only an "advanced newbie" on CSS.

Thanks also to Padas to make me discover bootstrap, it looks great.
It's too late for me to apply this on this website but I will put it on work for further projects.

Have a good day.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now