jkkenzie Posted August 17, 2012 Share Posted August 17, 2012 Hi! I have tried to work with DIVs and UL for this site : http://bikramyoganairobi.com/pages/sample_catalugue.htm but The left column with turquoise colour when you resize the page, you will notice its not seamless with the orange backgound. The menu uses UL but the First LI and Last LI is supposed to be the same width as the left and right column ( i have tried jquery on it and am able to change the width ) BUt when page is resized, the last LI menu width breaks away from being inline with the right column. 3 column DIV i have tried all possible, but what i have used works well with increasing content on one colum increasing the height of the other columns. Other forms were hiding content, require fixed height. I think DIVs dont work in this scenario at all. Should i work with tables instead? and whay? Thanks in advance. Kip Quote Link to comment Share on other sites More sharing options...
xyph Posted August 17, 2012 Share Posted August 17, 2012 Try using this as a base http://matthewjamestaylor.com/blog/perfect-3-column.htm or this http://www.maxdesign.com.au/articles/liquid/ Quote Link to comment Share on other sites More sharing options...
jkkenzie Posted August 17, 2012 Author Share Posted August 17, 2012 These are very good examples: i like them. BUT unfortunately, IF i want to split the left column into two sections or two halfs ( top and bottom) each with different color background. it becomes a challenge with % or px widths. With % width they dont fit on the left and right edges when the whole browser is resized (i tried 100% width and removing any padding or margin) AND px width cause the left column sections to overlap to middle column or Hide content if Visible=hidden. The first LINK you gave, has 3 columns but i want to add sections on the first column to see if it can work seamlessly. Menu section since its on its own DIV UL LIs outside the 3 column DIVs container Or even inside the 3 column DIv container, cant be able to ensure the Last child LI has a width the same as right Column width when page is resized. The second Link you provided does not help with having any column height increase affecting the heights of other columns in the same container. None of those examples increased height of other columns when i used Firebug to duplicate content of One of the columns. Still DIVs have some limits here..... Quote Link to comment Share on other sites More sharing options...
jkkenzie Posted August 17, 2012 Author Share Posted August 17, 2012 Your First Link seems to offer great promise. I was able to set a section on the left column and it displayed it seamlessly with the background. Thanks! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.