Skip navigation
Currently Being Moderated

fluid grid issue with 2 divs side by side

Oct 28, 2013 5:23 AM

I have set up a page using the DW CS6 fluid grid layout template.

...

<body>

<div class="gridContainer clearfix">

<div id="wrap">

<div id="logo"></div>

<div id="bannertxt"><h1></h1></div>

<div id="topnav"><ul>

<li><a href="#">History</a></li>

<li><a href="#">Events</a></li>

<li><a href="#">Restoration</a></li>

<li><a href="#">Membership</a></li>

<li><a href="#">Contact</a></li>

</ul></div>

<div id="blurb"></div>

<div id="act1"></div>

<div id="act1"></div>

<div id="footer">"footer"</div>

</div>

</body>

....

Everything behaves OK in the 3 screen sizes, but I need some confirmation of how I am handling #act1 and #act2 divs

Is the below correct? It comes from the "@media only screen and (min-width: 769px) {" css file generated by DW. (my quotes)

#wrap {

    clear: both;

    float: left;

    margin-left: 0;

    width: 100%;

#act1 {

    clear: both;

    float: left;

    margin-right: 0;

    width: 49.25%;

    display: block;

}

#act2 {

    clear: none;

    float: left;

    margin-left: 0.5%;

    width: 49.75%;

    display: block;

}

The only other css I can see that is relevant is in the source html file:

#act1 {

    border: 1px solid;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    margin-bottom:5px;

    background-color:#fff7c6;}

#act2 {

    border: 1px solid;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    margin-bottom:5px;

    background-color:#fff7c6;}

 

I have a feeling it might be the #wrap div inside the .clearfix not set correctly, but ??

There is no css for #wrap in the source html yet.

Sorry for the long post!!

 

Thanks

 
Replies
  • Currently Being Moderated
    Oct 28, 2013 10:06 AM   in reply to tony_see

    The #Wrap div should not be floated since it is a container for everything else. Right?  I'm not even sure why you need it.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2013 11:11 AM   in reply to tony_see

    Unless it provides important value that I'm not aware of, I would get rid of the #wrap container and simply use the .gridContainer as your main wrapper.

     

    If you want the footer to be separate from the rest, just close the gridContainer div before you begin the footer.

     

    </div>

         <footer> </footer>

     

    </body>

    </html>

     

     

    Nancy O.

     
    |
    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