I'm using the fluid grid design, and my mobile layout has 5 columns, and some DIVS added - see below:
I'm trying to get my "LEFT PANE" using 2 columns, and my "RIGHT PANE" using 3 columns to the right of the left pane. You can see they are side by side above, but the right pane only takes up 2 columns.
As soon as I make the RIGHT COLUMN stretch to 3 columns, it moves it down below the left column, like below:
What am I doing wrong? Any help/tips/direction appreciated!
Offhand, I'd say you're not keeping your LayoutDivs inside the GridContainer Div. And your floated LayoutDivs are too wide to fit on the same row. There should be some gutter space between them. See screenshot below:
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
Thanks for the reply....my div's are definitely within the grid:
<div class="gridContainer clearfix">
<div id="header">THIS COULD BE THE HEADER</div>
<div id="leftside">LEFT PANE</div>
<div id="rightside">RIGHT PANE</div>
And when I drag the handles for a div to shrink or stretch it, it automatically "snaps" to the nearest column, and as you can see in my screen shot above, it stretches over the "gutter"....I can't seem to control this..?
Thanks again for any more info.
Nancy - thanks,
I tried using a new grid with 4 columns for mobile, and they are correctly snapping to the columns now. Not sure why the odd number of columns wasn't working...but even in that instance, if I switched to the tablet view, which used 8 columns, the div's extended over the gutters...
In any case - thanks for your replies - I keep playing with it....
BTW - Do you think more people will opt for this fluid/responsive design instead of designing dedicated mobile versions of their sites?
The only upside I see is keeping the sites "isolated" from each other, if that's desired....My issue is I'm not a CSS expert, and I'm somewhat intimidated by all the CSS changes, hacks, cross-browser support, etc...
Some big places still use mobile detection with redirection, like digg.com....on my mobile I get pushed to m.digg.com - I don't know what their reasons are, but I guess some places certainly do it.
I'm very excited about the responsive design support in DW CS6....it does a lot of the media quires stuff for you, and I only need to worry about the CSS styling, more or less...