0

I have two div's that I'm using in header section of my HTML5 main page. Eventually I want to refactor as an include, but that's for another post. I have the second div offset. I want to display the entire container area of the containing object - obviously, but I'm having trouble.

<body>  
<div class="gridContainer clearfix>
    <div id="div1" class="fluid"> 
        <header id="headGraphics">
            <div id="headRectangle1">"Rectangle1"</div>
            <div id="headRectangle2">"Rectangle2"</div>
        </header>
     </div>
</div>
</body>

Here's my code using boilerplate.css.

 .clearfix:before, .clearfix:after {
     content:"";
     display: table;
 }
 .clearfix:after {
     clear: both;
 }
 .clearfix {
     *zoom: 1;
 }
 .gridContainer.clearfix #headGraphics #headRectangle1 {
     background-color: #FF0100;
     float: left;
     width: 300px;
     height: 75px;
     position: relative;
 }
 .gridContainer.clearfix #headGraphics #headRectangle2 {
     background-color: #FFC30C;
     float: left;
     /*margin-right: 50px;*/
     width: 300px;
     height: 75px;
     position: relative;
     top: 25px;
     right: 200px;
 }
 .gridContainer.clearfix #headGraphics {
     margin:auto;
     margin-top: 20px;
 }
 #headGraphics {
     overflow: hidden;
 }
 .gridContainer.clearfix #div1 {
 }
 .gridContainer.clearfix #mainNav .navTableGrid {
 }

The overflow: hidden initially worked properly, but I started working on a table to create a nav and I noticed that all is lost.

I was wondering how to apply additional(multiple) classes to a selector. Can I simply add clearfix :before and :after to the class properties.

I'm using DW - not that that matters, but....

Again, overflow was working. What did I do?

Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
JZeig1
  • 403
  • 1
  • 6
  • 13
  • can you make your code more clear? With the code above it's not possible to see your issue. Better yet, make a jsfiddle with the code showing your problem. – Luciano Sep 03 '14 at 10:49
  • I'm not sure how much of the code is suitable. I will start small. – JZeig1 Sep 03 '14 at 12:32
  • I'm not sure how much of the code is suitable. I will start small. Better yet, let me explain what's going on. I'm going to assume the HTML doesn't need explanation. The clearfix selectors up at top where just part of boilerplate. #headGraphics is the header id for the container that holds two div's: #headRectangle1 and #headRectangle2. All I'm trying to do is offset #headRectangle2 without container collapse. When it collapses it cuts off the bottom or div. – JZeig1 Sep 03 '14 at 12:39
  • additionally, you can ignore the .gridContainer .clearfix stuff at bottom. After the overflow: hidden didn't work for me, I was trying to use the clearfix method - that's why you see that stuff on bottom of text. – JZeig1 Sep 03 '14 at 12:43

1 Answers1

0

I found a post on another question that was on Stack Overflow:

What methods of ‘clearfix’ can I use?

That worked fine for me. Not sure why 'overflow: hidden' worked one minute then not the next.

Demo

Community
  • 1
  • 1
JZeig1
  • 403
  • 1
  • 6
  • 13