Skip navigation
Currently Being Moderated

Fluid Grid Div Tags

Feb 11, 2013 7:55 PM

I have a project that i am working on. I have setup my header, menu, left, content, and right fluid grid div tags.

 

Example

 

     <div id="header">This is the content for Layout Div Tag "header"</div>

     <div id="menu">blah blah blah</div>

     <div id="middleContent">This is the content for Layout Div Tag "middleContent"</div>

     <div id="leftBar">This is the content for Layout Div Tag "leftBar"</div>

     <div id="rightBar">This is the content for Layout Div Tag "rightBar"</div>

     <div id="footer">This is the content for Layout Div Tag "footer"</div>

 

i like this for mobile and tablet layout, but for desktop i would like it to be like this.

 

     <div id="header">This is the content for Layout Div Tag "header"</div>

     <div id="menu">blah blah blah</div>

     <div id="leftBar">This is the content for Layout Div Tag "leftBar"</div>

     <div id="middleContent">This is the content for Layout Div Tag "middleContent"</div>

     <div id="rightBar">This is the content for Layout Div Tag "rightBar"</div>

     <div id="footer">This is the content for Layout Div Tag "footer"</div>

 

So this is the way i would like it, but when you change it, it changes it for all the layouts. Anyway to make it like the example with out it changing the other 2 layouts?

 

Byron

 
Replies
  • Currently Being Moderated
    Feb 12, 2013 9:07 AM   in reply to brex2040

    Hi Byron,

    The difference I can see in your code samples is that in the "mobile" version you have "middle content" after "left bar", contrary to the "desktop" version, where you have "left bar" before "middle content". Is that correct?

     

    Let me start to say that the way the "div"s are presented in the HTML code does not mean much: it is the CSS which decides how the content is placed on the screen (with some limitations).

     

    However, with the fluid grid layout, you can have different CSS styles for mobile / tablet / desktop, not different HTML.

     

    That is why you have to have equal HTML and different CSS, keeping in mind that desktop CSS is inherited from tablet (unless where differently specified) and tablet inherits from mobile.

     

    If I were you, I would do like this:

     

    <div id="left for desktop">

    <div id="middle">

    <div id="left for mobile">same content as "left"

    <div id="right">

     

    Then, in the CSS, I would make "left for mobile" not visible for desktop (with display:none).

    I would make "left for desktop" not visible for mobile.

     

    Hope this helps!

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 12, 2013 9:53 AM   in reply to Riccardo Moschetti

    But wouldn't that duplicate "left" content? 

    Google doesn't like duplicate content.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 5:16 AM   in reply to Riccardo Moschetti

    The Dreamweaver Fenruary update might be of help in this case (have not tested it yet, though)

     

    (12.2 update) When you select an inserted element, the options to hide, duplicate, lock, or delete the Div are displayed. For Divs layered on top of each other, the option to swap Divs is displayed.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 5:41 AM   in reply to Riccardo Moschetti

    'Box-ordinal-group' property can be used to achieve the same.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points