Skip navigation
Currently Being Moderated

Page Structure Layout With Divs

Jul 4, 2013 8:04 AM

Hello Dreamweavers.

 

Ive sarted to layout  DIVS to understand how they can be positioned. I manage to get a basic understanding with the floating Divs

but again Ive bumped into a problem between the content divs and the gallery, Im trying to add space between the content area

and the gallery. all others I give a margin-top and they space out, exept for the gallery div. So whats happening and it wont create space

although im adding in the css margin-top it wont move? And in general is my way of thinking correct?

 

thank you.

 

u2a.jpg

 

 

 

 

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style type="text/css">

 

 

 

 

#wrapper {

          margin-right: auto;

          margin-left: auto;

}

 

 

#container {

          width: 1200px;

          margin-right: auto;

          margin-left: auto;

}

 

 

#header {

          background-color: rgb(0,204,153);

          width: 1200px;

          height: 100px;

}

#navigation {

          background-color: rgb(255,204,153);

          width: 800px;

          height: 50px;

          margin-top: 30px;

          margin-left: 200px;

}

#left_content {

          background-color: rgb(153,51,51);

          width: 400px;

          height: 200px;

          float: left;

          margin-top: 30px;

}

#main_content {

          background-color: rgb(204,255,153);

          height: 200px;

          width: 400px;

          float: left;

          margin-top: 30px;

}

#right_content {

          background-color: rgb(153,153,255);

          height: 200px;

          width: 400px;

          float: left;

          margin-top: 30px;

}

#gallery {

          background-color: rgb(102,255,255);

          height: 200px;

          width: 900px;

          clear: both;

          float: none;

          margin-left: 200px;

          margin-top: 140px;

}

 

 

#footer {

          background-color: rgb(204,102,255);

          width: 900px;

          height: 50px;

          margin-left: 200px;

          margin-top: 40px;

}

 

 

</style>

</head>

 

 

<body>

<div id="wrapper">

<div id="container">

<div id="header">Content for  id "header" Goes Here</div>

<div id="navigation">Content for  id "navigation" Goes Here</div>

<div id="left_content">Content for  id "left_content" Goes Here</div>

<div id="main_content">Content for  id "main_content" Goes Here</div>

<div id="right_content">Content for  id "right_content" Goes Here</div>

<div id="gallery">Content for  id "gallery" Goes Here</div>

<div id="footer">Content for  id "footer" Goes Here</div>

</div>

</div>

</body>

</html>

 
Replies
  • Currently Being Moderated
    Jul 4, 2013 9:27 AM   in reply to inquestflash

    See 3-CSS Boxes below. 

    http://alt-web.com/DEMOS/3-CSS-boxes.shtml

     

    The outer parent container -- the one holding your floats, needs overflow:hidden for better float containment.  Or, you will need to manually clear floats after they are no longer needed.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 11:44 AM   in reply to inquestflash

    Couple of observations:

    - when you set margin: 0 auto; for the wrapper you need a width to center that div. The container div is not required.

     

    - try to avoid id selectors as much as you can, and work with classes to avoid too much specificity

     

    - use the html 5 tags (you will have to add a normalizer or reset css or similar to take care of older browsers)

     

    - use percentages with box-sizing for columns to make life much easier: less code, more flexibility, less specificity

     

    - learn how to deal with margin collapse. Use of box-sizing to deal with the box model's inconveniences, and opening up percentages for width and padding for column spacing saves so much time.

     

    - avoid overflow:hidden on parent containers that hold floated elements, because you cannot shift any content out of that container with relative or abs positioning: it will be clipped. Instead, use a more reliable method: a clearfix (also fixed the margin issue you had)

     

    - avoid setting fixed heights and widths on layout elements if you can. Use the parent wrapper for the overall width, then apply margins, padding, or at least percentages to create a layout that is easily transformed/adjusted. Saves a lot of time. You merely need to adjust the page wrapper's width for a general width change.

     

    - this also allows for a min and max width to create a fluid layout

     

    - prefer min-height over height, so content can be accomodated automatically when required

     

    - add a parent container to hold your content columns

     

    - instead of three id selectors to create those three columns, use one common class.

     

    - use a group selector to control all three main layout elements that share the same styling (width). Saves code, saves time.

     

    - use semantic selector labeling. Avoid the underscore, use either camel case or dashes. (this is more of a standard these days)

     

    - always use external style sheets (but you knew that, right ;-).

     

    Anyway, code (could not get the html code to be accepted, so an image will have to do):

     

    Untitled.png

    #page-wrapper {
              max-width: 1200px;
              min-width: 800px;
              margin: 0 auto;
    }
    
    .page-header {
              background-color: rgb(0,204,153);
              height: 100px;
    }
    
    .main-navigation, .gallery, .page-footer {
              width: 80%;
              margin: 0 auto;          
    }
    
    .main-navigation {
              background-color: rgb(255,204,153);
              height: 50px;
              margin-top: 30px;
    }
    
    .content-column {
              -webkit-box-sizing: border-box;
                 -moz-box-sizing: border-box;
                      box-sizing: border-box;
              background-color: rgb(153,51,51);
              width: 33%;
              min-height: 200px;
              float: left;
              margin-top: 30px;
              padding: 20px;
    }
    
    .gallery {
              background-color: rgb(102,255,255);
              min-height: 200px;
              margin-top: 80px;
    }
    
    .page-footer {
              background-color: rgb(204,102,255);
              min-height: 50px;
              margin-top: 40px;
    }
    
    .cf:before, .cf:after {
    content: "\0020"; display: block; height: 0; visibility: hidden;     
    }
    .cf:after { clear: both; }
    .cf { zoom: 1; }
    
     
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 10:42 AM   in reply to inquestflash

    Copy & paste this into a new, blank document.  If you're going to use an HTML5 doc type, use HTML5 tags.  Never use height properties.  Height is always determined by content.  If required, use min-height.

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 document</title>
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <style>
    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    
    body {
    padding: 0;
    max-width: 1200px;
    min-width: 700px;
    width: 90%;
    margin: 0 auto;
    background: #CFC;
    }
    
    header {
    margin: 0;
    padding: 0;
    background-color: rgb(0,204,153);
    width: 100%;
    min-height: 100px;
    }
    
    nav {
    margin: 0;
    padding: 0;
    min-height: 25px;
    background-color: rgb(255,204,153);
    }
    
    nav ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline;
    margin: 0 24px 0 24px;
    }
    
    section.columns {
    margin: 0;
    padding: 0;
    overflow: hidden; /**float containment**/
    }
    
    aside {
    margin: 0;
    padding: 0;
    width: 33.33%;  /**3 equal width columns**/
    min-height: 200px;
    float: left;
    }
    
    .left_col { background-color: rgb(153,51,51); }
    .middle_col { background-color: rgb(204,255,153); }
    .right_col { background-color: rgb(153,153,255); }
    
    section.gallery {
    margin: 0;
    padding: 0;
    clear: left;
    background-color: rgb(102,255,255);
    min-height: 100px;
    }
    
    footer {
    margin: 0;
    padding: 0;
    background-color: rgb(204,102,255);
    }
    </style>
    </head>
    
    <body>
    <!--begin header-->
    <header>
    <h1>Sitename</h1>
    <h2>Some pithy slogan...</h2>
        <nav>
            <ul>
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
            </ul>
        </nav>
    </header>
    
    <!--begin collumns-->
    <section class="columns">
    <aside class="left_col"> Left aside content here... </aside>
    <aside class="middle_col"> Middle aside content here... </aside>
    <aside class="right_col"> Right aside content here... </aside>
    </section>
    
    <!--begin gallery-->
    <section class="gallery"> Section gallery goes here... </section>
    
    <!--begin footer-->
    <footer> <small>© 2013 XYZ Company. All rights reserved</small></footer>
    
    </body>
    </html>

     

    This is just the basic structure. You may style content inside this layout however you wish. 

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 1:31 PM   in reply to Nancy O.

    Nancy, you should not be using the aside tag for columns at all: an aside is used for related content in an article tag, for example. Never should it be used for sidebars or columns. It's a basic mistake to make, though understandable.

     

    And again: avoid hidden:overflow to contain floats - it limits you, and should you have any elements that are relatively or absolutely positioned a bit to overlap the container box it clips that content. For example, think about a date box for posts that is positioned outside the container: it would be clipped. So to prevent that type of behaviour a clearfix work much better. Also, hidden:overflow / auto do not work well at all with css3 shadows, and not always with css3 transforms, and such.

     

    In short: just avoid that method, and use the clearfix method. Check this clearfix out: https://gist.github.com/irae/708294

     

    From a semantical and structural viewpoint It is also a bad idea to leave out class names for the headers, sections and footers: a layout can have multiple header and footer tags and the same can be said for content. A sidebar can have a header part. An article tag can include a header and footer on your page.

     

    And I noticed a stupid mistake I made: when using rgb() or rgba() for the colour values, always add the hex code first as a fallback for older browsers that do not support rgb() / rgba():

    backgorund-color: #333;

    background-color: rgba(128,128,128,0.8);

     

    And you are correct to include the html5 shiv (I forgot to add it). It is a good idea to also at the very least at a normalizer stylesheet (or reset.css) to style those html5 elements for you (which you did not do in your css), and level the playfield across all browsers: http://necolas.github.io/normalize.css/

    Btw, I prefer modernizr over html5 shiv these days, since it gives one more control. (And IE10 and up no longer support conditional comments as it is.)

     

    Anyway, sorry if I sound a bit like a teacher ;-)

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 1:43 PM   in reply to Herbert2001

    The HTML <aside> tag is used to represent content that is related to the surrounding content within an article or web page, but could still stand alone in its own right. This type of content is often represented in sidebars.

     

    And since I never use positioned elements, overflow:hidden is a perfectly acceptable way to contain floats in fixed-width or semi-liquid layouts.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 2:15 PM   in reply to Nancy O.

    Nancy O. wrote:

     

    The HTML <aside> tag is used to represent content that is related to the surrounding content within an article or web page, but could still stand alone in its own right. This type of content is often represented in sidebars.

     

      Nancy O.

    Depends. In the code example you provided it makes no real semantic sense to use the aside tag, though. Those columns are not really related to any content. Your use of a parent section tag, which assumes thematic grouping of content, also seems to preclude the use of asides in that context. Where in that secion is the main content that those aside tags allude to?

     

    Perhaps they could in other contexts, but still, it's suspect to use the aside tag like that in your example.

     

    I would also avoid the aside tag for generic sidebars in a layout generally, unless such a sidebar truly acts like complementary related information to the main page content. Of course, that is often subjective and up for semantic discussion :-)

     

    Nancy O. wrote:

     

    And since I never use positioned elements, overflow:hidden is a perfectly acceptable way to contain floats in fixed-width or semi-liquid layouts.

     

     

    Nancy O.

    Sure it is. On the other hand, ask yourself this question: would you rather use a method to contain floats that may set yourself up for trouble later on during the styling of the page design (especially with CSS3 properties), or one that does not limit your creativity?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 2:21 PM   in reply to Herbert2001

    Article tags should be added to the document, yes  It remains to be seen what content (if any), the OP intends to add to this. 

     

    If you want to build your own version for the OP to use, please be my guest.

     

    There are lots of different ways to skin the perverbial cat...

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 2:42 PM   in reply to Nancy O.

    You are absolutely correct - standards, like the html5 tags, are always open for interpretation, and the poor proverbial cat has its skin removed in thousands of ways indeed. Especially so with web page coding it is often hard to see the trees for the forest.

     

    Which makes it so interesting and fun to work in (and discuss with other developers like you! I already changed my mind a bit about one thing myself after reading your last post: I was dead set against using an aside for any overall page sidebar - however, black & white thinking like that is fraught with dangers. I can now see certain situations where an aside could potentially serve as a sidebar.

     

    ps I already made my version (third post above your version).

     
    |
    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