Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

css layout : layout not always the same

Posted on 2013-06-27
6
Medium Priority
?
528 Views
Last Modified: 2013-11-19
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
Comment
Question by:adam1h
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39281956
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
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 39282345
They all look the same to me - what should I be looking for?

I am testing in FF - what browser are you using?
0
 

Author Comment

by:adam1h
ID: 39282700
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!

 
LVL 6

Accepted Solution

by:
lightspeedvt earned 2000 total points
ID: 39282728
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
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 39283543
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
 

Author Closing Comment

by:adam1h
ID: 39283755
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

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question