CODEWITHSUNDEEP
csshtmllayout
Pawel
Pawel

Reputation: 27

one section overlapped by other on html page

I created a page with some layout with css:). Problem is that Section area is overlaping Header area:)... how to solve this? The header area should be at the top, and after there should be section area displayed

jsfiddle

HTML code:

<header style="width: auto; outline: 1px solid red;position: relative; ">
    <div style="width: 150px; outline: 1px solid green;">XXXXX picture XXXXX picture XXXXX picture</div>
    <div style="width: 810px; height: 70px; outline: 1px solid yellow">
      <div style='position: relative; width: auto; height: 100%; outline: 1px solid red;'>
        <div style="position:absolute; top:50%; height:20px; width: 100%; margin-top:-10px; outline:   1px solid green; ">
         <div style="float: left; padding: 0 20;" class="blue">News</div>
         <div style="float: left; padding: 0 20;" class="blue">Tax Tips</div>
         <div style="float: left; padding: 0 20;" class="blue">Lifestyle</div>
         <div style="float: right; padding: 0 20;">XXXXXX</div>
         <div style="float: right; padding: 0 20;">XXXXXX</div>
        </div>
      </div>
    </div>
</header>
<section>
    <div class='post'>
       <div class='post-title>'>TITLE TITLE TITLE TITLE</div>
           <div class='tech-title>'>
              <div class='added-by'>MARK NEWCOBE</div>
              <div class='added-at'>10:10:00 12/12/2014</div>
           </div>
           <div class='post-body'>
              <p>Body Body Body Body Body Body Body Body Body Body Body Body</p>
              <p>Body Body Body Body Body Body Body Body Body Body Body Body</p>
              <p>Body Body Body Body Body Body Body Body Body Body Body Body</p>
              <p>Body Body Body Body Body Body Body Body Body Body Body Body</p>
            </div>
        </div>
</section>

CSS code:

.blue 
{
  color: blue;
}
.post
{
  width: auto:    
}

.added-by
{
  float: left;
  font-size: 10px;
}

.added-at
{
  float: right;      
  font-size: 10px;
}

.post
{
  //position: static;      
}

Upvotes: 1

Views: 83

Answers (1)

DaniP
DaniP

Reputation: 38252

First at all I will suggest you the use of ClassSelectors instead of use inline styles.

Then related to your problem is you are using absolute position to place the content inside the header section that takes the elements out of the flow and then doesn't take any space making his container height = 0. Try with float instead of position:absolute to make them inline:

  1. Remove the inline styles for the absolute position and then add this.

    header > div {
    float:left;
}
header:after {
    content:" ";
    display:table;
    clear:both;
}

Check this DemoFiddle

Upvotes: 2

Related Questions