Solved

css layout : layout not always the same

Posted on 2013-06-27
6
498 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 52

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 51

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 6

Accepted Solution

by:
lightspeedvt earned 500 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 51

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

759 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now