?
Solved

css layout : layout not always the same

Posted on 2013-06-27
6
Medium Priority
?
534 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
6 Comments
 
LVL 55

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 62

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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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 62

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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
Now many of you may wonder how you can reach great design with least number of essentials. Isn’t stuffing ‘more and more number of elements that speak for the purpose’ the right way to do it? Erm, not always, and in this write-up, you will see why.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

569 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