Solved

css layout : layout not always the same

Posted on 2013-06-27
6
510 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 55

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 our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
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 55

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

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…

840 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