/    Sign up×
Community /Pin to ProfileBookmark

Valign issue in a simple table layout

Copy linkTweet thisAlerts:
Dec 24.2008

Hi,

I have a simple table layout that I am using (5 columns by 2 rows).

Column 1 is set to “rowspan=2” while column 2, 3, 4 and 5 have two rows.

It looks like the first image in the attached file (here I am only showing a two column table for simplicity).

It displays fine in IE and FF if there is more content in box 3 then there is in box 1.

However, when there is less content, you get what is shown in image 2. I have overcome the issue in FF by setting a height to the minimum required for box 2.

However this does not work in IE.

I need box 3 to begin right after box 2’s minimum height.

Is there another way to achieve this effect using tables?

I know about using div’s to layout a page but I’ve had loads of problems trying to use it to display 5 columns. I’ve decided to use tables (just this once – don’t shout please 😮 ).

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ryanbutlerDec 24.2008 — It's better to see a real page or attach a page to look at.
Copy linkTweet thisAlerts:
@riz-manauthorDec 24.2008 — Ryan,

H there.

This is the page...

http://test.valvecare.com/search-result2.php?sw=nick&Search.x=18&Search.y=10

I have already entered in a search word that I know has 0 results...so you can see what happens when the left side is longer than the right side.

The middle section of this page uses a table layout – has three columns with column one (the buttons on the left) spanning two rows. The thin grey line is column 2 and the results are displayed in column 3. It's got a border set to 1 and is coloured red so you can see what is happening.

In FF, it works well. In IE...it doesn't.

Thanks for your time.
Copy linkTweet thisAlerts:
@ryanbutlerDec 25.2008 — Simple, because the table cell containing the left cell has valign=bottom on it. Just replace bottom with top and everything should be swell.
Copy linkTweet thisAlerts:
@riz-manauthorDec 25.2008 — Hi Ryan.

No, that isn't it. I was just messing around with the coding yesterday and accidentally set it to "bottom".

If I set it to "top" - I still get the problem.

Compare the same page with the amendment made.

http://test.valvecare.com/search-result2.php?sw=nick&Search.x=18&Search.y=10

Now compare this page if the right sided content is more then the left side.

http://test.valvecare.com/search-result2.php?sw=valve&Search.x=18&Search.y=10

As it is, I have now found a "cheat" to solve it. I simply inserted an image in the second column the contains the divding line that is at least as long as the nav on the left. This seems to avoid the problem like so...

http://test.valvecare.com/search-result3.php?sw=nick&Search.x=18&Search.y=10

If the content in the right (third column) is longer then the nav (first column)...the image that I have inserted in the second column will simply fall to the bottom of the cell it is in.

Thanks for your time though.
×

Success!

Help @riz-man spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...